fix(minify): preserve Dioxus hydration markers and remove unsafe per-URL cache
- Keep Dioxus SSR comments (<!--#-->, <!--node-id<N>-->, <!--placeholder-->) during HTML minification to avoid hydration failures. - Drop the per-URL minify cache in the Axum middleware: the same URL can render differently for logged-in vs anonymous users, so URL-level caching risks leaking admin UI into public responses. - Let the middleware handle HTML minification once instead of minifying in markdown rendering as well. - Consolidate CSS comment stripping into the existing minify_css path and add a benchmark for html_minify.
This commit is contained in:
parent
449a545886
commit
476fad27e5
@ -190,8 +190,8 @@ pub fn render_markdown_enhanced(md: &str) -> RenderedContent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
RenderedContent {
|
RenderedContent {
|
||||||
html: crate::utils::html_minify::minify_html(&clean_html(&html)),
|
html: clean_html(&html),
|
||||||
toc_html: crate::utils::html_minify::minify_html(&toc_html),
|
toc_html,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -34,13 +34,9 @@ fn main() {
|
|||||||
let mocha_css = css_for_theme_with_class_style(&mocha, ClassStyle::Spaced)
|
let mocha_css = css_for_theme_with_class_style(&mocha, ClassStyle::Spaced)
|
||||||
.expect("Failed to generate Mocha CSS");
|
.expect("Failed to generate Mocha CSS");
|
||||||
|
|
||||||
// 移除 syntect 生成的 /* ... */ 注释,减小最终 CSS 体积
|
|
||||||
let latte_clean = strip_comments(&latte_css);
|
|
||||||
let mocha_clean = strip_comments(&mocha_css);
|
|
||||||
|
|
||||||
// 重写选择器:浅色主题无前缀,深色主题加 `.dark ` 前缀
|
// 重写选择器:浅色主题无前缀,深色主题加 `.dark ` 前缀
|
||||||
let latte_rewritten = rewrite_rules(&latte_clean, ".md-content pre code", "");
|
let latte_rewritten = rewrite_rules(&latte_css, ".md-content pre code", "");
|
||||||
let mocha_rewritten = rewrite_rules(&mocha_clean, ".md-content pre code", ".dark ");
|
let mocha_rewritten = rewrite_rules(&mocha_css, ".md-content pre code", ".dark ");
|
||||||
|
|
||||||
let mut output = String::new();
|
let mut output = String::new();
|
||||||
output.push_str("/* Auto-generated by generate_highlight_css — DO NOT EDIT */\n");
|
output.push_str("/* Auto-generated by generate_highlight_css — DO NOT EDIT */\n");
|
||||||
@ -49,7 +45,7 @@ fn main() {
|
|||||||
output.push_str("/* Catppuccin Mocha (dark) */\n");
|
output.push_str("/* Catppuccin Mocha (dark) */\n");
|
||||||
output.push_str(&mocha_rewritten);
|
output.push_str(&mocha_rewritten);
|
||||||
|
|
||||||
// 压缩最终 CSS:去掉注释、空白和换行
|
// 压缩最终 CSS:注释、空白、换行统一在这一步处理(minify_css 会跳过 /* */)
|
||||||
let output = minify_css(&output);
|
let output = minify_css(&output);
|
||||||
|
|
||||||
// 确保 public/ 目录存在并写入生成的 CSS
|
// 确保 public/ 目录存在并写入生成的 CSS
|
||||||
@ -59,42 +55,6 @@ fn main() {
|
|||||||
println!("Generated public/highlight.css");
|
println!("Generated public/highlight.css");
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 去除 CSS 文本中的 C 风格 /* ... */ 注释。
|
|
||||||
fn strip_comments(css: &str) -> String {
|
|
||||||
let mut result = String::with_capacity(css.len());
|
|
||||||
let chars: Vec<char> = css.chars().collect();
|
|
||||||
let mut i = 0;
|
|
||||||
while i < chars.len() {
|
|
||||||
if i + 1 < chars.len() && chars[i] == '/' && chars[i + 1] == '*' {
|
|
||||||
// 遇到 /* 后跳过直到找到配对的 */
|
|
||||||
while i + 1 < chars.len() && !(chars[i] == '*' && chars[i + 1] == '/') {
|
|
||||||
i += 1;
|
|
||||||
}
|
|
||||||
i += 2;
|
|
||||||
} else {
|
|
||||||
result.push(chars[i]);
|
|
||||||
i += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
result
|
|
||||||
}
|
|
||||||
|
|
||||||
/// 将 syntect 生成的 CSS 选择器包装到指定的 base 选择器下,并可附加前缀。
|
|
||||||
///
|
|
||||||
/// syntect 原始输出形如:
|
|
||||||
/// .code { ... }
|
|
||||||
/// .kw { color: #xxx; }
|
|
||||||
/// .kw, .kt { color: #yyy; }
|
|
||||||
///
|
|
||||||
/// 转换后变为:
|
|
||||||
/// .md-content pre code { ... }
|
|
||||||
/// .dark .md-content pre code .kw { ... }
|
|
||||||
///
|
|
||||||
/// 参数:
|
|
||||||
/// - `css`: syntect 生成的原始 CSS;
|
|
||||||
/// - `base`: 作用域基础选择器,这里固定为 `.md-content pre code`;
|
|
||||||
/// - `prefix`: 主题前缀,浅色主题传空字符串,深色主题传 `.dark `。
|
|
||||||
///
|
|
||||||
/// 压缩 CSS:移除注释、合并空白、删除选择器/属性周围的无用空格。
|
/// 压缩 CSS:移除注释、合并空白、删除选择器/属性周围的无用空格。
|
||||||
fn minify_css(css: &str) -> String {
|
fn minify_css(css: &str) -> String {
|
||||||
let mut out = String::with_capacity(css.len());
|
let mut out = String::with_capacity(css.len());
|
||||||
@ -140,6 +100,21 @@ fn minify_css(css: &str) -> String {
|
|||||||
out.trim().to_string()
|
out.trim().to_string()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// 将 syntect 生成的 CSS 选择器包装到指定的 base 选择器下,并可附加前缀。
|
||||||
|
///
|
||||||
|
/// syntect 原始输出形如:
|
||||||
|
/// .code { ... }
|
||||||
|
/// .kw { color: #xxx; }
|
||||||
|
/// .kw, .kt { color: #yyy; }
|
||||||
|
///
|
||||||
|
/// 转换后变为:
|
||||||
|
/// .md-content pre code { ... }
|
||||||
|
/// .dark .md-content pre code .kw { ... }
|
||||||
|
///
|
||||||
|
/// 参数:
|
||||||
|
/// - `css`: syntect 生成的原始 CSS;
|
||||||
|
/// - `base`: 作用域基础选择器,这里固定为 `.md-content pre code`;
|
||||||
|
/// - `prefix`: 主题前缀,浅色主题传空字符串,深色主题传 `.dark `。
|
||||||
fn rewrite_rules(css: &str, base: &str, prefix: &str) -> String {
|
fn rewrite_rules(css: &str, base: &str, prefix: &str) -> String {
|
||||||
let mut out = String::new();
|
let mut out = String::new();
|
||||||
let mut pos = 0;
|
let mut pos = 0;
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
//! SSR HTML 空白压缩中间件。
|
//! SSR HTML 空白压缩中间件。
|
||||||
//!
|
//!
|
||||||
//! 对 Dioxus fullstack 返回的 `text/html` 响应做轻量 minify。
|
//! 对 Dioxus fullstack 返回的 `text/html` 响应做轻量 minify。
|
||||||
//! 为了避免 SSR 增量渲染缓存命中后仍然重复 minify,中间件内部维护了一个按 URL
|
//!
|
||||||
//! 缓存的内存缓存(容量有限、TTL 较短),minify 后的结果会直接复用。
|
//! 注意:这里**不**维护 per-URL 缓存。同一个 URL 在 admin 登录态与匿名态下
|
||||||
|
//! 渲染出的 HTML 不同(例如是否带管理按钮),按 URL 缓存会导致跨用户内容
|
||||||
|
//! 泄露。Dioxus 的增量渲染器(ISRG)本身已经按 URL 缓存了 SSR HTML,
|
||||||
|
//! 这里的 minify 只是对其输出做一次无损空白折叠,无需再叠加一层缓存。
|
||||||
|
|
||||||
#[cfg(feature = "server")]
|
#[cfg(feature = "server")]
|
||||||
use axum::{
|
use axum::{
|
||||||
@ -13,22 +16,9 @@ use axum::{
|
|||||||
response::Response,
|
response::Response,
|
||||||
};
|
};
|
||||||
use http_body_util::BodyExt;
|
use http_body_util::BodyExt;
|
||||||
use moka::future::Cache;
|
|
||||||
use std::time::Duration;
|
|
||||||
|
|
||||||
/// 按 URL 缓存 minify 结果,避免 SSR 缓存命中后重复计算。
|
|
||||||
static MINIFY_CACHE: std::sync::LazyLock<Cache<String, String>> =
|
|
||||||
std::sync::LazyLock::new(|| {
|
|
||||||
Cache::builder()
|
|
||||||
.max_capacity(256)
|
|
||||||
.time_to_live(Duration::from_secs(300))
|
|
||||||
.build()
|
|
||||||
});
|
|
||||||
|
|
||||||
/// Axum 中间件入口。
|
/// Axum 中间件入口。
|
||||||
pub async fn layer(request: Request, next: Next) -> Response {
|
pub async fn layer(request: Request, next: Next) -> Response {
|
||||||
let uri = request.uri().clone();
|
|
||||||
let path = uri.path().to_string();
|
|
||||||
let response = next.run(request).await;
|
let response = next.run(request).await;
|
||||||
|
|
||||||
let is_html = response
|
let is_html = response
|
||||||
@ -42,24 +32,6 @@ pub async fn layer(request: Request, next: Next) -> Response {
|
|||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 不缓存错误响应与后台管理页面,避免把错误页或敏感管理界面扩散。
|
|
||||||
let status = response.status();
|
|
||||||
let is_admin_or_auth = path.starts_with("/admin") || path == "/login" || path == "/register";
|
|
||||||
let should_cache = status.is_success() && !is_admin_or_auth;
|
|
||||||
|
|
||||||
// 缓存 key 必须包含完整 query string,避免不同参数共享同一份响应。
|
|
||||||
let cache_key = format!(
|
|
||||||
"{}{}",
|
|
||||||
path,
|
|
||||||
uri.query().map(|q| format!("?{}", q)).unwrap_or_default()
|
|
||||||
);
|
|
||||||
|
|
||||||
if should_cache {
|
|
||||||
if let Some(cached) = MINIFY_CACHE.get(&cache_key).await {
|
|
||||||
return build_response(response, cached);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let (parts, body) = response.into_parts();
|
let (parts, body) = response.into_parts();
|
||||||
let bytes = match body.collect().await {
|
let bytes = match body.collect().await {
|
||||||
Ok(collected) => collected.to_bytes(),
|
Ok(collected) => collected.to_bytes(),
|
||||||
@ -74,11 +46,6 @@ pub async fn layer(request: Request, next: Next) -> Response {
|
|||||||
let original = String::from_utf8_lossy(&bytes);
|
let original = String::from_utf8_lossy(&bytes);
|
||||||
let minified = crate::utils::html_minify::minify_html(&original);
|
let minified = crate::utils::html_minify::minify_html(&original);
|
||||||
|
|
||||||
// 仅对成功且非后台页面写入缓存。
|
|
||||||
if should_cache {
|
|
||||||
let _ = MINIFY_CACHE.insert(cache_key, minified.clone()).await;
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut response = Response::builder()
|
let mut response = Response::builder()
|
||||||
.status(parts.status)
|
.status(parts.status)
|
||||||
.header(header::CONTENT_TYPE, "text/html; charset=utf-8")
|
.header(header::CONTENT_TYPE, "text/html; charset=utf-8")
|
||||||
@ -94,20 +61,3 @@ pub async fn layer(request: Request, next: Next) -> Response {
|
|||||||
|
|
||||||
response
|
response
|
||||||
}
|
}
|
||||||
|
|
||||||
fn build_response(original: Response, body: String) -> Response {
|
|
||||||
let (parts, _body) = original.into_parts();
|
|
||||||
let mut response = Response::builder()
|
|
||||||
.status(parts.status)
|
|
||||||
.header(header::CONTENT_TYPE, "text/html; charset=utf-8")
|
|
||||||
.body(Body::from(body.clone()))
|
|
||||||
.expect("failed to build cached response");
|
|
||||||
|
|
||||||
*response.headers_mut() = parts.headers;
|
|
||||||
response.headers_mut().remove(header::TRANSFER_ENCODING);
|
|
||||||
response
|
|
||||||
.headers_mut()
|
|
||||||
.insert(header::CONTENT_LENGTH, body.len().into());
|
|
||||||
|
|
||||||
response
|
|
||||||
}
|
|
||||||
|
|||||||
@ -2,13 +2,28 @@
|
|||||||
//!
|
//!
|
||||||
//! 仅服务端使用。对 HTML 片段做轻量 minify:
|
//! 仅服务端使用。对 HTML 片段做轻量 minify:
|
||||||
//! - 合并标签之间连续空白为一个空格;
|
//! - 合并标签之间连续空白为一个空格;
|
||||||
//! - 移除 HTML 注释;
|
//! - 移除普通 HTML 注释,但**保留 Dioxus hydration marker 注释**;
|
||||||
//! - 保留 `<pre>`、`<code>`、`<textarea>`、`<script>`、`<style>` 内部原样空白。
|
//! - 保留 `<pre>`、`<code>`、`<textarea>`、`<script>`、`<style>` 内部原样空白。
|
||||||
|
//!
|
||||||
|
//! Dioxus 0.7 SSR 会在输出中插入若干 load-bearing 的注释 marker,客户端
|
||||||
|
//! hydration 依赖它们定位动态节点。删除这些注释会导致前端 hydration
|
||||||
|
//! 失败(节点对不齐、交互失效)。需要保留的格式:
|
||||||
|
//! `<!--#-->` 动态文本节点结束 marker
|
||||||
|
//! `<!--node-id<N>-->` 动态文本节点起始 marker
|
||||||
|
//! `<!--placeholder-->` / `<!--placeholder<N>-->` 占位节点 marker
|
||||||
|
//! (参考 others/dioxus/packages/ssr/src/renderer.rs)
|
||||||
|
|
||||||
use lol_html::{doc_comments, doc_text, element, rewrite_str, RewriteStrSettings};
|
use lol_html::{doc_comments, doc_text, element, rewrite_str, RewriteStrSettings};
|
||||||
use std::cell::Cell;
|
use std::cell::Cell;
|
||||||
use std::rc::Rc;
|
use std::rc::Rc;
|
||||||
|
|
||||||
|
/// 判断一段注释文本是否为 Dioxus hydration marker,必须原样保留。
|
||||||
|
fn is_hydration_marker(comment_text: &str) -> bool {
|
||||||
|
comment_text == "#"
|
||||||
|
|| comment_text.starts_with("node-id")
|
||||||
|
|| comment_text.starts_with("placeholder")
|
||||||
|
}
|
||||||
|
|
||||||
/// 压缩 HTML 中的无用空白。
|
/// 压缩 HTML 中的无用空白。
|
||||||
pub fn minify_html(input: &str) -> String {
|
pub fn minify_html(input: &str) -> String {
|
||||||
let protected_depth: Rc<Cell<usize>> = Rc::new(Cell::new(0));
|
let protected_depth: Rc<Cell<usize>> = Rc::new(Cell::new(0));
|
||||||
@ -46,7 +61,10 @@ pub fn minify_html(input: &str) -> String {
|
|||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
doc_comments!(|c| {
|
doc_comments!(|c| {
|
||||||
c.remove();
|
// 只删除非 hydration marker 的普通注释。
|
||||||
|
if !is_hydration_marker(c.text().as_str()) {
|
||||||
|
c.remove();
|
||||||
|
}
|
||||||
Ok(())
|
Ok(())
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
|||||||
39
src/utils/html_minify_bench.rs
Normal file
39
src/utils/html_minify_bench.rs
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
//! 临时 bench:测量 minify_html 对真实大小 HTML 的耗时。
|
||||||
|
//! 用完即删。
|
||||||
|
|
||||||
|
#[cfg(all(test, feature = "server"))]
|
||||||
|
mod bench {
|
||||||
|
use std::time::Instant;
|
||||||
|
|
||||||
|
fn synthetic_html(size_hint: usize) -> String {
|
||||||
|
// 构造一个带空白、注释、嵌套标签的模拟 HTML,体积接近真实 SSR 输出。
|
||||||
|
let unit = "<div class=\"x\">\n <p>hello world</p>\n <!-- comment -->\n <a href=\"/p\">link</a>\n</div>\n";
|
||||||
|
let unit_len = unit.len();
|
||||||
|
let repeats = size_hint / unit_len + 1;
|
||||||
|
unit.repeat(repeats)
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn bench_minify_throughput() {
|
||||||
|
for &kb in &[50usize, 200, 568] {
|
||||||
|
let html = synthetic_html(kb * 1024);
|
||||||
|
// 预热
|
||||||
|
let _ = crate::utils::html_minify::minify_html(&html);
|
||||||
|
|
||||||
|
let n = 20;
|
||||||
|
let start = Instant::now();
|
||||||
|
for _ in 0..n {
|
||||||
|
let _ = crate::utils::html_minify::minify_html(&html);
|
||||||
|
}
|
||||||
|
let elapsed = start.elapsed() / n;
|
||||||
|
let input_kb = html.len() as f64 / 1024.0;
|
||||||
|
let mbps = (html.len() as f64 / elapsed.as_secs_f64()) / (1024.0 * 1024.0);
|
||||||
|
println!(
|
||||||
|
"input={:.0}KB avg minify={:?} (~{:.0} MB/s)",
|
||||||
|
input_kb,
|
||||||
|
elapsed,
|
||||||
|
mbps
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -10,3 +10,6 @@ pub mod time;
|
|||||||
/// HTML 空白压缩工具。
|
/// HTML 空白压缩工具。
|
||||||
#[cfg(feature = "server")]
|
#[cfg(feature = "server")]
|
||||||
pub mod html_minify;
|
pub mod html_minify;
|
||||||
|
|
||||||
|
#[cfg(all(test, feature = "server"))]
|
||||||
|
mod html_minify_bench;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user