分享几个 Webpack 实用分析工具(1)，10年阿里开发架构师经验分享_webpack visualizer

{

“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」 ÿ