Webpack中必须用mini-css-extract-plugin才能拆出独立CSS文件，因其替代style-loader实现样式外链输出，而splitChunks和按需加载需配合动态import及额外工具如PurgeCSS。
Webpack 中必须用 mini-css-extract-plugin 才能拆出 CSS 文件
Webpack 默认把 import './xxx.css' 的样式打进 JS bundle，运行时靠 style-loader 插入 标签——这根本不是“分割”，只是内联。要生成独立的 .css 文件，必须在生产环境替换掉 style-loader，改用 MiniCssExtractPlugin.loader。
常见错误是开发和生产共用同一套 rule，结果热更新失效或构建报错。正确做法是：
- 在
module.rules中为css/less/sass配置两个 loader 链：开发用['style-loader', 'css-loader']，生产用[MiniCssExtractPlugin.loader, 'css-loader'] -
MiniCssExtractPlugin本身不压缩 CSS，得额外加css-minimizer-webpack-plugin - 如果用了 PostCSS，确保
postcss-loader在MiniCssExtractPlugin.loader右侧（loader 执行顺序从右往左）
Vite 的 cssCodeSplit: true 只是物理拆分，不是按需加载
很多人看到 Vite 构建后输出多个 .css 文件，就以为“已经按需了”。其实 cssCodeSplit: true（默认开启）只做一件事：把不同 chunk 里的 CSS 写进不同文件，比如 index-xxx.css 和 async-xxx.css。但这些文件仍会被同步 到 HTML 头部，首屏照样全量加载。
真正触发“按需”的唯一条件是：CSS 必须来自动态导入模块。例如：
- Vue 路由中写
component: () => import('./Dashboard.vue')，且Dashboard.vue里有，该样式才会被打包进对应异步 chunk - React 中用
React.lazy(() => import('./Chart'))，且Chart.tsx里import './chart.css'，CSS 才会随 JS 一起懒加载 - 千万别在根组件或入口文件里
import './global.css'——它铁定进main.css，无法拆
splitChunks 对 CSS 生效的前提是它已被识别为独立模块
Webpack 的 splitChunks 默认只处理 JS，对 CSS “视而不见”。只有当 CSS 已被 mini-css-extract-plugin 提取为资源模块后，它才能参与公共代码抽取。
关键配置点：
- 必须设
chunks: 'all'（默认是'async'），否则 CSS 模块不会被纳入分析范围 - 公共 CSS（如被多个路由组件 import 的
common.css）会进入cacheGroups，需显式配test: /\.css$/并设minChunks: 2 - 若某 CSS 只被一个异步组件 import，它不会被抽走，而是留在那个 async chunk 对应的 CSS 文件里——这才是真正的“按需”
PurgeCSS 或 Unocss 才能剔除未用样式，Tree Shaking 对 CSS 无效
Webpack 的 Tree Shaking 完全不适用于 CSS：import './button.css' 被视为有副作用，哪怕里面所有类名在 JS 中一次都没出现，整个文件也会保留。想减小体积，只能靠外部工具扫描实际使用的类名反向过滤。
落地建议：
- Webpack 项目优先用
purgecss-webpack-plugin，配合glob显式指定扫描路径（如src/**/*.{js,ts,jsx,tsx}和public/index.html） - 动态类名（如
className={`btn-${type}`）必须加到safelist，否则会被误删 - Vite 用户直接上
unocss，它按需生成 CSS，天然绕过动态类识别难题，也不依赖扫描
最易被忽略的一点：CSS 拆分和按需引入是两件事，前者靠插件（mini-css-extract-plugin / cssCodeSplit），后者靠 import 位置；而剔除未用样式是第三件事，得另配工具——三者缺一不可，但各自职责不能混淆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
