内联关键css必须提取，否则浏览器卡在cssom构建阶段导致白屏；手动提取易漏伪类、响应式规则及动态样式，推荐用critters等工具基于真实dom自动提取并控制体积≤14kb。

内联 CSS 为什么必须提取，不提会怎样

不提取就白屏——浏览器卡在 CSSOM 构建阶段，首屏渲染被阻塞，用户看到的不是内容，是空白。这不是“慢一点”，而是关键路径上完全没进展。尤其当 <style></style> 里混着 @import、@media (min-width: 1200px) 或伪类规则时，手动删减极易漏掉 .menu[open] 这类交互前不可见但实际参与渲染的样式。

常见错误现象：

• DevTools Coverage 显示“未使用”，但点击菜单后样式错乱——Coverage 只看当前 DOM 快照，不模拟交互触发路径
• 构建后体积暴涨，因为正则把 @supports (display: grid) 和所有 url(../img/xxx.png) 全塞进 <style></style>，路径失效且无法缓存
• 响应式断点里的规则（如 @media (max-width: 768px)）被保留，但实际首屏在桌面端，白白增加 10KB

critters 是什么，怎么配进 Vite 或 Webpack

critters 不是字符串替换工具，它用 JSDOM 模拟真实浏览器环境，解析 HTML → 构建 DOM → 追踪 CSSOM 计算路径，只保留真正影响首屏渲染的规则。它默认过滤 media="print"、大屏断点、不在首屏 DOM 中的 class，但不会处理 <style></style> 里的 @import——这部分得提前 resolve。

Vite 用户只需：

wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

• 安装：npm install critters --save-dev
• 在 vite.config.ts 的 build.rollupOptions.plugins 中加 critters()
• 确保预渲染开启（SSR 或 SSG），否则 DOM 快照为空，提取结果为空

Webpack 用户注意：

• 必须传 htmlPath 选项，指向最终生成的 HTML 文件路径，比如 ./dist/index.html
• 若用 HtmlWebpackPlugin，要等它写完 HTML 再执行 critters，顺序错就提取失败

JS 内联脚本怎么安全外链，又不破坏执行时机

内联 <script></script> 默认同步执行，阻塞 HTML 解析；外链后若不控制加载时机，document.getElementById("app") 就是 null。关键不是“能不能外链”，而是“什么时候执行”。

实操建议：

• DOM 操作类脚本：移到

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！