6.4.1 import()-Webpack实战：入门、进阶与调优(中)

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

### 6.4.1 `import()`：动态导入与代码分割

在Web开发领域，随着项目规模的扩大和功能的复杂化，如何高效地加载和管理资源成为了一个日益重要的问题。Webpack作为现代JavaScript应用程序的静态模块打包器，提供了丰富的功能和插件生态系统来优化应用的构建过程。其中，`import()`语法作为ES2020（之前称为ES2020的提案，现已正式成为标准）引入的动态导入功能，与Webpack的代码分割（Code Splitting）特性结合，为开发者提供了强大的按需加载能力。本章节将深入探讨`import()`语法的使用、原理、优势以及在Webpack中的配置方法。

#### 6.4.1.1 `import()`语法基础

`import()`是一个类似于`require()`的函数调用，但它返回的是一个Promise对象，这个Promise解析为被导入模块的导出对象。这使得我们可以在需要时才加载模块，而不是在页面加载时就加载所有JavaScript代码，从而减少了初始加载时间，提升了用户体验。

```javascript
button.onclick = e => {
  import('./path/to/module').then(module => {
    // 使用module.default或者module.namedExport来访问模块导出的内容
    const exportedFunction = module.default;
    exportedFunction();
  }).catch(err => {
    // 处理加载失败的情况
    console.error('Module failed to load: ', err);
  });
};
```

在上述示例中，当用户点击按钮时，才会触发对指定模块的加载。这种方式特别适用于路由懒加载、大型库按需加载等场景。

#### 6.4.1.2 Webpack中的代码分割

Webpack内置了对`import()`语法的支持，能够自动将使用`import()`语法的模块分割成不同的bundle，并在运行时根据需要进行加载。这种能力不仅限于JavaScript文件，还包括CSS和其他资源。

Webpack通过`SplitChunksPlugin`（在Webpack 4+中自动启用，无需手动配置）来优化代码分割。该插件会分析模块之间的依赖关系，并基于一些启发式算法（如模块被共享的次数、大小等）来决定如何分割代码。

#### 6.4.1.3 配置Webpack以优化`import()`

虽然Webpack对`import()`提供了良好的内置支持，但开发者仍然可以通过配置来进一步优化代码分割的行为。

##### 1. 入口点配置

Webpack的入口点配置（`entry`）通常指向应用的入口文件，但你也可以利用`import()`来动态生成入口点。然而，在大多数情况下，你不需要直接配置入口点来使用`import()`，因为Webpack会自动处理通过`import()`引入的模块。

##### 2. 输出配置（`output`）

在`output`配置中，确保设置了合理的`filename`和`chunkFilename`以区分主bundle和分割后的chunk。

```javascript
module.exports = {
  // ...
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js',
    // 其他输出配置...
  },
  // ...
};
```

##### 3. 优化`SplitChunksPlugin`

虽然`SplitChunksPlugin`默认配置已经足够应对大多数情况，但你可以通过修改`optimization.splitChunks`来自定义分割逻辑。

```javascript
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all', // 表示选择哪些chunks进行优化，可选值有'async'（默认）、'initial'、'all'
      minSize: 20000, // 形成新代码块之前所需的最小体积（以字节为单位）
      maxSize: 0, // 生成代码块时允许的最大体积（以字节为单位），默认为无限大
      minChunks: 1, // 被至少多少个chunk共享时才分割
      maxAsyncRequests: 30, // 按需加载时的并行请求的最大数目
      maxInitialRequests: 30, // 一个入口点需要的最大并行请求数
      automaticNameDelimiter: '~', // 生成名称时使用的连接符
      enforceSizeThreshold: 50000, // 强制分割前模块必须达到的体积（以字节为单位）
      cacheGroups: { // 缓存组，可以进一步自定义分割策略
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  // ...
};
```

在上述配置中，我们定义了两组缓存组：`vendors`用于将node_modules中的模块打包到一个单独的bundle中，而`default`则用于其他类型的模块。通过调整`minChunks`、`priority`等参数，可以进一步细化分割逻辑。

#### 6.4.1.4 注意事项

- **性能考量**：虽然动态导入和代码分割能够提升应用的加载性能，但过多的分割也可能导致额外的HTTP请求，从而增加加载时间。因此，需要根据实际情况权衡分割的粒度。
- **浏览器兼容性**：`import()`语法是ES2020的一部分，因此在一些旧版浏览器中可能不受支持。可以通过Babel等转译工具将其转换为兼容的语法。
- **服务器配置**：对于使用HTTP/2的服务器，由于支持多路复用，因此多个小的请求可能比单个大的请求更高效。然而，对于HTTP/1.1服务器，过多的并行请求可能会受到连接数的限制，导致性能下降。

#### 6.4.1.5 结论

`import()`语法与Webpack的代码分割特性相结合，为开发者提供了一种强大而灵活的方式来优化应用的加载时间和性能。通过合理的配置和策略，可以确保用户能够快速、流畅地访问应用，提升整体的用户体验。在未来的Web开发中，随着项目规模的持续增长和用户对性能要求的不断提高，动态导入和代码分割的重要性将愈发凸显。

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

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

Webpack零基础入门

webpack指南

全解webpack前端开发环境定制

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