minicssextractplugin 仅负责提取css，不控制分割时机；静态import默认全打入主包，必须用动态import()且确保css未被静态引用，才能实现真正按需分包。
MiniCssExtractPlugin 为什么不能让 import './Button.css' 自动按需分包
它只负责「提取」，不负责「分割时机」。默认情况下，Webpack 会把所有静态 import './xxx.css' 视为入口依赖，统一打进 main.css 或 vendor.css —— 即使 Button 组件本身是懒加载的，它的 CSS 也不会跟着走。
真正触发独立分包的，必须是动态 import() 调用，且该 CSS 文件不能被任何静态 import 引用过。否则 MiniCssExtractPlugin 会把它归入共享 chunk，失去“按需”意义。
- 常见错误：在
Button.vue里写import './Button.css'，再用defineAsyncComponent(() => import('./Button.vue'))—— 这样 CSS 仍进主包 - 正确做法：把样式导入移到异步调用链中，和组件一起
await import() - 构建时若发现同一 CSS 被多个
import()引用，它会被合并到一个公共 chunk，不再“独占”
配置 MiniCssExtractPlugin 实现单组件单 CSS 文件的关键条件
不是加了插件就自动生效，得满足三个硬性约束：
-
mini-css-extract-plugin必须启用chunkFilename，例如chunkFilename: 'css/[name].[contenthash:8].css'；否则动态引入的 CSS 仍会 fallback 到filename（即主 CSS） - CSS 文件只能被一个
import()动态引用 —— 不能同时出现在main.ts静态 import 和某组件的await import('./Modal.css')中 - 必须用
import()（返回 Promise），不能用require('./xxx.css')；后者不参与 Webpack 的 chunk graph 分析
示例代码片段（Webpack 5+）：
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css' // ← 关键！
})
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
}
]
}
};
动态 import CSS 后样式不生效或重复插入的典型原因
不是插件没起作用，而是运行时控制没跟上：
- 多次调用
await import('./Dialog.css')会导致相同样式重复注入 —— 插件不提供去重逻辑，需手动缓存 Promise 或加 data 属性标记（如document.head.querySelector('link[href$="dialog"]')） - 在 Vue
mounted或 ReactuseEffect中直接import('./xxx.css')，热更新（HMR）会失效，且 SSR 场景下服务端无法收集该样式 - 样式注入后 DOM 渲染滞后，比如组件已 mount 完成但 CSS 还在加载，可能出现闪动；建议配合
loading状态或suspense控制展示时机
Vite 用户别盲目套用 MiniCssExtractPlugin 方案
Vite 默认不用它 —— 它靠 build.cssCodeSplit: true（默认开启）和原生 import.meta.glob 实现更轻量的 CSS 分割。强行接入 MiniCssExtractPlugin 反而破坏 HMR 和预构建逻辑。
如果你在 Vite 项目里看到类似 Webpack 的配置尝试，大概率是混淆了构建目标：
- Vite 中应优先用
import('./Button.module.css')+.module.css后缀（支持 HMR、类名哈希、自动局部作用域） - 若要兼容旧 CSS，可用
import('./Button.css?inline')手动控制注入，但失去文件级缓存能力 - 第三方库（如 Ant Design）的
import 'xxx/style/css'在 Vite 下需配合unplugin-vue-components的deep: true才能识别并分包
真正容易被忽略的是：CSS 分包只是手段，是否“按需”最终取决于你调用 import() 的位置和时机 —— 构建工具不会替你判断用户要不要点开弹窗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
