mini-css-extract-plugin是css拆分的必选项，因其在构建时将css提取为独立.css文件并用注入，取代style-loader的内联方式；它不负责按需引入，后者取决于import位置与chunk划分。
CSS 拆分（生成独立 .css 文件）和按需引入（随 JS chunk 动态加载对应样式）是两件不同但常被混为一谈的事——Webpack 默认把 CSS 内联进 JS，必须显式配置才能拆出文件；而“按需引入”本质是让某段 CSS 只随特定 JS chunk 加载，这依赖于拆分 + 正确的 import 位置。
为什么 mini-css-extract-plugin 是 CSS 拆分的必选项
Webpack 的 style-loader 会在运行时把 CSS 插入 <style></style> 标签，无法生成独立文件；mini-css-extract-plugin 替换掉它，在构建时把 CSS 提取为单独的 .css 文件，并用 <link> 标签注入。它不处理“按需”，只负责“拆分”。
- 必须在
module.rules中移除style-loader，改用MiniCssExtractPlugin.loader - 仅对生产环境启用：开发时用
style-loader保热更新，生产才用提取插件 - 它本身不压缩 CSS，需额外配
css-minimizer-webpack-plugin - 若你用
less/sass，确保对应 loader 在MiniCssExtractPlugin.loader之后（从右往左执行）
splitChunks 能否自动拆分 CSS？
可以，但前提是 CSS 已通过 mini-css-extract-plugin 被识别为模块资源。Webpack 的 splitChunks 默认只处理 JS，但当 CSS 被提取为独立模块后，它就能参与公共代码抽取。
- 启用
splitChunks.chunks: 'all'才会把 CSS 也纳入分割范围（默认'async'只处理异步 JS） - CSS 文件会被归入
cacheGroups，例如匹配/\.css$/的规则可单独命名、设最小体积 - 注意：若某 CSS 被多个入口同时
import，且满足minChunks条件，它会被抽成公共common.css；否则仍保留在各自 chunk 中 - 动态
import()加载的组件里若import './xxx.css'，该 CSS 会随 JS chunk 一起被提取，实现真正按需
按需引入 CSS 的关键：import 位置决定加载时机
CSS 的“按需”不是靠插件开关，而是由你在 JS 中 import 它的位置决定的——它属于哪个 chunk，就随哪个 chunk 加载。
- 写在入口文件顶部的
import './base.css'→ 进main.jschunk → 首屏即加载 - 写在某个路由组件内部的
import './dashboard.css'→ 进该组件的异步 chunk → 访问路由时才加载 - 用
React.lazy(() => import('./Chart'))时，若Chart.tsx里import './chart.css'，则 CSS 和 JS 一起懒加载 - 错误做法：在公共 utils 文件里
import一个业务组件的 CSS —— 它会提前打进 utils chunk，失去按需意义
Tree Shaking 对 CSS 无效，PurgeCSS 是另一回事
Webpack 的 Tree Shaking 只作用于 ES module 导出/导入，CSS 文件没有 export，所以整份 CSS 不管是否用到都会被打包。所谓“剔除未使用样式”，是 PurgeCSS 或 Unocss 等工具在构建后扫描 HTML/JS 中实际出现的类名，再反向过滤 CSS 字符串。
-
purgecss-webpack-plugin必须配置content字段，明确告诉它扫哪些文件（如src/**/*.tsx） - 动态类名（如
className={`btn-${type}`}）必须加safelist，否则 100% 被删 - PostCSS + PurgeCSS 插件比 Webpack 插件更轻量，且不侵入 Webpack 配置
- Unocss 不生成完整 CSS 文件，而是按需生成，天然规避动态类识别问题，但需接受其原子化 CSS 范式
真正容易被忽略的点在于：CSS 拆分和按需引入依赖的是同一套机制（mini-css-extract-plugin + 正确的 import 位置），而不是两个独立开关；很多人配好了插件却没调整 import 位置，结果所有 CSS 还是打进了 main chunk。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
