Webpack4.0 各个击破（4）—— Javascript & splitChunk：无缝对接现代化 Javascript 开发模式

2023-12-04 10:08:44

Webpack 构建工具对模块化 Javascript 开发的痛点解决

现代 Javascript 开发中，模块化开发已成为常态，这种开发模式带来诸多益处，但同时也带来了构建过程中 HTTP 请求数量激增的问题。传统上，为解决此问题，开发人员需要对 Javascript 文件进行手动拆分和合并，费时且容易出错。

Webpack 应运而生，作为一款功能强大的构建工具，Webpack 提供了多种配置选项，能够帮助开发人员自动拆分和合并 Javascript 文件，有效减少 HTTP 请求数量，提升页面加载速度和性能。Webpack4.0 中新增的 splitChunk 插件进一步增强了 Webpack 的模块化开发支持能力，使开发者能够更加轻松地拆分和合并 Javascript 文件，从而实现更好的性能优化。

Webpack4.0 的 splitChunk 插件：优化构建配置、提升性能

Webpack4.0 中的 splitChunk 插件提供了对模块化 Javascript 开发的更精细控制，让开发者能够根据实际需求配置拆分和合并策略。splitChunk 插件的主要功能包括：

自动拆分代码：splitChunk 插件能够自动识别和拆分代码，将公共代码提取到单独的块中，从而减少重复加载。
按需加载代码：splitChunk 插件支持按需加载代码，仅在需要时才加载相应的代码块，减少初始加载时间。
优化缓存策略：splitChunk 插件能够优化缓存策略，提高重复加载代码的缓存效率，进一步提升性能。

splitChunk 插件的配置与使用

splitChunk 插件的配置相对简单，主要通过在 Webpack 配置文件中添加以下配置项实现：

optimization: {
  splitChunks: {
    chunks: "async",
    minSize: 30000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: "-",
    name: true,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        chunks: "initial"
      },
      common: {
        minChunks: 2,
        priority: -20,
        chunks: "initial",
        reuseExistingChunk: true
      }
    }
  }
}