Webpack中必须用MiniCssExtractPlugin才能生成独立CSS文件，因其在构建时提取样式为.css文件并用注入，而style-loader仅内联CSS；需动态切换loader、配合splitChunks和动态import实现按需引入。
Webpack 中必须用 MiniCssExtractPlugin 才能生成独立 CSS 文件
Webpack 默认把 import './xxx.css' 的样式打进 JS bundle，运行时靠 style-loader 插入 标签——这根本不是“拆分”，只是内联。要输出 .css 文件，必须在生产环境替换掉 style-loader，改用 MiniCssExtractPlugin.loader。
常见错误是开发和生产共用同一套 module.rules，导致热更新失效或构建报错。正确做法是动态切换 loader：
- 开发环境用
['style-loader', 'css-loader'] - 生产环境用
[MiniCssExtractPlugin.loader, 'css-loader'] -
MiniCssExtractPlugin.loader必须放在use数组最右侧（执行顺序最先），尤其搭配postcss-loader或sass-loader时
MiniCssExtractPlugin 本身不压缩 CSS，需额外加 css-minimizer-webpack-plugin；它也不处理按需逻辑，只负责“提取”。
CSS 按路由拆分的关键是 import 位置 + 动态加载
CSS 是否随路由异步加载，完全取决于它被 import 进哪个 JS chunk。Webpack 不会自动绑定组件和它的样式——你得手动写对地方。
- ❌ 错误：在
main.js或根组件顶层import './global.css'→ 进main.css，首屏必载 - ❌ 错误：在工具函数里
import './button.css'→ 提前打进utils.jschunk，彻底失去按需意义 - ✅ 正确：在路由组件内部
import './Dashboard.module.css'，且该组件通过动态导入加载
Vue Router 示例：component: () => import('./Dashboard.vue')；React Router 示例：React.lazy(() => import('./Chart'))。只有这样，Webpack 才会把该组件的 CSS 和 JS 打进同一个异步 chunk，实现真正的一对一懒加载。
splitChunks 必须设 chunks: 'all' 才能让 CSS 参与公共抽取
splitChunks 默认只处理 JS，对 CSS “视而不见”。只有当 CSS 已被 MiniCssExtractPlugin 提取为资源模块后，它才能参与分割分析。
- 必须显式配置
chunks: 'all'（默认是'async'），否则同步引入的 CSS 不会被纳入分析范围 - 公共样式（如多个页面都 import 的
common.css）需在cacheGroups中单独配test: /\.css$/并设minChunks: 2 - 若某 CSS 只被一个异步组件 import，它不会被抽走，而是留在对应 chunk 的 CSS 文件里——这才是按需的本意
注意 Conflicting order 警告：多个 chunk 以不同顺序引入同一份 CSS，最终样式顺序不可控；不能简单加 ignoreOrder: true 掩盖问题。
Vite 的 cssCodeSplit: true 不等于按需加载
Vite 构建后输出多个 .css 文件，不代表它们是“按需”的。默认开启的 cssCodeSplit: true 只做物理拆分：把不同 chunk 的 CSS 写进不同文件（如 index-xxx.css、async-xxx.css），但这些文件仍会被同步 到 HTML 头部，首屏照样全量加载。
真正触发按需的唯一条件是：CSS 必须来自动态导入模块。
- Vue：路由组件内
import './DetailPage.css'，且组件用() => import('./DetailPage.vue')加载 - React：组件内
import './chart.css'，且组件用React.lazy(() => import('./Chart'))加载 - Vite 不需要额外插件，但必须禁用任何手动
document.createElement('link')挂载 CSS 的逻辑，否则绕过 HMR 和自动注入机制
复杂点在于：构建产物中哪些 CSS 被真正“按需”，取决于静态 import 的嵌套深度和 chunk graph 的实际结构，而不是配置开关本身。最容易被忽略的是，所有全局样式入口（哪怕只有一行 @import）都会污染 main chunk，让拆分失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
