博客
关于我
Webpack 之 basic chunk graph
阅读量:799 次
发布时间:2023-02-11

本文共 1944 字,大约阅读时间需要 6 分钟。

Webpack 源文件及依赖关系分析

1. 项目结构

我们有以下文件:

  • a.js
  • b.js
  • c.js
  • d.js
  • webpack.config.js

其中 a.js 是入口文件,它依赖 b.js 和 c.js,并且 c.js 是异步加载的。b.js 又依赖 d.js,而 d.js 是一个简单的模块函数。

2. 模块依赖关系

  • a.js 导入 b.js,并使用它。
  • a.js 异步加载 c.js,并在加载完成后调用 del 函数。
  • b.js 导入 d.js,并将其作为模块使用。
  • c.js 同样导入 d.js,并在加载完成后调用 del 函数。
  • d.js 提供一个模块函数 mod(n1, n2)。

3. Webpack 配置

在 webpack.config.js 中,Webpack 的入口设置为 a.js,并使用以下输出选项:

module.exports = {
entry: {
app: './src/a.js'
},
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].bundle.[chunkhash:8].js',
publicPath: '/'
},
optimization: {
runtimeChunk: {
name: 'bundle'
}
}
}

4. 模块图与 Chunk 图

4.1 模块图

Webpack 将每个文件(如 a.js、b.js、c.js、d.js)视为一个模块。每个模块可以是普通模块(NormalModule)或依赖模块(ImportDependenciesBlock)。

4.2 Chunk 图

Chunk 表示 Webpack 打包后的文件组。每个 Chunk 对应一个文件组,可能包含多个模块。Chunk 还可以是 runtime chunk(用于 Webpack runtime 的代码)。

4.3 ChunkGroup

ChunkGroup 是 Chunk 的容器,一个 ChunkGroup 可能包含多个 Chunk。每个 ChunkGroup 对应一个入口文件。

5. 依赖关系处理

5.1 同步依赖

  • a.js 同步加载 b.js。
  • b.js 同步加载 d.js。

5.2 异步依赖

  • a.js 异步加载 c.js。
  • c.js 同样异步加载 b.js。

6. Webpack 的内部逻辑

6.1 创建 ChunkGroup 和 Chunk

  • Webpack 首先遍历配置文件中的入口,创建 ChunkGroup 和 Chunk。
  • 对于每个入口文件,创建一个 ChunkGroup,并在 ChunkGroup 中创建一个 Chunk。
  • Chunk 会记录其所属的模块和依赖关系。

6.2 处理模块依赖

  • Webpack 会递归加载所有依赖的模块,并建立模块之间的依赖关系。
  • 对于同步依赖,直接将模块添加到 Chunk 中。
  • 对于异步依赖,创建新的 Chunk,并将其加入 ChunkGroup。

6.3 优化 ChunkGraph

  • Webpack 会根据模块依赖关系,优化 ChunkGraph,合并重复的 Chunk。
  • 确保每个模块只出现在一个 Chunk 中。

7. 最终结构

  • ChunkGroup (app) 包含以下 Chunk:

    • Chunk (app): 包含 a.js 和 b.js。
    • Chunk (c.js): 包含 c.js 和 d.js。
    • Chunk (b.js): 包含 b.js 和 d.js。
  • Chunk (app) 包含 a.js 和 b.js。

  • Chunk (c.js) 包含 c.js 和 d.js。

  • Chunk (b.js) 包含 b.js 和 d.js。

8. 调试 Webpack 源码

要调试 Webpack 源码,可以在 package.json 中添加 debug 脚本:

"debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js"

运行 npm run debug,然后在浏览器中访问 chrome://inspect/#devices,选择 Node 运行环境,开始调试。

9. 总结

通过上述分析,可以看出 Webpack 是如何根据模块依赖关系,构建 Chunk 和 ChunkGroup 的。每个 Chunk 对应一个文件组,而每个 ChunkGroup 又对应一个入口文件。这种结构使得 Webpack 能够高效地打包和优化应用程序。

转载地址:http://unbfk.baihongyu.com/

你可能感兴趣的文章
mysql如何做到存在就更新不存就插入_MySQL 索引及优化实战(二)
查看>>
mysql如何删除数据表,被关联的数据表如何删除呢
查看>>
MySQL如何实现ACID ?
查看>>
mysql如何记录数据库响应时间
查看>>
MySQL子查询
查看>>
Mysql字段、索引操作
查看>>
mysql字段的细节(查询自定义的字段[意义-行列转置];UNION ALL;case-when)
查看>>
mysql字段类型不一致导致的索引失效
查看>>
mysql字段类型介绍
查看>>
mysql字段解析逗号分割_MySQL逗号分割字段的行列转换技巧
查看>>
MySQL字符集与排序规则
查看>>
MySQL字符集乱码
查看>>
mysql字符集设置
查看>>
mysql存储IP地址的数据类型
查看>>
mysql存储中文 但是读取乱码_mysql存储中文乱码
查看>>
MySQL存储引擎
查看>>
MySQL存储引擎
查看>>
MySQL存储引擎--MYSIAM和INNODB引擎区别
查看>>
Mysql存储引擎(1):存储引擎体系结构和介绍
查看>>
Mysql存储引擎(2):存储引擎特点
查看>>