CSS代码分割怎么实现？构建工具自动提取公共包

本文深入解析了现代前端构建中CSS代码分割的核心实现方案：在Webpack中需用MiniCssExtractPlugin替代style-loader以生成独立CSS文件，并通过splitChunks的cacheGroups精准提取公共样式；而Vite则开箱即用地自动完成CSS分割与去重，无需手动配置，但牺牲了对固定公共CSS文件名的精细控制；同时提醒开发者注意插件兼容性陷阱，如MiniCssExtractPlugin与css-minimizer-webpack-plugin等工具的版本协同问题，帮助你在不同构建生态中高效、稳定地实现CSS资源优化。

Webpack 中如何让 CSS 自动提取为独立文件

默认情况下，Webpack 的 style-loader 会把 CSS 内联进 JS bundle，无法实现真正的 CSS 代码分割。必须用 MiniCssExtractPlugin 替换 style-loader，才能输出单独的 .css 文件。

关键点在于：构建时分离、运行时不内联、支持按需加载（配合 import()）。

• Webpack 5+ 需在 module.rules 中将 style-loader 换成 MiniCssExtractPlugin.loader
• 必须在 plugins 中添加 new MiniCssExtractPlugin()，否则不生效
• 开发环境慎用 —— MiniCssExtractPlugin.loader 不支持 HMR，建议开发时保留 style-loader，生产环境才切换
• 若使用 css-loader，记得开启 importLoaders: 1（尤其搭配 postcss-loader 时）

怎样让多个入口/异步模块共享同一份公共 CSS

Webpack 默认不会把分散在不同 import 中的相同 CSS 规则自动合并。要提取公共样式，得靠 splitChunks 配置 + 正确的 chunk 分组逻辑。

• 启用 splitChunks.chunks: 'all'，否则只处理异步 chunk
• 针对 CSS 单独配置 cacheGroups，匹配 /\.css$/i，并设 name: 'common-css' 或使用 enforce: true 强制提取
• 若项目有多个入口（如 app 和 admin），且都引入了 normalize.css 或自定义 base.css，它们会被归入同一 chunk，前提是这些文件被实际 import 进 JS 模块中
• 注意：CSS in JS（如 styled-components）或