@@ -11,6 +11,7 @@ contributors:
1111translators :
1212 - QC-L
1313 - jacob-lcs
14+ - Yucohny
1415---
1516
1617本指南包含一些改进构建/编译性能的实用技巧。
@@ -19,19 +20,19 @@ translators:
1920
2021## 通用环境 $#general$
2122
22- 无论你是在 [ 开发环境] ( /guides/development ) 还是在 [ 生产环境] ( /guides/production ) 下运行构建脚本,以下最佳实践都会有所帮助。
23+ 无论是在 [ 开发环境] ( /guides/development ) 还是在 [ 生产环境] ( /guides/production ) 下运行构建脚本,以下最佳实践都会有所帮助。
2324
2425### 更新到最新版本 $#stay-up-to-date$
2526
26- 使用最新的 webpack 版本。我们会经常进行性能优化 。webpack 的最新稳定版本是:
27+ 使用最新的 webpack 版本。我们会一直坚持进行性能优化 。webpack 的最新稳定版本是:
2728
2829[ ![ latest webpack version] ( https://img.shields.io/github/package-json/v/webpack/webpack.svg?label=webpack&style=flat-square&maxAge=3600 )] ( https://github.com/webpack/webpack/releases )
2930
30- 将 ** Node.js** 更新到最新版本,也有助于提高性能。除此之外,将你的 package 管理工具(例如 ` npm ` 或者 ` yarn ` )更新到最新版本,也有助于提高性能。较新的版本能够建立更高效的模块树以及提高解析速度 。
31+ 将 ** Node.js** 与 package 管理工具(例如 ` npm ` 或者 ` yarn ` )更新到最新版本均有助于提高性能。较新的版本能够建立更高效的模块树并提高解析速度 。
3132
3233### loader $#loaders$
3334
34- 将 loader 应用于最少数量的必要模块。而非如下:
35+ 将 loader 应用于最少数量的必要模块。反例:
3536
3637``` js
3738module .exports = {
@@ -47,7 +48,7 @@ module.exports = {
4748};
4849```
4950
50- 通过使用 ` include ` 字段,仅将 loader 应用在实际需要将其转换的模块:
51+ 使用 ` include ` 字段将 loader 应用在实际需要将其转换的模块:
5152
5253``` js
5354const path = require (' path' );
@@ -66,7 +67,7 @@ module.exports = {
6667};
6768```
6869
69- ### 引导( bootstrap) $#bootstrap$
70+ ### 引导( bootstrap) $#bootstrap$
7071
7172每个额外的 loader/plugin 都有其启动时间。尽量少地使用工具。
7273
@@ -75,92 +76,92 @@ module.exports = {
7576以下步骤可以提高解析速度:
7677
7778- 减少 ` resolve.modules ` , ` resolve.extensions ` , ` resolve.mainFiles ` , ` resolve.descriptionFiles ` 中条目数量,因为他们会增加文件系统调用的次数。
78- - 如果你不使用 symlinks(例如 ` npm link ` 或者 ` yarn link ` ),可以设置 ` resolve.symlinks: false ` 。
79- - 如果你使用自定义 resolve plugin 规则,并且没有指定 context 上下文 ,可以设置 ` resolve.cacheWithContext: false ` 。
79+ - 如果不使用 symlinks(例如 ` npm link ` 或者 ` yarn link ` ),可以设置 ` resolve.symlinks: false ` 。
80+ - 如果使用自定义解析插件规则,并且没有指定上下文 ,可以设置 ` resolve.cacheWithContext: false ` 。
8081
8182### dll $#dlls$
8283
83- 使用 ` DllPlugin ` 为更改不频繁的代码生成单独的编译结果。这可以提高应用程序的编译速度,尽管它增加了构建过程的复杂度 。
84+ 使用 ` DllPlugin ` 为更改不频繁的代码生成单独的编译结果。尽管这增加了构建过程的复杂度,但是可以提高应用程序的编译速度 。
8485
85- ### 小即是快(smaller = faster) $#smaller--faster$
86+ ### 小即是快 $#smaller--faster$
8687
87- 减少编译结果的整体大小,以提高构建性能 。尽量保持 chunk 体积小。
88+ 减少编译结果的整体大小以提高构建性能 。尽量保持 chunk 体积小。
8889
89- - 使用数量更少/体积更小的 library。
90+ - 使用数量更少/体积更小的库
9091- 在多页面应用程序中使用 ` SplitChunksPlugin ` 。
91- - 在多页面应用程序中使用 ` SplitChunksPlugin ` ,并开启 ` async ` 模式。
92- - 移除未引用代码 。
93- - 只编译你当前正在开发的那些代码 。
92+ - 在多页面应用程序中使用 ` SplitChunksPlugin ` ,并开启 ` async ` 模式。
93+ - 移除未使用的代码 。
94+ - 只编译当前正在开发的那些代码 。
9495
95- ### worker 池(worker pool) $#worker-pool$
96+ ### worker 池 $#worker-pool$
9697
97- ` thread-loader ` 可以将非常消耗资源的 loader 分流给一个 worker pool 。
98+ ` thread-loader ` 可以将非常消耗资源的 loader 分流给 worker 池 。
9899
99- W> 不要使用太多的 worker,因为 Node.js 的 runtime 和 loader 都有启动开销。最小化 worker 和 main process(主进程) 之间的模块传输。进程间通讯(IPC, inter process communication)是非常消耗资源的 。
100+ W> 由于 Node.js 运行时与 loader 都有启动开销,尽量不要使用太多 worker,尝试最小化 worker 与主进程之间的模块传输。进程间通讯非常消耗资源 。
100101
101102### 持久化缓存 $#persistent-cache$
102103
103104在 webpack 配置中使用 [ ` cache ` ] ( /configuration/cache ) 选项。使用 ` package.json ` 中的 ` "postinstall" ` 清除缓存目录。
104105
105- T> 我们支持 yarn PnP v3 [ ` yarn 2 berry ` ] ( https://yarnpkg.com/features/pnp ) ,来进行持久缓存 。
106+ T> 我们支持使用 yarn PnP v3 [ ` yarn 2 berry ` ] ( https://yarnpkg.com/features/pnp ) 进行持久缓存 。
106107
107108### 自定义 plugin/loader $#custom-pluginsloaders$
108109
109- 对它们进行概要分析,以免在此处引入性能问题 。
110+ 请在使用自定义 plugin/loader 前对其进行概要分析以免在此处引入性能问题 。
110111
111- ### Progress plugin $#progress-plugin$
112+ ### Progress 插件 $#progress-plugin$
112113
113- 将 ` ProgressPlugin ` 从 webpack 中删除,可以缩短构建时间 。请注意,` ProgressPlugin ` 可能不会为快速构建提供太多价值,因此,请权衡利弊再使用 。
114+ 将 ` ProgressPlugin ` 从 webpack 中删除可以缩短构建时间 。请注意,` ProgressPlugin ` 可能不会为快速构建提供太多价值,因此请权衡利弊再使用 。
114115
115116---
116117
117118## 开发环境 $#development$
118119
119- 以下步骤对于 _ 开发环境 _ 特别有帮助 。
120+ 以下步骤在开发环境中特别有帮助 。
120121
121122### 增量编译 $#incremental-builds$
122123
123- 使用 webpack 的 watch mode(监听模式)。而不使用其他工具来 watch 文件和调用 webpack 。内置的 watch mode 会记录时间戳并将此信息传递给 compilation 以使缓存失效 。
124+ 使用 webpack 的观察模式,而非使用其他工具观察文件、调用 webpack。内置的观察模式会记录时间戳并将此信息传递给编译以使缓存失效 。
124125
125- 在某些配置环境中,watch mode 会回退到 poll mode(轮询模式)。监听许多文件会导致 CPU 大量负载。在这些情况下,可以使用 ` watchOptions.poll ` 来增加轮询的间隔时间 。
126+ 在某些配置环境中,观察模式会回退到轮询模式。监听过量文件会导致 CPU 大量负载。此时可以使用 ` watchOptions.poll ` 增加轮询的间隔时间 。
126127
127128### 在内存中编译 $#compile-in-memory$
128129
129- 下面几个工具通过在内存中 (而不是写入磁盘)编译和 serve 资源来提高性能 :
130+ 使用下面几个工具实现在内存中 (而不是写入磁盘)编译并部署可访问资源以提高性能 :
130131
131132- ` webpack-dev-server `
132133- ` webpack-hot-middleware `
133134- ` webpack-dev-middleware `
134135
135- ### stats.toJson 加速 $#statstojson-speed$
136+ ### 加速 stats.toJson $#statstojson-speed$
136137
137- webpack 4 默认使用 ` stats.toJson() ` 输出大量数据。除非在增量步骤中做必要的统计 ,否则请避免获取 ` stats ` 对象的部分内容。` webpack-dev-server ` 在 v3.1.3 以后的版本,包含一个重要的性能修复,即最小化每个增量构建步骤中,从 ` stats ` 对象获取的数据量。
138+ webpack 4 默认使用 ` stats.toJson() ` 输出大量数据。但是除非在增量步骤中做必要的统计 ,否则请避免获取 ` stats ` 对象的部分内容。` webpack-dev-server ` 在 v3.1.3 以后的版本,包含一个重要的性能修复,即最小化每个增量构建步骤中会从 ` stats ` 对象获取的数据量。
138139
139- ### Devtool $#devtool$
140+ ### devtool $#devtool$
140141
141- 需要注意的是不同的 ` devtool ` 设置,会导致性能差异 。
142+ 不同的 ` devtool ` 设置会导致性能差异 。
142143
143- - ` "eval" ` 具有最好的性能,但并不能帮助你转译代码 。
144- - 如果你能接受稍差一些的 map 质量 ,可以使用 ` cheap-source-map ` 变体配置来提高性能
144+ - ` "eval" ` 具有最好的性能,但并不能帮助转译代码 。
145+ - 如果能接受稍差一些的映射质量 ,可以使用 ` cheap-source-map ` 变体配置提高性能。
145146- 使用 ` eval-source-map ` 变体配置进行增量编译。
146147
147148T> 在大多数情况下,最佳选择是 ` eval-cheap-module-source-map ` 。
148149
149- ### 避免在生产环境下才会用到的工具 $#avoid-production-specific-tooling$
150+ ### 避免使用在生产环境下才会用到的工具 $#avoid-production-specific-tooling$
150151
151- 某些 utility, plugin 和 loader 都只用于生产环境。例如,在开发环境下使用 ` TerserPlugin ` 来 minify(压缩) 和 mangle(混淆破坏) 代码是没有意义的。通常在开发环境下,应该排除以下这些工具 :
152+ 某些工具、插件与 loader 都只用于生产环境。例如,在开发环境下使用 ` TerserPlugin ` 压缩和破坏代码是没有意义的。通常应该在开发环境下排除以下工具 :
152153
153154- ` TerserPlugin `
154155- ` [fullhash] ` /` [chunkhash] ` /` [contenthash] `
155156- ` AggressiveSplittingPlugin `
156157- ` AggressiveMergingPlugin `
157158- ` ModuleConcatenationPlugin `
158159
159- ### 最小化 entry chunk $#minimal-entry-chunk$
160+ ### 最小化入口 chunk $#minimal-entry-chunk$
160161
161- Webpack 只会在文件系统中输出已经更新的 chunk。某些配置选项 (HMR, ` output.chunkFilename ` 的 ` [name] ` /` [chunkhash]/[contenthash] ` ,` [fullhash] ` )来说,除了对已经更新的 chunk 无效之外,对于 entry chunk 也不会生效 。
162+ webpack 只会在文件系统中输出已经更新的 chunk。对于某些配置选项 (HMR, ` output.chunkFilename ` 中的 ` [name] ` /` [chunkhash]/[contenthash] ` ,` [fullhash] ` )而言,除了已更新的 chunk 之外,入口 chunk 也会失效 。
162163
163- 确保在生成 entry chunk 时,尽量减少其体积以提高性能 。下面的配置为运行时代码创建了一个额外的 chunk,所以它的生成代价较低:
164+ 尽量在生成入口 chunk 时减小其体积以提高性能 。下面的配置为运行时代码创建了一个额外的 chunk,所以它的生成代价较低:
164165
165166``` js
166167module .exports = {
@@ -173,7 +174,7 @@ module.exports = {
173174
174175### 避免额外的优化步骤 $#avoid-extra-optimization-steps$
175176
176- Webpack 通过执行额外的算法任务,来优化输出结果的体积和加载性能 。这些优化适用于小型代码库,但是在大型代码库中却非常耗费性能:
177+ webpack 通过执行额外的算法任务优化输出结果的体积和加载的性能 。这些优化适用于小型代码库,但是在大型代码库中却非常耗费性能:
177178
178179``` js
179180module .exports = {
@@ -188,7 +189,7 @@ module.exports = {
188189
189190### 输出结果不携带路径信息 $#output-without-path-info$
190191
191- Webpack 会在输出的 bundle 中生成路径信息。然而,在打包数千个模块的项目中,这会导致造成垃圾回收性能压力 。在 ` options.output.pathinfo ` 设置中关闭 :
192+ webpack 会在输出的 bundle 中生成路径信息。然而,在打包数千个模块的项目中,这会带来垃圾回收性能的压力 。在 ` options.output.pathinfo ` 设置中关闭它 :
192193
193194``` js
194195module .exports = {
@@ -201,13 +202,13 @@ module.exports = {
201202
202203### Node.js 版本 8.9.10-9.11.1 $#nodejs-versions-8910-9111$
203204
204- Node.js v8.9.10 - v9.11.1 中的 ES2015 ` Map ` 和 ` Set ` 实现,存在 [ 性能回退] ( https://github.com/nodejs/node/issues/19769 ) 。Webpack 大量地使用这些数据结构,因此这次回退也会影响编译时间 。
205+ Node.js v8.9.10 - v9.11.1 中的 ES2015 ` Map ` 和 ` Set ` 实现,存在 [ 性能回退] ( https://github.com/nodejs/node/issues/19769 ) 。webpack 大量地使用这些数据结构,因此这些回退也会影响编译时间 。
205206
206207之前和之后的 Node.js 版本不受影响。
207208
208209### TypeScript loader $#typescript-loader$
209210
210- 你可以为 loader 传入 ` transpileOnly ` 选项,以缩短使用 ` ts-loader ` 时的构建时间。使用此选项,会关闭类型检查 。如果要再次开启类型检查,请使用 [ ` ForkTsCheckerWebpackPlugin ` ] ( https://www.npmjs.com/package/fork-ts-checker-webpack-plugin ) 。使用此插件会将检查过程移至单独的进程,可以加快 TypeScript 的类型检查和 ESLint 插入的速度。
211+ 向 loader 传入 ` transpileOnly ` 选项,以缩短使用 ` ts-loader ` 时的构建时间。使用此选项会关闭类型检查 。如果要再次开启类型检查,请使用 [ ` ForkTsCheckerWebpackPlugin ` ] ( https://www.npmjs.com/package/fork-ts-checker-webpack-plugin ) 。使用此插件会将检查过程移至单独的进程,这样可以加快 TypeScript 的类型检查和 ESLint 插入的速度。
211212
212213``` js
213214module .exports = {
@@ -224,36 +225,36 @@ module.exports = {
224225};
225226```
226227
227- T> 这是一个关于 ` ts-loader ` [ 完整示例] ( https://github.com/TypeStrong/ts-loader/tree/master/examples/fork-ts-checker-webpack-plugin ) 的 Github 仓库。
228+ T> 这是一个关于 ` ts-loader ` [ 完整示例] ( https://github.com/TypeStrong/ts-loader/tree/master/examples/fork-ts-checker-webpack-plugin ) 的 GitHub 仓库。
228229
229230---
230231
231232## 生产环境 $#production$
232233
233- 以下步骤对于 _ 生产环境 _ 特别有帮助 。
234+ 以下步骤在生产环境中特别有帮助 。
234235
235- W> ** 不要为了很小的性能收益,牺牲应用程序的质量! ** 注意,在大多数情况下,优化代码质量比构建性能更重要。
236+ W> ** 不要为了很小的性能收益,牺牲应用程序的质量** ! 注意,在大多数情况下,优化代码质量比构建性能更重要。
236237
237- ### Source Maps $#source-maps$
238+ ### source map $#source-maps$
238239
239- source map 相当消耗资源。你真的需要它们?
240+ source map 相当消耗资源,请确保真的需要它们。
240241
241242---
242243
243244## 工具相关问题 $#specific-tooling-issues$
244245
245246下列工具存在某些可能会降低构建性能的问题:
246247
247- ### Babel $#babel$
248+ ### babel $#babel$
248249
249250- 最小化项目中的 preset/plugin 数量。
250251
251252### TypeScript $#typescript$
252253
253254- 在单独的进程中使用 ` fork-ts-checker-webpack-plugin ` 进行类型检查。
254255- 配置 loader 跳过类型检查。
255- - 使用 ` ts-loader ` 时,设置 ` happyPackMode: true ` / ` transpileOnly: true ` 。
256+ - 使用 ` ts-loader ` 时,设置 ` happyPackMode: true ` 或 ` transpileOnly: true ` 。
256257
257- ### Sass $#sass$
258+ ### sass $#sass$
258259
259- - ` node-sass ` 中有个来自 Node.js 线程池的阻塞线程的 bug。 当使用 ` thread-loader ` 时,需要设置 ` workerParallelJobs: 2 ` 。
260+ - ` node-sass ` 中存在 bug,会阻塞 Node.js 线程池中的线程。 当使用 ` thread-loader ` 时,需要设置 ` workerParallelJobs: 2 ` 。
0 commit comments