webpack 4 中新增的 splitChunksPlugin 插件

随着前端开发的发展，项目规模越来越大，代码的复杂度也越来越高。这时候，代码的优化就变得尤为重要。在 webpack 4 中，新增了 splitChunksPlugin 插件，可以帮助我们更好地管理代码，提升应用程序的性能。

什么是 splitChunksPlugin 插件

splitChunksPlugin 是 webpack 4 中新增的一个插件，它可以将公共的代码抽离出来，形成一个独立的代码块。这样就可以减小每个页面需要加载的代码量，提高页面的加载速度。

如何使用 splitChunksPlugin 插件

在 webpack.config.js 中，我们可以通过配置 optimization.splitChunks 对 splitChunksPlugin 插件进行配置。

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

以上代码表示将所有类型的代码块都进行优化处理，抽离出公共代码。

除此之外，我们还可以配置一些其他的参数，来满足不同的需求。以下是一些常用的配置参数：

• chunks：指定需要进行优化的代码块类型，可以是 all、async 或 initial。
• minSize：指定抽离出来的代码块的最小大小。
• maxSize：指定抽离出来的代码块的最大大小。
• minChunks：指定一个模块被多少个模块依赖时，才会被抽离出来。
• maxAsyncRequests：指定同时加载的最大异步请求数量。
• maxInitialRequests：指定入口文件最大并行请求数量。
• automaticNameDelimiter：指定生成的名称分隔符。
• name：指定生成的代码块名称。
• cacheGroups：指定代码块分组的规则。

示例代码

下面是一个简单的示例代码，来演示 splitChunksPlugin 插件的使用。

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2
        },
        vendor: {
          test: /node_modules/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }
};

在以上示例代码中，我们有两个入口文件：app.js 和 vendor.js。其中，vendor.js 包含了一些第三方库的代码，我们希望将它们单独抽离出来，形成一个独立的代码块。同时，我们还希望将一些公共的代码提取出来，形成一个名为 commons 的代码块。

通过以上配置，我们可以将 app.js 和 vendor.js 中的公共代码提取出来，形成一个名为 commons 的代码块，同时将 vendor.js 中的第三方库代码单独抽离出来，形成一个名为 vendor 的代码块。

总结

通过 splitChunksPlugin 插件的使用，我们可以将公共的代码抽离出来，形成一个独立的代码块，从而提升应用程序的性能。在实际开发中，我们可以根据具体的需求，进行不同的配置，来满足不同的优化需求。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bded32add4f0e0ff7884c0