Web前端最新分享几个 Webpack 实用分析工具，2024年前端知识体系总结

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

收集统计信息

======

Webpack 运行过程会收集各种统计信息，只需要在启动时附加 --json 参数即可获得：

npx webpack --json > stats.json

上述命令运行后，会在文件夹下输出 stats.json 文件，文件内容主要包含：

{

“hash”: “2c0b66247db00e494ab8”,

“version”: “5.36.1”,

“time”: 81,

“builtAt”: 1620401092814,

“publicPath”: “”,

“outputPath”: “/Users/tecvan/learn-webpack/hello-world/dist”,

“assetsByChunkName”: { “main”: [“index.js”] },

“assets”: [

// …

],

“chunks”: [

// …

],

“modules”: [

// …

],

“entrypoints”: {

// …

},

“namedChunkGroups”: {

// …

},

“errors”: [

// …

],

“errorsCount”: 0,

“warnings”: [

// …

],

“warningsCount”: 0,

“children”: [

// …

]

}

通常，分析构建性能时主要关注如下属性：

• 「assets」 ：编译最终输出的产物列表

• 「chunks」 ：构建过程生成的 chunks 列表，数组内容包含 chunk 名称、大小、依赖关系图

• 「modules」 ：本次运行触达的所有模块，数组内容包含模块的大小、所属chunk、分析耗时、构建原因等

• 「entrypoints」 ：entry 列表，包括动态引入所生产的 entry 项也会包含在这里面

• 「namedChunkGroups」 ：chunks 的命名版本，内容相比于 chunks 会更精简

• 「errors」 ：构建过程发生的所有错误信息

• 「warnings」 ：构建过程发生的所有警告信息

基于这些属性，我们可以分析出模块的依赖关系、模块占比、编译耗时等信息，不过这里大致了解原理就行了，社区已经为我们提供了非常多事半功倍的分析工具。

可视化分析工具

=======

Webpack Analysis

---

Webpack Analysis 是 webpack 官方提供的可视化分析工具，相比于其它工具，它提供的视图更全，功能更强大，使用上只需要将上一节 webpack --json > stats.json 命令生成的 stats.json 文件拖入页面，就可以获得一系列分析视图：

点击 「modules/chunks/assets」 按钮，页面会渲染出对应依赖关系图，例如点击 「modules」：

除 「modules/chunks/assets」 外，右上方菜单栏 「Hints」 还可以查看构建过程各阶段、各模块的处理耗时，可以用于分析构建的性能瓶颈：

❝

不过，实测发现 「Hints」 还不支持 webpack 5 版本的产出，等待官方更新吧。

❞

Webpack Analysis 提供了非常齐全的分析视角，信息几乎不失真，但这也意味着上手难度更高，信息噪音也更多，所以社区还提供了一个简化版 webpack-deps-tree，用法相似但用法更简单、信息更清晰，读者可以根据实际场景对比交叉使用。

Webpack Visualizer

---

Webpack Visualizer 是一个在线分析工具，同样只需要将 stats.json 文件拖入页面，就可以从文件夹到模块逐层看到 bundle 的组成：

❝

除了在线版本外，Webpack Visualizer 还提供了插件版本的 webpack-visualizer-plugin 工具，但是这个插件年久失修，只兼容 webpack 1.x ，所以现在几乎没有使用价值了。

❞

此外，在线工具 Webpack Chart 也提供了类似的功能，功能重合度很高，这里就不展开讲了。

Webpack Bundle Analyzer

---

webpack-bundle-analyzer 是一个 webpack 插件，只需要简单的配置就可以在 webpack 运行结束后获得 treemap 形态的模块分布统计图，用户可以仔细对比 treemap 内容推断是否包含重复模块、不必要的模块等场景，例如：

const BundleAnalyzerPlugin = require(“webpack-bundle-analyzer”)

.BundleAnalyzerPlugin;

module.exports = {

…

plugins: [new BundleAnalyzerPlugin()],

};

编译结束后，默认自动打开本地视图页面：

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

],

};

编译结束后，默认自动打开本地视图页面：

最后

[外链图片转存中…(img-rg1ln9E2-1715206952789)]

[外链图片转存中…(img-yUOBkScT-1715206952790)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】