@@ -10,29 +10,32 @@ contributors:
10
10
- chenxsan
11
11
- rahul3v
12
12
- snitin315
13
+ translators :
14
+ - Usualminds
15
+ - jacob-lcs
13
16
---
14
17
15
- When compiling source code with webpack, users can generate a JSON file containing statistics about modules. These statistics can be used to analyze an application's dependency graph as well as to optimize compilation speed. The file is typically generated with the following CLI command:
18
+ 使用 ` webpack ` 编译源码时,用户可以生成一个包含模块统计信息的 ` JSON ` 文件。这些统计信息可以用来分析应用中的依赖关系图,从而优化 ` webpack ` 的编译速度。该文件通常由以下 ` CLI ` 命令生成:
16
19
17
20
``` bash
18
21
npx webpack --profile --json=compilation-stats.json
19
22
```
20
23
21
- The ` --json=compilation-stats.json ` flag indicates to webpack that it should emit the ` compilation-stats.json ` containing the dependency graph and various other build information. Typically, the ` --profile ` flag is also added so that a ` profile ` section is added to each [ ` modules ` object ] ( #module-objects ) containing module-specific compilation stats.
24
+ ` --json=compilation-stats.json ` 标志告诉 ` webpack ` 生成一个包含依赖关系图和其他各种构建信息的 ` compilation-stats.json ` 文件。通常情况下, ` --profile ` 标志也会被添加,这样的话每个 [ ` module ` objects ] ( #module-objects ) 都会增加一个 ` profile ` 部分,它包含了特定模块的统计信息。
22
25
23
- ## Structure { #structure }
26
+ ## 配置结构( Structure) { #structure }
24
27
25
- The top-level structure of the output JSON file is fairly straightforward but there are a few nested data structures as well. Each nested structure has a dedicated section below to make this document more consumable. Note that you can click links within the top-level structure below to jump to relevant sections and documentation:
28
+ 输出 JSON 文件的顶层结构相当简单,但是也包含部分嵌套的数据结构。为了让文档更易于使用,每个嵌套的数据结构都有对应的一小节来讲,注意,你可以点击如下的链接,跳转到相关章节查看文档:
26
29
27
30
``` js-with-links
28
31
{
29
- 'version': '5.9.0', // Version of webpack used for the compilation
30
- 'hash': '11593e3b3ac85436984a', // Compilation specific hash
31
- 'time': 2469, // Compilation time in milliseconds
32
+ 'version': '5.9.0', // 用来编译的 webpack 版本
33
+ 'hash': '11593e3b3ac85436984a', // 编译的特定哈希值
34
+ 'time': 2469, // 编译时间(毫秒)
32
35
'publicPath': 'auto',
33
- 'outputPath': '/', // path to webpack output directory
36
+ 'outputPath': '/', // webpack 的输出目录路径
34
37
'assetsByChunkName': {
35
- // Chunk name to emitted asset(s) mapping
38
+ // 输出资源对应的 Chunk 名称
36
39
'main': [
37
40
'web.js?h=11593e3b3ac85436984a'
38
41
],
@@ -45,151 +48,151 @@ The top-level structure of the output JSON file is fairly straightforward but th
45
48
]
46
49
},
47
50
'assets': [
48
- // A list of [asset objects](#asset-objects)
51
+ // [asset objects](#asset-objects) 列表
49
52
],
50
53
'chunks': [
51
- // A list of [chunk objects](#chunk-objects)
54
+ // [chunk objects](#chunk-objects) 列表
52
55
],
53
56
'modules': [
54
- // A list of [module objects](#module-objects)
57
+ // [module objects](#module-objects) 列表
55
58
],
56
59
'entryPoints': {
57
- // A list of [entry objects](#entry-objects)
60
+ // [entry objects](#entry-objects) 列表
58
61
},
59
62
'errors': [
60
- // A list of [error objects](#errors-and-warnings)
63
+ // [error objects](#errors-and-warnings) 列表
61
64
],
62
- 'errorsCount': 0, // number of errors
65
+ 'errorsCount': 0, // 错误个数
63
66
'warnings': [
64
- // A list of [warning objects](#errors-and-warnings)
67
+ // [warning objects](#errors-and-warnings) 列表
65
68
],
66
- 'warningsCount': 0, // nummber of warnings
69
+ 'warningsCount': 0, // 告警个数
67
70
}
68
71
```
69
72
70
- ### Asset Objects { #asset - objects }
73
+ ### Asset 对象 { #asset - objects }
71
74
72
- Each ` assets ` object represents an ` output ` file emitted from the compilation. They all follow a similar structure:
75
+ 每个 ` assets ` 对象表示编译过程中生成的 ` output ` 文件。它们都遵循类似的结构:
73
76
74
77
<!-- eslint-skip -->
75
78
76
79
```js
77
80
{
78
- ' chunkNames' : [], // The chunks this asset contains
79
- ' chunks' : [ 10 , 6 ], // The chunk IDs this asset contains
80
- ' comparedForEmit' : false , // Indicates whether or not the asset was compared with the same file on the output file system
81
- ' emitted' : true , // Indicates whether or not the asset made it to the `output` directory
82
- ' name' : ' 10.web.js' , // The `output` filename
83
- ' size' : 1058 , // The size of the file in bytes
81
+ ' chunkNames' : [], // 该资源文件包含的 chunks
82
+ ' chunks' : [ 10 , 6 ], // 该资源文件包含的 chunk ID
83
+ ' comparedForEmit' : false , // 指定是否对该资源文件和输出文件系统上相同文件进行比较
84
+ ' emitted' : true , // 指定资源文件是否要生成到 `output` 目录中
85
+ ' name' : ' 10.web.js' , // `output` 文件名
86
+ ' size' : 1058 , // 文件大小(字节为单位)
84
87
' info' : {
85
- ' immutable' : true , // A flag telling whether the asset can be long term cached (contains a hash)
86
- ' size' : 1058 , // The size in bytes, only becomes available after asset has been emitted
87
- ' development' : true , // A flag telling whether the asset is only used for development and doesn't count towards user-facing assets
88
- ' hotModuleReplacement' : true , // A flag telling whether the asset ships data for updating an existing application (HMR)
89
- ' sourceFilename' : ' originalfile.js' , // sourceFilename when asset was created from a source file (potentially transformed)
90
- ' javascriptModule' : true // true, when asset is javascript and an ESM
88
+ ' immutable' : true , // 指定 asset 是否可以长期缓存的标志位(包括哈希值)
89
+ ' size' : 1058 , // 单位大小为字节,只有在资源文件生成之后才可以使用
90
+ ' development' : true , // 指定 asset 是否只用于 development 环境,而不面向用户的标志位
91
+ ' hotModuleReplacement' : true , // 指定 asset 是否加载用于更新现有应用程序 (HMR) 的数据标志位
92
+ ' sourceFilename' : ' originalfile.js' , // 从源文件创建资产时(可能转换) sourceFilename
93
+ ' javascriptModule' : true // 当 asset 是 javascript 和 ESM 时为 true
91
94
}
92
95
}
93
96
```
94
97
95
- T > Asset's ` info ` property is available since webpack v4.40.0
98
+ T > 从 webpack v4.40.0 版本开始,Asset 的 ` info ` 属性可用
96
99
97
- ### Chunk Objects { #chunk - objects }
100
+ ### Chunk 对象 { #chunk - objects }
98
101
99
- Each ` chunks ` object represents a group of modules known as a [ chunk] ( /glossary/#c ) . Each object follows the following structure:
102
+ 每个 ` chunks ` 对象代表一组名为 [ chunk] ( /glossary/#c ) 的模块。每个对象都遵循如下结构:
100
103
101
104
``` js-with-links
102
105
{
103
- "entry": true, // Indicates whether or not the chunk contains the webpack runtime
106
+ "entry": true, // 指定 webpack 运行时是否包含 chunk
104
107
"files": [
105
- // An array of filename strings that contain this chunk
108
+ // 包含 chunk 的文件名字符数组
106
109
],
107
- "filteredModules": 0, // See the description in the [top-level structure](#structure) above
108
- "id": 0, // The ID of this chunk
109
- "initial": true, // Indicates whether this chunk is loaded on initial page load or [on demand ](/guides/lazy-loading)
110
+ "filteredModules": 0, // 查看关于 [top-level structure](#structure) 描述
111
+ "id": 0, // chunk 对应的 ID
112
+ "initial": true, // 指定 chunk 是在页面初始化时加载还是[按需加载 ](/guides/lazy-loading)
110
113
"modules": [
111
- // A list of [module objects](#module-objects)
114
+ // [module objects](#module-objects) 列表
112
115
"web.js?h=11593e3b3ac85436984a"
113
116
],
114
117
"names": [
115
- // An list of chunk names contained within this chunk
118
+ // 包含当前 chunk 的 chunk 名称列表
116
119
],
117
120
"origins": [
118
- // See the description below ...
121
+ // 查看后面的描述 ...
119
122
],
120
- "parents": [], // Parent chunk IDs
121
- "rendered": true, // Indicates whether or not the chunk went through Code Generation
122
- "size": 188057 // Chunk size in bytes
123
+ "parents": [], // 父级 chunk ID
124
+ "rendered": true, // 指定 chunk 是否经过代码生成
125
+ "size": 188057 // chunk 大小,单位字节
123
126
}
124
127
```
125
128
126
- The ` chunks ` object will also contain a list of ` origins ` describing how the given chunk originated. Each ` origins ` object follows the following schema:
129
+ ` chunks ` 对象还包含一个 ` origins ` 列表,它描述来给定的 chunk 每个 ` origins ` 对象都遵循以下模式:
127
130
128
131
``` js-with-links
129
132
{
130
- "loc": "", // Lines of code that generated this chunk
131
- "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
132
- "moduleId": 0, // The ID of the module
133
- "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
134
- "moduleName": "./lib/index.web.js", // Relative path to the module
135
- "name": "main", // The name of the chunk
133
+ "loc": "", // 生成当前 chunk 的代码行
134
+ "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // module的路径
135
+ "moduleId": 0, // module 对应的 ID
136
+ "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // module 对应的路径
137
+ "moduleName": "./lib/index.web.js", // module对应的相对路径
138
+ "name": "main", // chunk 名称
136
139
"reasons": [
137
- // A list of the same `reasons` found in [module objects](#module-objects)
140
+ // 在 [module objects](#module-objects) 中找到相同的 `reason` 列表
138
141
]
139
142
}
140
143
```
141
144
142
- ### Module Objects { #module - objects }
145
+ ### Module 对象 { #module - objects }
143
146
144
- What good would these statistics be without some description of the compiled application's actual modules? Each module in the dependency graph is represented by the following structure:
147
+ 假如不描述编译后的应用程序的实际模块,这些统计的数据有什么作用?其依赖关系图中的每个模块用如下结构表示:
145
148
146
149
``` js-with-links
147
150
{
148
151
"assets": [
149
- // A list of [asset objects](#asset-objects)
152
+ // [asset objects](#asset-objects) 列表
150
153
],
151
- "built": true, // Indicates that the module went through [Loaders](/concepts/loaders), Parsing, and Code Generation
152
- "cacheable": true, // Whether or not this module is cacheable
154
+ "built": true, // 指定该模块经过 [Loaders](/concepts/loaders)、解析和代码生成
155
+ "cacheable": true, // 是否可以缓存
153
156
"chunks": [
154
- // IDs of chunks that contain this module
157
+ // 当前模块包含的 chunk ID
155
158
],
156
- "errors": 0, // Number of errors when resolving or processing the module
157
- "failed": false, // Whether or not compilation failed on this module
158
- "id": 0, // The ID of the module (analogous to [`module.id`](/api/module-variables/#moduleid-commonjs))
159
- "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // A unique ID used internally
160
- "name": "./lib/index.web.js", // Path to the actual file
161
- "optional": false, // All requests to this module are with `try... catch` blocks (irrelevant with ESM)
162
- "prefetched": false, // Indicates whether or not the module was [prefetched](/plugins/prefetch-plugin)
159
+ "errors": 0, // 解析或处理模块时的错误个数
160
+ "failed": false, // 当前模块编译是否失败
161
+ "id": 0, // 模块 ID (类似于 [`module.id`](/api/module-variables/#moduleid-commonjs))
162
+ "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 内部使用的唯一 ID
163
+ "name": "./lib/index.web.js", // 实际文件的路径
164
+ "optional": false, // 对当前模块的所有请求都带上 `try... catch` blocks (与 ESM 无关 )
165
+ "prefetched": false, // 指定模块是否被 [prefetched](/plugins/prefetch-plugin)
163
166
"profile": {
164
- // Module specific compilation stats corresponding to the [`--profile` flag ](/api/cli/#profiling) (in milliseconds)
165
- "building": 73, // Loading and parsing
166
- "dependencies": 242, // Building dependencies
167
- "factory": 11 // Resolving dependencies
167
+ // 对应于 [`--profile` 标志位 ](/api/cli/#profiling) 的模块特定编译统计(以毫秒为单位)
168
+ "building": 73, // 加载和解析
169
+ "dependencies": 242, // 构建依赖
170
+ "factory": 11 // 解析依赖关系
168
171
},
169
172
"reasons": [
170
- // See the description below ...
173
+ // 查看下面的描述 ...
171
174
],
172
- "size": 3593, // Estimated size of the module in bytes
173
- "source": "// Should not break it ...\r\nif(typeof...", // The stringified raw source
174
- "warnings": 0 // Number of warnings when resolving or processing the module
175
+ "size": 3593, // 预估模块大小,单位为字节
176
+ "source": "// 不要改变它 ...\r\nif(typeof...", // 字符串的原始源头
177
+ "warnings": 0 // 解析或处理模块时的警告数
175
178
}
176
179
```
177
180
178
- Every module also contains a list of ` reasons ` objects describing why that module was included in the dependency graph. Each " reason" is similar to the ` origins ` seen above in the [ chunk objects] ( #chunk-objects ) section:
181
+ 每个模块还包含了一个 ` reasons ` 列表,它描述了为什么该模块会被包含在依赖关系图中。每个 ` reason ` 都类似于上面的 [ chunk objects] ( #chunk-objects ) 章节的 ` origins ` :
179
182
180
183
``` js-with-links
181
184
{
182
- "loc": "33:24-93", // Lines of code that caused the module to be included
183
- "module": "./lib/index.web.js", // Relative path to the module based on [context](/configuration/entry-context/#context)
184
- "moduleId": 0, // The ID of the module
185
- "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
186
- "moduleName": "./lib/index.web.js", // A more readable name for the module (used for "pretty-printing")
187
- "type": "require.context", // The [type of request ](/api/module-methods) used
188
- "userRequest": "../../cases" // Raw string used for the `import` or `require` request
185
+ "loc": "33:24-93", // 当前模块包含的代码行数
186
+ "module": "./lib/index.web.js", // 基于 [context](/configuration/entry-context/#context) 的模块相对路径
187
+ "moduleId": 0, // 模块对应的 ID
188
+ "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // 模块对应路径
189
+ "moduleName": "./lib/index.web.js", // 可读性更高的模块名称
190
+ "type": "require.context", // 使用的 [请求类型 ](/api/module-methods)
191
+ "userRequest": "../../cases" // 用于 `import` 或者 `require` 请求的原始字符串
189
192
}
190
193
```
191
194
192
- ### Entry Objects
195
+ ### Entry 对象 { # entry - objects }
193
196
194
197
``` json
195
198
"main" : {
@@ -214,9 +217,9 @@ Every module also contains a list of `reasons` objects describing why that modul
214
217
}
215
218
```
216
219
217
- ### Errors and Warnings { #errors - and - warnings }
220
+ ### 错误和告警信息 { #errors - and - warnings }
218
221
219
- The ` errors ` and ` warnings ` properties each contain a list of objects. Each object contains a message, a stack trace and various other properties:
222
+ 包含 ` errors ` and ` warnings ` 属性的一个对象列表。每个对象包含一条消息,一个堆栈跟踪信息和其他各种属性:
220
223
221
224
``` json
222
225
{
@@ -258,4 +261,4 @@ The `errors` and `warnings` properties each contain a list of objects. Each obje
258
261
}
259
262
```
260
263
261
- W> Note that the stack traces are removed when ` errorStack: false ` is passed to the ` toJson ` method. The ` errorStack ` option is set to ` true ` by default.
264
+ W> 注意,当 ` errorStack: false ` 传递给 ` toJson ` 方法时,堆栈跟踪信息会被删除。 ` errorStack ` 选项默认设置为 ` true ` 。
0 commit comments