Webpack 5（五）代码分离

如果不分离，生成一个 chunk，包含依赖图中的所有模块以及 runtime 和 manifest 代码

module.exports = {
  entry: {
    main: './src/index.js'
  }
}

分离 runtime 和 manifest 代码

runtime 和 manifest 都是 webpack 生成的内容，每次打包 runtime 和 manifest 都不同，为了缓存，应该将 runtime 和 manifest 分离出来。

• manifest 是数据，保留原始的各个模块的信息
• runtime 是 webpack 生成的代码，根据 manifest，将源代码中 import 和 require 都转换为 __webpack_require__(module identifier)

单页面单入口， optimization.runtimeChunk 设置为 single

module.exports = {
  entry: {
    main: './src/index.js'
  },
  optimization: {
    runtimeChunk: 'single'
  }
}

单页面多入口， optimization.runtimeChunk 设置为 single

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: 'lodash'
  },
  optimization: {
    runtimeChunk: 'single'
  }
}

多页面多入口， optimization.runtimeChunk 设置为 multiple

module.exports = {
  entry: {
    main: './src/index.js',
    about: './src/about.js'
  },
  optimization: {
    runtimeChunk: 'multiple'
  }
}

单页面多入口分离第三方代码

通过多入口分离代码，通过 dependOn 去重

module.exports = {
  entry: {
    main: {
      import: './src/index.js',
      dependOn: 'vendor'
    },
    vendor: 'lodash'
  },
  optimization: {
    runtimeChunk: 'single'
  }
}

以上配置有两个入口文件，生成两个 initial chunk：

• chunk 1：根据入口文件 ./src/index.js 的依赖图打包生成 main.bundle.js
• chunk 2：根据入口文件 vendor 的依赖图打包生成 lodash.bundle.js

如果入口文件 ./src/index.js 的依赖图中也引入了 lodash 模块，则 chunk 1 和 chunk 2 将会同时包括 lodash 模块。在本例中 chunk 1 的代码中完全包括了 chunk 2 的代码，dependOn 选项可以从 chunk 1 的代码中去掉 chunk 2 的那部分。

SplitChunksPlugin 分离第三方代码

参考文章

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'vendors', // split chunk 的 chunk name
          chunks: 'async', // 将所有 async chunk 中满足 test 条件的的模块分离出来，形成单独的 split chunk
          test: /[\\/]node_modules[\\/]/, // 选择那些绝对路径匹配该正则表达式的模块
          priority: 10, // 自定义缓存组默认值为 0，值越大优先级越高
        },
        commons: {
          name: 'commons', // split chunk 的 chunk name
          chunks: 'initial', // 将所有 initial chunk 中满足条件的模块进行分离，形成单独的 split chunk
          minChunks: 2, // 将两个或两个以上的 initial chunk 中相同的模块分离出来
        },
      },
    },
  },
};