6.4.2 异步chunk的配置-Webpack实战：入门、进阶与调优(中)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(中)

### 6.4.2 异步Chunk的配置

在Webpack的模块化构建体系中，异步chunk（代码分割）是一项至关重要的功能，它允许我们将应用拆分成多个包（bundle），并在需要时动态加载这些包。这种技术不仅能减少应用的初始加载时间，还能提升用户体验，尤其是在处理大型应用或库时。在Webpack中，通过合理配置，我们可以灵活地控制异步chunk的生成、命名、加载方式等。本章节将深入探讨Webpack中异步chunk的配置方法，包括入口起点（entry points）、动态导入（Dynamic Imports）、SplitChunks插件的使用，以及相关的优化策略。

#### 6.4.2.1 理解异步Chunk

在Webpack中，异步chunk通常是通过动态导入（如`import()`语法）或Webpack特定的require.ensure()方法创建的。这些chunk在初始加载时不会被包含在主bundle中，而是会在运行时根据需求被动态加载。这种机制使得Webpack能够构建出更加高效、灵活的应用架构。

#### 6.4.2.2 入口起点配置

虽然异步chunk通常不是通过入口起点直接配置的，但了解入口起点的配置对于理解Webpack如何组织代码结构至关重要。在Webpack配置中，`entry`属性定义了Webpack应该使用哪个模块作为构建其内部依赖图的开始。对于异步chunk，我们更多是在模块内部通过动态导入来指定。然而，Webpack也允许通过多入口（multi-entry）配置来手动分割代码，但这通常不是异步chunk的主要应用场景。

#### 6.4.2.3 动态导入

动态导入是Webpack中实现异步chunk的核心机制。它允许我们在需要时才加载某个模块，而不是在初始加载时就包含所有内容。在ES2020之前，Webpack通过`require.ensure()`方法提供了动态导入的功能，但自ES2020起，原生JavaScript通过`import()`语法支持了动态导入，Webpack则完美支持这一语法。

**示例代码**：

```javascript
button.onclick = e => import('./path/to/your/module').then(({ default: module }) => {
  // 使用module
});
```

在上面的例子中，当用户点击按钮时，Webpack会动态加载`'./path/to/your/module'`模块，并在加载完成后执行回调函数。这里的`import()`函数返回一个Promise对象，当模块加载成功时，Promise会被解析，模块的默认导出（如果有的话）会被作为Promise的解析值。

#### 6.4.2.4 SplitChunks插件

SplitChunks插件是Webpack内置的一个代码分割优化插件，它允许我们根据一定的规则自动将代码分割成多个chunk。通过合理配置SplitChunks插件，我们可以更精细地控制异步chunk的生成，比如指定哪些库应该被分离出来、chunk的最小体积、并行请求的最大数量等。

**SplitChunks配置示例**：

```javascript
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all', // 作用于异步和同步chunk
      minSize: 20000, // 形成一个新代码块之前所需要的最小体积
      maxSize: 0, // 形成的新代码块最大体积，默认为0，表示无限制
      minChunks: 1, // 被至少多少个chunk共享时才分割
      maxInitialRequests: 3, // 入口点处的并行请求的最大数目
      automaticNameDelimiter: '~', // 生成名称时使用的连接符
      enforceSizeThreshold: 50000, // 强制分割前模块必须达到的体积
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  // ...
};
```

在上面的配置中，`cacheGroups`属性允许我们定义多个缓存组，每个缓存组都可以有自己的分割策略。例如，`vendors`缓存组专门用于将node_modules中的模块分割出来，而`default`缓存组则用于处理其他类型的模块。

#### 6.4.2.5 异步Chunk的命名与缓存

默认情况下，Webpack会为每个异步chunk生成一个唯一的哈希值作为文件名，这有助于在内容更改时缓存旧的chunk。然而，在某些情况下，我们可能希望根据chunk的内容或来源来命名它们，以便更好地管理和调试。Webpack提供了`output.chunkFilename`选项来自定义异步chunk的文件名模板。

**自定义文件名模板**：

```javascript
module.exports = {
  // ...
  output: {
    // ...
    chunkFilename: '[name].[contenthash].js',
  },
  // ...
};
```

在这个例子中，`[name]`通常对应于动态导入时指定的模块名（如果Webpack能够推断出的话），而`[contenthash]`则是基于chunk内容的哈希值。这样的命名策略既保证了缓存的有效性，又提高了文件名的可读性。

#### 6.4.2.6 异步Chunk的加载策略

Webpack支持多种异步chunk的加载策略，包括JSONP（Webpack默认使用的策略）、ES Modules的动态导入等。这些策略在底层实现上有所不同，但对于大多数开发者来说，它们之间的主要区别在于兼容性和性能优化上。

- **JSONP**：Webpack早期版本广泛使用的策略，通过JSONP回调函数来实现模块的动态加载。它具有良好的兼容性，但在现代浏览器中可能不是最高效的选择。
- **ES Modules**：随着ES2020标准的普及，原生JavaScript支持了动态导入语法，Webpack也完美支持这一特性。使用ES Modules的动态导入可以带来更好的性能和更简洁的代码。

#### 6.4.2.7 异步Chunk的优化策略

- **合理分割代码**：避免将大量代码或库打包到单个chunk中，而是根据功能和依赖关系将它们分割成多个小chunk。
- **利用缓存**：通过合理的命名策略和哈希值来确保只有内容发生变化的chunk才会被重新下载。
- **预加载与懒加载**：根据应用的实际情况选择合适的加载策略。对于关键路径上的资源，可以考虑使用预加载（preload）来提前加载；而对于非关键路径上的资源，则可以使用懒加载（lazy loading）来减少初始加载时间。
- **监控与调优**：使用Webpack Bundle Analyzer等工具来监控和分析chunk的大小和构成，根据分析结果进行调优。

#### 结语

异步chunk的配置是Webpack中一项强大而灵活的功能，它允许我们根据应用的实际情况和需求来优化代码的组织和加载方式。通过合理配置入口起点、动态导入、SplitChunks插件以及优化策略，我们可以构建出更加高效、可维护的应用。希望本章节的内容能够帮助你更好地理解和应用Webpack中的异步chunk配置。

该分类下的相关小册推荐：

Webpack实战：入门、进阶与调优(下)

webpack指南

Webpack零基础入门

Webpack实战：入门、进阶与调优(上)

全解webpack前端开发环境定制