7.6.3 使chunk id更稳定-Webpack实战：入门、进阶与调优(中)

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

### 7.6.3 使chunk id更稳定

在Webpack构建流程中，模块被打包成多个chunk，这些chunk在最终的生产环境中扮演着至关重要的角色。然而，默认情况下，Webpack生成的chunk id是基于内容哈希的，这意味着即使是最小的代码变更也可能导致chunk id的变化。这种不稳定性对于缓存优化和用户体验来说是一个挑战，因为每次构建后，用户都需要重新下载看似“新”的chunk文件，即使它们的内容可能并未发生实质性变化。因此，在Webpack配置中使chunk id更稳定，成为了提高应用性能和可维护性的关键步骤。

#### 7.6.3.1 理解chunk id的生成机制

Webpack通过插件系统提供了灵活的chunk id生成策略。默认情况下，Webpack使用`[contenthash]`来生成chunk的id，这是基于chunk内容的一个哈希值。这种策略确保了当chunk内容变化时，其id也会相应变化，从而避免使用旧的、可能不兼容的缓存版本。然而，这种机制也带来了缓存失效频繁的问题。

#### 7.6.3.2 使用NamedChunksPlugin或NamedModulesPlugin（已废弃）

在早期版本的Webpack中，开发者可能会使用`NamedModulesPlugin`来尝试为模块提供一个更稳定的名称，但这并不直接解决chunk id的稳定性问题，且该插件在Webpack 4及更高版本中已被废弃。对于chunk名称的稳定化，一个更直接的方法是使用`NamedChunksPlugin`或利用Webpack内置的命名策略，尽管`NamedChunksPlugin`并非Webpack官方插件，但可以通过类似的方法达到目的。

然而，从Webpack 4开始，更推荐使用`output.chunkFilename`和`output.filename`中的占位符来实现更细粒度的命名控制，这些占位符包括`[name]`、`[contenthash]`、`[hash]`等。

#### 7.6.3.3 利用`[name]`占位符稳定chunk id

为了实现更稳定的chunk id，最直接且推荐的方法是使用`[name]`占位符结合`NamedChunksPlugin`（或等效的Webpack配置）来命名chunk。`[name]`占位符基于入口点名称或分割策略（如代码拆分时使用的动态导入名称）来生成chunk名称，这使得chunk名称在多次构建之间保持一致，除非显式地更改了入口点或分割策略。

**示例配置**：

```javascript
module.exports = {
  // 其他配置...
  output: {
    // 使用[name]占位符来确保chunk名称的稳定性
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      maxSize: 0,
      minChunks: 1,
      maxInitialRequests: Infinity,
      automaticNameDelimiter: '~',
      enforceSizeThreshold: 50000,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: (module) => {
            // 自定义命名逻辑，可根据需要调整
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
          },
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
```

在上面的配置中，我们使用了`[name]`占位符来命名最终的chunk文件，这确保了只要分割策略和入口点名称不变，chunk的名称就不会改变。同时，我们还利用了`contenthash`来确保当chunk内容发生变化时，文件名也会更新，从而避免了缓存污染。

#### 7.6.3.4 缓存组策略与命名

在`splitChunks`配置中，`cacheGroups`允许我们定义如何拆分代码块并给它们命名。通过自定义`name`函数，我们可以根据模块路径或其他属性来生成更具描述性的名称，这些名称不仅有助于调试，还能在缓存优化中发挥重要作用。例如，将来自`node_modules`的模块打包到一个以`npm`为前缀的chunk中，可以让我们更容易地识别和管理这些第三方依赖。

#### 7.6.3.5 缓存优化策略

使chunk id更稳定只是缓存优化的一部分。在实际应用中，还需要结合HTTP缓存头（如Cache-Control）、服务端配置（如CDN配置）以及前端路由策略来综合提升缓存效率。例如，为不同的资源设置合理的缓存有效期，利用CDN的边缘缓存能力，以及在前端路由层面控制资源的加载和缓存策略，都是实现高效缓存优化的重要手段。

#### 7.6.3.6 注意事项

- **测试与验证**：在生产环境部署前，务必在开发或测试环境中充分测试你的缓存策略，确保它们按预期工作。
- **兼容性**：不同的浏览器和服务端配置可能对缓存策略有不同的支持程度，因此需要注意兼容性问题。
- **性能监控**：实施缓存策略后，应持续监控应用的加载性能和缓存命中率，以便及时调整优化策略。

综上所述，通过合理配置Webpack的`output`和`optimization`选项，特别是利用`[name]`占位符和`splitChunks`配置中的命名策略，我们可以有效地使chunk id更稳定，从而优化应用的缓存效率，提升用户体验。同时，还需要结合其他缓存优化手段，全面提升应用的性能和可维护性。

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

webpack指南

全解webpack前端开发环境定制

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

Webpack零基础入门

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