Webpack 5 Vue单页应用如何拆分CSS打包为多个文件？

针对单页应用、单入口场景，要拆分CSS包，核心是通过Webpack的splitChunks配置配合mini-css-extract-plugin实现，以下是具体步骤：

1. 配置Webpack代码分割规则 #

在webpack.config.js的optimization节点中，添加针对CSS的拆分规则，让Webpack识别并拆分样式代码：

optimization: {
  splitChunks: {
    chunks: 'all', // 拆分所有类型的chunk（同步+异步）
    cacheGroups: {
      // 拆分业务组件样式
      componentStyles: {
        name: 'component-styles',
        test: /\.vue$/, // 匹配Vue单文件组件
        chunks: 'all',
        enforce: true, // 强制触发拆分
        priority: 20 // 优先级高于其他缓存组
      },
      // 拆分第三方依赖样式
      vendorStyles: {
        name: 'vendor-styles',
        test: /node_modules\/.*\.(s?css)$/, // 匹配node_modules中的样式文件
        chunks: 'all',
        enforce: true,
        priority: 10
      }
    }
  }
}

如果需要更精细化的命名，可以将name设为函数，比如根据组件名生成chunk名称：

componentStyles: {
  name: (module) => {
    // 从模块路径中提取组件名称
    const componentName = module.identifier().split('/').pop().split('.')[0];
    return `css/${componentName}`;
  },
  // 其他配置同上
}

2. 调整mini-css-extract-plugin配置 #

设置chunkFilename来处理拆分出来的非入口chunk的CSS文件，同时保留filename处理初始入口的CSS：

new MiniCssExtractPlugin({
  filename: 'css/main.[contenthash].css', // 入口chunk的CSS文件名
  chunkFilename: 'css/[name].[contenthash].chunk.css' // 拆分出的chunk的CSS文件名
})

之前你用filename函数无效，是因为filename仅负责处理入口chunk（也就是你的main chunk），而拆分出来的是额外的异步/同步chunk，需要通过chunkFilename来配置。

3. 确保Vue Loader与样式加载器配置正确 #

保证vue-loader和样式加载器（css-loader、sass-loader）与mini-css-extract-plugin正确配合：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        // 确保Vue SFC中的样式被提取到CSS文件
        styleLoaders: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    },
    {
      test: /\.(s?css)$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader'
      ]
    }
  ]
}

4. 触发样式拆分的关键：组件懒加载 #

如果你的项目还没使用路由懒加载，建议对大型组件/路由组件采用动态import的方式，这样对应的样式会自动被拆分为独立的CSS chunk：

// Vue路由配置示例
const router = createRouter({
  routes: [
    {
      path: '/heavy-page',
      // 动态导入组件，触发代码与样式拆分
      component: () => import('../views/HeavyPage.vue')
    }
  ]
})

即使不使用路由，也可以直接在组件中动态导入大型组件：

const HeavyComponent = () => import('../components/HeavyComponent.vue')

这样Webpack会将该组件的代码和样式单独打包为一个chunk，实现并行下载。

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