如何拆分过大的Webpack Vendor Bundle为React相关与其他依赖包？

嘿，我帮你搞定这个Vendor Bundle拆分的问题！你现在的需求是把原来的大Vendor拆成React相关核心依赖和其余第三方包两部分，其实通过两次配置CommonsChunkPlugin就能实现，我给你一步步拆解：

核心思路 #

先精准提取React家族的所有包到单独的react-vendor bundle，再提取剩下的node_modules里的依赖到vendor bundle，注意配置顺序很重要——必须先处理特定包，再处理通用包。

完整配置示例 #

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js' // 你的业务代码入口
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist') // 输出目录
  },
  plugins: [
    // 第一步：提取React相关核心依赖到react-vendor
    new webpack.optimize.CommonsChunkPlugin({
      name: 'react-vendor',
      filename: 'react-vendor.bundle.js',
      minChunks: module => {
        // 匹配所有React家族的包，你可以根据实际项目补充更多（比如react-redux、react-router-dom等）
        return /react|react-dom|react-router-dom|react-redux/.test(module.context);
      }
    }),
    // 第二步：提取剩下的node_modules依赖到vendor
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js',
      minChunks: module => {
        // 只匹配node_modules中不属于React家族的包
        return module.context.includes('node_modules') && 
               !/react|react-dom|react-router-dom|react-redux/.test(module.context);
      }
    }),
    // 可选但推荐：提取webpack运行时代码，避免缓存失效
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
      filename: 'runtime.bundle.js',
      minChunks: Infinity // 强制单独提取运行时
    })
  ]
};

关键配置解释 #

• 第一个CommonsChunkPlugin：通过正则匹配module.context（模块的所在路径），把所有React相关的包单独打包。这类包更新频率极低，单独拆分后可以让用户长期缓存，减少重复下载。
• 第二个CommonsChunkPlugin：过滤掉已经被React包占用的模块，把剩下的第三方依赖（比如lodash、axios、moment等）打包到vendor。
• runtime插件：webpack的运行时代码如果和vendor混在一起，当业务代码更新时，vendor的hash值会被连带修改，导致缓存失效。单独提取runtime可以避免这个问题，大幅提升缓存命中率。

注意事项 #

1. HTML引入顺序：在你的HTML模板里，必须按以下顺序引入bundle：

   <script src="./dist/runtime.bundle.js"></script>
   <script src="./dist/react-vendor.bundle.js"></script>
   <script src="./dist/vendor.bundle.js"></script>
   <script src="./dist/app.bundle.js"></script>
   

2. 按需调整正则：如果你的项目用到了其他React生态包（比如react-query、styled-components），记得把它们加入到第一个插件的正则匹配里。
3. webpack版本兼容：这个方案适用于webpack 4及以下版本，如果是webpack 5，CommonsChunkPlugin已经被SplitChunksPlugin取代，配置逻辑会略有不同，但核心思路是一致的——先拆分特定库，再拆分通用库。

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