6.3.2 默认的异步提取-Webpack实战：入门、进阶与调优(中)

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

### 6.3.2 默认的异步提取

在Webpack的世界中，代码分割（Code Splitting）是一种优化技术，它允许你将代码分割成多个bundle，并在需要时按需加载这些bundle。这对于提升大型应用的加载速度和性能至关重要。Webpack提供了多种实现代码分割的方式，其中，默认的异步提取（Default Async Chunking）是入门时最直观且常用的方法之一。本章节将深入探讨Webpack如何默认处理异步模块的加载，以及如何通过配置进一步优化这一过程。

#### 6.3.2.1 理解异步提取的基本原理

在Webpack中，异步提取通常依赖于动态导入（Dynamic Imports）来实现。动态导入允许你将某些模块的加载推迟到实际需要时，而不是在页面加载时立即加载。这通过JavaScript的`import()`函数实现，该函数返回一个Promise，该Promise在模块加载完成后解析为该模块。

Webpack在解析到`import()`语句时，会自动识别出这是一个异步加载点，并据此生成一个或多个新的chunk（即分割后的代码块），这些chunk将包含`import()`语句所请求的模块及其依赖。当这些模块被实际需要时，Webpack将负责从服务器加载对应的chunk。

#### 6.3.2.2 配置Webpack以支持默认的异步提取

在Webpack 4及以上版本中，默认已经内置了对代码分割的支持，无需额外插件（如之前的`CommonsChunkPlugin`或`SplitChunksPlugin`的前身）。然而，你仍然可以通过`webpack.config.js`中的配置来微调分割策略，以确保资源得到最有效的利用。

**基本配置示例**：

默认情况下，Webpack会根据模块间的依赖关系自动进行分割。但你可以通过`optimization.splitChunks`配置来进一步控制分割行为。以下是一个基本的配置示例，展示了如何启用和配置默认的异步提取：

```javascript
module.exports = {
  // 其他配置...
  optimization: {
    splitChunks: {
      chunks: 'all', // 可以是 'async', 'initial' 或 'all'
      minSize: 20000, // 最小分割体积（以字节为单位）
      maxSize: 0, // 最大分割体积，默认为0，表示无限制
      minChunks: 1, // 被至少n个chunk共享时才分割
      maxInitialRequests: 3, // 入口点处的并行请求数
      automaticNameDelimiter: '~', // 生成名称时使用的分隔符
      enforceSizeThreshold: 50000, // 强制分割前达到的体积阈值
      cacheGroups: {
        default: false, // 禁用默认的缓存组
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        // 你可以添加更多的cacheGroups来自定义分割逻辑
      },
    },
  },
};
```

**注意**： 在上面的配置中，`chunks: 'all'`表示无论是初始加载还是异步加载的chunk，Webpack都会尝试进行分割。然而，对于默认的异步提取，我们主要关心的是异步加载的场景，因此在实际应用中，可能更倾向于将`chunks`设置为`'async'`以专注于优化异步加载的性能。

#### 6.3.2.3 深入理解Cache Groups

`splitChunks.cacheGroups`是`splitChunks`配置中最为强大和灵活的部分，它允许你定义一组规则，以精细控制哪些模块应该被打包到同一个chunk中。

- **默认缓存组**：在上面的配置中，我们禁用了默认的缓存组（`default: false`）。这是因为Webpack默认会尝试将所有非node_modules中的模块打包到一个共享的chunk中，这在某些情况下可能不是你想要的行为。

- **自定义缓存组**：通过添加自定义的`cacheGroups`，你可以根据模块路径、名称或其他属性来定义分割策略。例如，上面的`vendors`缓存组将所有来自`node_modules`的模块打包到一个单独的chunk中，这对于缓存第三方库非常有用。

#### 6.3.2.4 优化异步提取的性能

虽然Webpack的默认异步提取已经相当高效，但仍有一些策略可以帮助你进一步优化性能：

1. **合理设置分割大小**：通过调整`minSize`、`maxSize`和`enforceSizeThreshold`等参数，确保生成的chunk既不过大也不过小，从而避免不必要的网络请求和加载时间。

2. **利用HTTP/2的服务器推送**：如果你的服务器支持HTTP/2，可以利用其服务器推送特性来预加载重要的异步chunk，进一步减少页面加载时间。

3. **使用CDN加速**：将生成的chunk部署到CDN上，可以缩短用户到资源的物理距离，从而加快加载速度。

4. **懒加载非关键资源**：确保只有用户真正需要的资源才会被加载，避免加载不必要的代码。

5. **监控和分析**：使用Webpack Bundle Analyzer等工具来分析生成的bundle，找出可以进一步优化的地方。

#### 6.3.2.5 结论

默认的异步提取是Webpack中代码分割的基础，它允许你以声明式的方式实现按需加载，从而显著提升大型应用的性能和用户体验。通过合理配置`optimization.splitChunks`，你可以进一步优化分割策略，确保资源得到最有效的利用。此外，结合其他性能优化策略，如HTTP/2的服务器推送、CDN加速等，可以进一步提升应用的加载速度和响应能力。在开发过程中，不断监控和分析应用的性能表现，是持续优化和提升用户体验的关键。

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

Webpack零基础入门

全解webpack前端开发环境定制

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

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

webpack指南