Webpack 4 使用指南（下）——最简指南

Webpack 4 中的分包

Webpack 4 中废除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks 选项。optimization.splitChunks 选项可以让你更轻松地对代码进行分包，而无需使用复杂的配置。

如何使用 optimization.splitChunks 选项

optimization.splitChunks 选项的配置非常简单，你只需要设置以下几个属性即可：

• chunks：指定要分包的代码块类型，可以是 all、async、initial。
• minSize：指定要分包的代码块的最小大小，单位是字节。
• maxSize：指定要分包的代码块的最大大小，单位是字节。
• minChunks：指定要分包的代码块的最小引用次数。
• maxAsyncRequests：指定异步代码块的最大请求数。
• maxInitialRequests：指定初始代码块的最大请求数。

如何设置 optimization.splitChunks 选项

如果你想对所有代码块进行分包，你可以使用以下配置：

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    maxSize: 50000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3
  }
}

如果你想只对异步代码块进行分包，你可以使用以下配置：

optimization: {
  splitChunks: {
    chunks: 'async',
    minSize: 30000,
    maxSize: 50000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3
  }
}

如果你想只对初始代码块进行分包，你可以使用以下配置：

optimization: {
  splitChunks: {
    chunks: 'initial',
    minSize: 30000,
    maxSize: 50000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3
  }
}

代码抽离

代码抽离是指将公共代码从多个模块中提取出来，并将其放入一个单独的文件中。这样做可以减少代码重复，并提高代码的可维护性。

Webpack 4 中可以使用 optimization.splitChunks 选项来实现代码抽离。你只需要将要抽取的公共代码放入一个单独的文件中，然后在 optimization.splitChunks 选项中指定该文件的路径即可。

例如，如果你想将 common.js 文件中的公共代码抽离出来，你可以使用以下配置：

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    maxSize: 50000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    cacheGroups: {
      common: {
        name: 'common',
        chunks: 'initial',
        minChunks: 2,
        enforce: true
      }
    }
  }
}

懒加载

懒加载是指在需要的时候再加载代码。这样做可以减少页面加载时间，并提高页面的性能。

Webpack 4 中可以使用 import() 函数来实现懒加载。import() 函数可以动态地加载代码，而无需在 HTML 文件中添加额外的 <script> 标签。

例如，如果你想懒加载 lazy.js 文件，你可以使用以下代码：

import('./lazy.js').then(module => {
  // Do something with the module
});

结语

Webpack 4 中的分包、代码抽离和懒加载都非常简单易用。如果你想提高你的项目的性能，那么你应该使用这些特性。