Webpack Chunk 与文件名命名规则及原理解析

Webpack 是前端工程化中最常用的工具之一。它可以将 JavaScript、CSS、图片等资源打包压缩，并以模块化的方式进行管理。为了在打包过程中优化性能，Webpack 将内容分离成不同的块，这些块被称为「Chunk」。本文将详细介绍 Chunk 的概念及其与文件名命名规则以及原理的关系。

Chunk 是什么？

Chunk 是从入口点开始，Webpack 解析依赖树过程中产生的文件块。每个 Chunk 都包含了一个模块集合及模块之间的依赖关系图。这些模块可以是 JavaScript、CSS、图像等，其中某些模块可以被异步加载。

Webpack 对 Chunk 的理解可以理解为「一部分代码和它的加载处理逻辑」。由于每个 Chunk 都是相互独立的，因此可以在需要时通过异步加载技术动态地加载 Chunk。

文件名命名规则

Webpack 生成的文件名中，包含的信息有 Chunk ID、Module ID、Hash 等。下面详细介绍每种信息及其含义。

Chunk ID

Chunk ID 代表每个 Chunk 的唯一标识符，通常默认是一个自增长的数字，也可以手动为 Chunk 指定 ID。当使用 entry 属性来定义 Chunk 时，每个 Chunk ID 和相应的入口名称相关联。

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js',
  },
};

在上面的配置中，app 和 vendors 都是 Chunk 的名称，Webpack 会生成对应的 Chunk ID。

Module ID

Module ID 代表每个模块的唯一标识符。Webpack 在打包过程中为每个模块隐式地分配一个 Module ID。在生成的文件名中，每个 Chunk 中的模块 ID 会被表示为 id.

Hash

Hash 是打包过程中生成的一个唯一标识符，用于标记打包结果的唯一性。当使用 Hash 开启缓存时，可以基于文件内容的变化来判断缓存是否失效。

在文件名命名规则中，Hash 以 [hash] 表示。Webpack 提供了三种 Hash 的类型：

• hash：整个项目的 Hash。
• chunkhash：每个 Chunk 的 Hash，只有与 Chunk 相关的文件才会使用这个 Hash。
• contenthash：根据文件内容生成 Hash，只能在类似图片这样的不经常修改的资源中使用。

文件名命名规则示例

下面是一种文件名命名规则示例：

[id].[name].[chunkhash].[contenthash].[ext]

其中：

• [id]：Chunk ID。
• [name]：Chunk 的名称。
• [chunkhash]：Chunk 特有的 Hash。
• [contenthash]：文件内容特有的 Hash。
• [ext]：文件扩展名。

官方推荐方式

Webpack 官方推荐的文件名命名规则为：

[chunkhash].[name].js

其中：

• [chunkhash]：Chunk 特有的 Hash。
• [name]：Chunk 的名称。

Chunk 的原理

Webpack 会根据配置文件中的 entry 选项生成一张依赖关系图（Dependency Graph），并且将有依赖关系的模块合并成一个 Chunk。当需要异步加载时，Webpack 又会根据异步加载的代码分析出新的依赖关系图，并生成对应的 Chunk。

由于每个 Chunk 都是相互独立的，Webpack 在分离 Chunk 的过程中必须保证每个 Chunk 合法且互不影响。为了实现这一点，Webpack 会将所有 Chunk 的共享模块提取到一个独立的文件中，这个文件就是通常所说的「vendors」文件。

Webpack 使用 webpack.optimize.CommonsChunkPlugin 插件来进行共享模块的提取，它可以配置多个名称的 Chunk，并可指定一些模块只被包含到对应名称的 Chunk 中。

总结

本文对 Webpack Chunk 的概念及其与文件名命名规则以及原理的关系进行了详细解析，并提供了官方推荐的文件名命名规则。掌握了这些知识后，我们便可以更好地理解 Webpack 的打包原理，优化 Chunk 的分离和合并，从而提高整个项目的性能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6545f61d7d4982a6ebfafa94