真·无用CSS需工具人工交叉验证Coverage面板仅限当前路径须全站测试PurgeCSS/UnCSS扫描注意动态class、CMS内容及!important按需引入需mini-css-extract-plugin或Vite原生支持压缩禁用mergeLonghand等破坏性选项第三方库需组件级CSS导入SVG内联替代字体图标。怎么判断哪些CSS是真·无用代码浏览器不会主动告诉你哪条规则没被用过得靠工具人工交叉验证。Chrome DevTools 的 Coverage 面板能标出加载后未执行的样式行但只反映当前页面路径下的渲染行为——单页应用切换路由、悬停态 :hover、媒体查询断点里的规则它大概率会漏判。真正靠谱的做法是先跑一遍全站关键路径含登录态、弹窗、响应式视口切换再结合 PurgeCSS 或 UnCSS 扫描 HTML 模板和 JS 渲染结果。注意PurgeCSS 默认不解析 import 和 layer若用了 Tailwind 的 layer components 或动态 class 拼接如 class{${base}-text-${size}}必须手动配置 content 和 safelist。别信“一键扫描完就删”尤其当项目含 CMS 输出内容、用户自定义样式或第三方组件时!important 规则容易被误删PurgeCSS 默认保留但自定义正则若写错可能绕过Webpack 插件模式下mini-css-extract-plugin 输出前才清理开发时热更新看不到效果按需引入 CSS 为什么不能只靠 import 拆分单纯把 common.css 拆成 button.css、modal.css 并在组件里 import对最终体积几乎没帮助——Webpack 默认把所有 CSS 合并进一个 main.css除非你显式启用 CSS code splitting。React/Vue 项目更常见问题是样式随组件懒加载但实际渲染时仍被提前注入。比如用 React.lazy 加载带 import ./Dialog.css 的组件Webpack 会把 CSS 提取到初始包里因为 style-loader 默认同步插入 style 标签。立即学习“前端免费学习笔记深入”要用 mini-css-extract-plugin 替代 style-loader并开启 splitChunks.chunks: allVite 用户直接写 import ./Card.css 即可它默认对 CSS 做 code splitting注意 SSR 场景服务端渲染时 CSS 不应按需加载需用 critters 或 vue-head 提取首屏关键 CSSpostcss-preset-env 和 cssnano 压缩时的坑cssnano 默认启用所有优化但某些压缩会破坏兼容性。比如 mergeLonghand 把 margin-top: 10px; margin-bottom: 10px; 合成 margin: 10px 0 10px;看似省字节但若原样式被 JS 动态读取 marginTop计算值可能出错。 唱鸭 音乐创作全流程的AI自动作曲工具集 AI 辅助作词、AI 自动作曲、编曲、混音于一体