如何避免共享组件CSS被拆分到懒加载chunk并移至主chunk？

方法一：主入口主动引入共享样式 #

直接在项目主入口文件（如src/index.js或src/App.js）中导入共享组件的样式文件，webpack会自动将该样式打包到主CSS chunk中，懒加载组件对应的chunk会跳过重复的样式打包：

// 主入口文件
import '@client/modules/pages/LazyShared/LazyShared.module.scss';

这种方式无需修改webpack配置，操作简单，适合场景明确的单一共享样式文件。

方法二：配置webpack splitChunks强制提取共享样式到主chunk #

通过webpack的splitChunks规则，将指定的共享样式强制分配到主chunk。修改webpack.config.js的optimization配置：

module.exports = {
  // ...其他webpack配置
  optimization: {
    splitChunks: {
      cacheGroups: {
        mainSharedStyles: {
          test: /LazyShared\.module\.scss$/, // 精准匹配共享样式文件
          chunks: 'all', // 覆盖所有chunk类型（包括懒加载）
          enforce: true, // 强制启用该规则，忽略默认拆分阈值
          priority: 10, // 优先级高于默认缓存组
          name: 'main' // 指定打包到主chunk的CSS文件
        }
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css', // 主chunk的CSS文件名
      chunkFilename: '[name].chunk.css' // 懒加载chunk的CSS文件名
    })
  ]
};

该配置会将匹配到的共享样式强制合并到主CSS chunk，彻底避免在多个懒加载chunk中重复打包。

原理说明 #

mini-css-extract-plugin默认会跟随webpack的chunk拆分逻辑：当样式仅被懒加载chunk引用时，会被打包到对应懒加载CSS chunk。通过上述两种方式，我们将共享样式的依赖归属到主chunk，webpack会自动将其合并到主CSS chunk，并跳过后续懒加载chunk中的重复样式打包。

内容的提问来源于stack exchange，提问作者user469485