Webpack 中如何配置代码分割 (Code Splitting)？

推荐答案

在 Webpack 中，可以通过以下几种方式配置代码分割（Code Splitting）：

1. 使用 import() 动态导入语法：

   import(/* webpackChunkName: "my-chunk-name" */ './module').then(module => {
     // 使用模块
   });

2. 使用 SplitChunksPlugin 配置： 在 webpack.config.js 中配置 optimization.splitChunks：

   // www.javascriptcn.com code example
   module.exports = {
     optimization: {
       splitChunks: {
         chunks: 'all',
         minSize: 20000,
         minRemainingSize: 0,
         minChunks: 1,
         maxAsyncRequests: 30,
         maxInitialRequests: 30,
         enforceSizeThreshold: 50000,
         cacheGroups: {
           defaultVendors: {
             test: /[\\/]node_modules[\\/]/,
             priority: -10,
             reuseExistingChunk: true,
           },
           default: {
             minChunks: 2,
             priority: -20,
             reuseExistingChunk: true,
           },
         },
       },
     },
   };

3. 使用 entry 配置手动分割：

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

本题详细解读

1. 动态导入 (import())

动态导入是 Webpack 实现代码分割的推荐方式。通过 import() 语法，Webpack 会自动将导入的模块分割成单独的 chunk，并在需要时按需加载。webpackChunkName 注释可以为生成的 chunk 指定名称。

2. SplitChunksPlugin 配置

SplitChunksPlugin 是 Webpack 内置的插件，用于自动将公共模块提取到单独的 chunk 中。通过配置 optimization.splitChunks，可以控制 chunk 的生成规则，例如：

• chunks: 'all'：对所有类型的 chunk 进行分割。
• minSize：生成 chunk 的最小大小。
• cacheGroups：定义缓存组，用于将特定模块分组到同一个 chunk 中。

3. 手动分割 (entry)

通过手动配置 entry，可以将代码分割成多个入口文件。这种方式适用于需要明确分割代码的场景，例如将第三方库和业务代码分开打包。

通过以上方式，Webpack 可以有效地实现代码分割，优化应用的加载性能。