11.1.6 多页应用公共代码优化-Webpack实战：入门、进阶与调优(下)

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

### 11.1.6 多页应用公共代码优化

在多页应用（MPA, Multi-Page Application）的开发过程中，公共代码的优化是一项至关重要的任务。它不仅能够减少网络传输的数据量，加快页面加载速度，还能提升应用的缓存效率，优化用户体验。在本章节中，我们将深入探讨多页应用中公共代码的优化策略，包括代码分割、公共依赖提取、按需加载、以及利用Webpack等构建工具实现高效管理。

#### 11.1.6.1 理解多页应用中的公共代码

在多页应用中，不同页面间往往会共享一些基础库（如jQuery、React等）、工具函数、UI组件等公共代码。这些公共代码如果在每个页面中都重复打包，会显著增加应用的整体体积，影响加载速度。因此，识别并优化这些公共代码，使其能够被多个页面共享，是优化多页应用的关键步骤。

#### 11.1.6.2 使用Webpack进行公共代码提取

Webpack作为一个现代JavaScript应用程序的静态模块打包器，提供了强大的功能来支持多页应用的公共代码优化。其核心机制之一便是通过`SplitChunksPlugin`（在Webpack 4及以后版本中自动启用）来实现代码的分割和公共依赖的提取。

##### 11.1.6.2.1 配置SplitChunksPlugin

`SplitChunksPlugin`允许你基于各种策略（如模块请求次数、大小等）自动分割代码块，并提取公共依赖到单独的chunk中。以下是一个基本的配置示例，展示了如何在`webpack.config.js`中设置公共代码提取：

```javascript
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all', // 作用于所有额外的chunk
      minSize: 20000, // 形成一个新代码块之前所需要的大小(以字节为单位)
      maxSize: 0, // 形成的代码块的最大体积
      minChunks: 2, // 被至少多少个chunk共享时才分割代码
      maxAsyncRequests: 30, // 按需加载时的并行请求的最大数目
      maxInitialRequests: 30, // 一个入口点下的最大并行请求数
      automaticNameDelimiter: '~', // 生成名称时使用的分隔符
      enforceSizeThreshold: 50000, // 强制将公共模块打包至公共bundle中，即使它们超出了minSize限制
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  //...
};
```

上述配置中，`cacheGroups`允许你自定义代码块的分组策略。例如，`defaultVendors`用于将来自`node_modules`的依赖打包成一个或多个公共bundle，而`default`则用于其他非node_modules的公共代码。

##### 11.1.6.2.2 动态导入与代码分割

除了通过`SplitChunksPlugin`自动提取公共代码外，Webpack还支持通过动态导入（Dynamic Imports）实现更细粒度的代码分割。这在你需要根据路由或其他条件按需加载模块时特别有用。例如，使用`import()`语法：

```javascript
// 假设有一个基于路由的页面加载逻辑
function loadPage(pageName) {
  return import(`./pages/${pageName}`).then(module => {
    // 使用module.default或module中的其他导出
  });
}
```

这种方式下，Webpack会自动为每个动态导入的模块生成一个或多个chunk，并在需要时通过网络请求加载。

#### 11.1.6.3 缓存策略与公共代码

在优化多页应用的公共代码时，还需要考虑缓存策略。由于公共代码很少变动，因此可以给予较长的缓存期，以提高页面加载速度。这通常通过设置HTTP头部（如`Cache-Control`）来实现。同时，在Webpack构建时，可以通过哈希值等方式为生成的文件命名，确保文件内容变更时文件名也随之变化，从而避免缓存污染。

#### 11.1.6.4 监控与优化

公共代码优化是一个持续的过程，需要不断监控应用的性能表现，并根据实际情况进行调整。你可以使用Webpack提供的分析工具（如Webpack Bundle Analyzer）、性能监控工具（如Lighthouse、WebPageTest）来评估公共代码优化的效果，并根据结果进行相应的优化迭代。

#### 11.1.6.5 实战案例

假设你正在开发一个包含多个页面的电商网站，其中首页、商品列表页、购物车页等多个页面都使用了React框架和Redux状态管理库。为了优化这些页面的加载速度，你可以按照以下步骤进行公共代码优化：

1. **配置Webpack**：在`webpack.config.js`中启用并配置`SplitChunksPlugin`，确保React、Redux等公共依赖被提取到单独的bundle中。
2. **动态导入**：对于非首屏必要的组件或功能，使用`import()`语法进行动态导入，实现按需加载。
3. **缓存策略**：为生成的公共代码bundle设置较长的缓存时间，并通过文件名哈希值确保缓存的有效性。
4. **性能监控**：使用Webpack Bundle Analyzer查看打包后的文件结构，确保公共代码被正确提取。同时，使用Lighthouse等工具评估页面的加载速度和性能表现。
5. **持续优化**：根据性能监控结果和用户体验反馈，不断优化公共代码的优化策略，提升应用的整体性能。

#### 结论

多页应用中的公共代码优化是提升应用性能、改善用户体验的重要手段。通过合理配置Webpack的`SplitChunksPlugin`、采用动态导入实现按需加载、设置合理的缓存策略以及持续监控和优化，我们可以有效地减少公共代码的重复加载，降低应用的总体积，从而提升应用的加载速度和响应性能。在未来的开发过程中，我们应继续关注公共代码的优化技术和发展趋势，以应对不断变化的用户需求和技术挑战。

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

Webpack零基础入门

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

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

全解webpack前端开发环境定制

webpack指南