熟悉 Webpack 的 dependency graph-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一款非常流行的前端构建工具，它可以将多个 JavaScript 模块打包成一个或多个文件，以提高网站的性能和可维护性。Webpack 的核心功能之一就是 dependency graph（依赖图），它可以分析代码之间的依赖关系，以便正确地打包和优化代码。

依赖图的概念

依赖图是一个节点与节点之间的关系图，它描述了模块之间的依赖关系。在 Webpack 中，每一个 JavaScript 模块都是一个节点，而它们之间的依赖关系就是边。依赖图的根节点是入口文件，Webpack 会从这个文件开始分析依赖关系，然后递归地分析其它模块的依赖，直到找到所有需要打包的模块。

依赖图的分析

Webpack 的依赖图分析分为两个阶段：解析和依赖收集。

解析

在解析阶段，Webpack 会将每个模块的源代码解析成抽象语法树（AST），以便分析模块的依赖关系。Webpack 支持多种模块语法，包括 CommonJS、ES6 模块、AMD 等。在解析模块时，Webpack 会根据模块语法的不同，使用不同的解析器来解析模块的源代码。

依赖收集

在依赖收集阶段，Webpack 会分析每个模块的 AST，找出模块的依赖关系，并将依赖关系记录到依赖图中。在分析依赖关系时，Webpack 会根据不同的模块语法，采用不同的依赖关系分析方式。

比如，在 CommonJS 模块语法中，模块的依赖关系可以通过 require() 函数来表达，Webpack 会在 AST 中查找 require() 函数调用，并提取出依赖的模块路径。而在 ES6 模块语法中，模块的依赖关系可以通过 import 语句来表达，Webpack 会在 AST 中查找 import 语句，并提取出依赖的模块路径。

依赖图的优化

Webpack 的依赖图可以帮助我们分析代码之间的依赖关系，以便正确地打包和优化代码。在依赖图中，Webpack 会将模块分为两类：入口模块和非入口模块。入口模块是依赖图的根节点，非入口模块是入口模块的依赖模块。

Webpack 的优化策略是基于依赖图的，它会尽可能地减少打包后的文件大小和加载时间。为了实现这个目标，Webpack 会采用以下优化策略：

Tree Shaking

Tree Shaking 是一种优化策略，它可以识别和删除没有被使用的代码。在依赖图中，Webpack 会分析每个模块导出的变量和函数，以及每个模块导入的变量和函数，然后剔除没有被使用的代码。

Code Splitting

Code Splitting 是一种优化策略，它可以将代码分成多个块，以便在不同的页面或场景中使用。在依赖图中，Webpack 会根据模块的依赖关系，将代码分成多个块，并通过异步加载技术，实现按需加载和并行下载。

Chunk Hashing

Chunk Hashing 是一种优化策略，它可以给每个块生成独立的 hash 值，以便实现缓存和版本控制。在依赖图中，Webpack 会根据每个块的内容和依赖关系，生成唯一的 hash 值，并将 hash 值作为文件名的一部分，以便实现缓存和版本控制。

示例代码

下面是一个简单的示例代码，它演示了如何使用 Webpack 的依赖图分析模块的依赖关系，并通过 Code Splitting 技术，将代码分成多个块。

// www.javascriptcn.com code example
// index.js
import { add } from './math';

console.log(add(1, 2));

// math.js
export function add(a, b) {
  return a + b;
}

在这个示例中，index.js 依赖于 math.js，Webpack 会将这两个模块打包成一个文件。如果我们想要将 math.js 分离出来，可以使用以下配置：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: '[name].[chunkhash].js',
    path: __dirname + '/dist',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

在这个配置中，我们通过 optimization.splitChunks 配置项，将代码分成多个块。Webpack 会根据模块的依赖关系，将 math.js 分离出来，并生成独立的 hash 值。最终生成的文件如下：

// www.javascriptcn.com code example
// index.js
console.log(3);
// math.js
function add(a, b) {
  return a + b;
}
export { add };
// main.js
(window.webpackJsonp = window.webpackJsonp || []).push([
  [0],
  {
    1: function (e, n, t) {
      'use strict';
      t.r(n);
      var o = t(0);
      console.log(Object(o.add)(1, 2));
    },
    2: function (e, n, t) {
      'use strict';
      t.r(n);
      var o = t(0);
      function r(e, n) {
        return e + n;
      }
      console.log(r(1, 2));
    },
    3: function (e, n, t) {
      'use strict';
      t.r(n);
      var o = t(2),
        r = t.n(o);
      console.log(r()(1, 2));
    },
  },
  [[1, 0]],
]);

我们可以看到，生成的文件包含了三个块：index.js、math.js 和 main.js。其中，index.js 和 math.js 是入口模块，main.js 是非入口模块。通过 Code Splitting 技术，我们成功将 math.js 分离出来，并实现了按需加载和并行下载。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d22ad9a941bf7134423482

熟悉 Webpack 的 dependency graph