-
Notifications
You must be signed in to change notification settings - Fork 1.1k
docs(cn): translate src/content/plugins/split-chunks-plugins.md #854
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Deploy preview for cn-webpack ready! Built with commit 414603c |
开始看了~ |
👌 |
重新合并了 |
- New chunk would be bigger than 20kb (before min+gz) | ||
- Maximum number of parallel requests when loading chunks on demand would be lower or equal to 30 | ||
- Maximum number of parallel requests at initial page load would be lower or equal to 30 | ||
- 新的 chunk 可以被多个 chunk 分享,或者它来自于 node_modules 文件夹 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 新的 chunk 可以被多个 chunk 分享,或者它来自于 node_modules 文件夹 | |
- 新的 chunk 可以被多个 chunk 分享,或者模块来自于 node_modules 文件夹 |
|
||
webpack provides a set of options for developers that want more control over this functionality. | ||
webpack 为希望对该功能进行更多控制的开发人员提供了一组选项。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
webpack 为希望对该功能进行更多控制的开发人员提供了一组选项。 | |
webpack 为希望对该功能进行更多控制的开发者提供了一组选项。 |
|
||
W> The default configuration was chosen to fit web performance best practices, but the optimal strategy for your project might differ. If you're changing the configuration, you should measure the impact of your changes to ensure there's a real benefit. | ||
W> 选择了默认配置以适合 Web 性能最佳实践,但是项目的最佳策略可能有所不同。如果要更改配置,则应评估所做更改的影响,以确保有真正的收益。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
W> 选择了默认配置以适合 Web 性能最佳实践,但是项目的最佳策略可能有所不同。如果要更改配置,则应评估所做更改的影响,以确保有真正的收益。 | |
W> 选择默认配置是为了符合 web 性能最佳实践,但是项目的最佳策略可能有所不同。如果要更改配置,则应评估所做更改的影响,以确保有真正的收益。 |
@@ -85,21 +85,21 @@ module.exports = { | |||
}; | |||
``` | |||
|
|||
W> When files paths are processed by webpack, they always contain `/` on Unix systems and `\` on Windows. That's why using `[\\/]` in `{cacheGroup}.test` fields is necessary to represent a path separator. `/` or `\` in `{cacheGroup}.test` will cause issues when used cross-platform. | |||
W> 当 webpack 处理文件路径时,它们始终包含 `/` 在 Unix 系统和 `\` 在 Windows 上。这就是为什么 `[\\/]` 在 `{cacheGroup}.test` 字段中使用 in 来表示路径分隔符的原因。`/` 或 `\` in `{cacheGroup}.test` 会在跨平台使用时引起问题。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
W> 当 webpack 处理文件路径时,它们始终包含 `/` 在 Unix 系统和 `\` 在 Windows 上。这就是为什么 `[\\/]` 在 `{cacheGroup}.test` 字段中使用 in 来表示路径分隔符的原因。`/` 或 `\` in `{cacheGroup}.test` 会在跨平台使用时引起问题。 | |
W> 当 webpack 处理文件路径时,它们始终包含Unix 系统中的 `/` 和 Windows 系统中的 `\`。这就是为什么在 `{cacheGroup}.test` 字段中使用 `[\\/]` 来表示路径分隔符。`{cacheGroup}.test` 中的 `/` 或 `\` 会在跨平台使用时引起问题。 |
|
||
W> Since webpack 5, passing an entry name to `{cacheGroup}.test` and using a name of an existing chunk for `{cacheGroup}.name` is no longer allowed. | ||
W> 从 webpack 5 开始,不再允许将条目名称传递给 `{cacheGroup}.test` 现有的 chunk 并使用现有的 chunk 的名称 `{cacheGroup}.name`。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
W> 从 webpack 5 开始,不再允许将条目名称传递给 `{cacheGroup}.test` 现有的 chunk 并使用现有的 chunk 的名称 `{cacheGroup}.name`。 | |
W> 从 webpack 5 开始,不再允许将 entry 名称传递给 `{cacheGroup}.test` 或者为 `{cacheGroup}.name` 使用现有的 chunk 的名称。 |
|
||
Why: | ||
为什么? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
为什么? | |
为什么: |
|
||
What's the reasoning behind this? `react` probably won't change as often as your application code. By moving it into a separate chunk this chunk can be cached separately from your app code (assuming you are using chunkhash, records, Cache-Control or other long term cache approach). | ||
这背后的原因是什么?`react` 可能不会像您的应用程序代码那样频繁地更改。通过将其移动到单独的 chunk 中,可以将该 chunk 与应用程序代码分开进行缓存(假设您使用的是 chunkhash,records,Cache-Control 或其他长期缓存方法)。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这背后的原因是什么?`react` 可能不会像您的应用程序代码那样频繁地更改。通过将其移动到单独的 chunk 中,可以将该 chunk 与应用程序代码分开进行缓存(假设您使用的是 chunkhash,records,Cache-Control 或其他长期缓存方法)。 | |
这背后的原因是什么?`react` 可能不会像你的应用程序代码那样频繁地更改。通过将其移动到单独的 chunk 中,可以将该 chunk 与应用程序代码分开进行缓存(假设你使用的是 chunkhash,records,Cache-Control 或其他长期缓存方法)。 |
|
||
Why: | ||
为什么? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
为什么? | |
为什么: |
@@ -494,7 +494,7 @@ module.exports = { | |||
|
|||
`boolean = false` | |||
|
|||
Tells webpack to ignore [`splitChunks.minSize`](#splitchunksminsize), [`splitChunks.minChunks`](#splitchunksminchunks), [`splitChunks.maxAsyncRequests`](#splitchunksmaxasyncrequests) and [`splitChunks.maxInitialRequests`](#splitchunksmaxinitialrequests) options and always create chunks for this cache group. | |||
告诉 webpack 忽略 [`splitChunks.minSize`](#splitchunksminsize),[`splitChunks.minChunks`](#splitchunksminchunks),[`splitChunks.maxAsyncRequests`](#splitchunksmaxasyncrequests) 和 [`splitChunks.maxInitialRequests`](#splitchunksmaxinitialrequests) 选项,并始终为此缓存组创建 chunks。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
告诉 webpack 忽略 [`splitChunks.minSize`](#splitchunksminsize),[`splitChunks.minChunks`](#splitchunksminchunks),[`splitChunks.maxAsyncRequests`](#splitchunksmaxasyncrequests) 和 [`splitChunks.maxInitialRequests`](#splitchunksmaxinitialrequests) 选项,并始终为此缓存组创建 chunks。 | |
告诉 webpack 忽略 [`splitChunks.minSize`](#splitchunksminsize)、[`splitChunks.minChunks`](#splitchunksminchunks)、[`splitChunks.maxAsyncRequests`](#splitchunksmaxasyncrequests) 和 [`splitChunks.maxInitialRequests`](#splitchunksmaxinitialrequests) 选项,并始终为此缓存组创建 chunk。 |
@@ -292,7 +292,7 @@ module.exports = { | |||
|
|||
### `splitChunks.cacheGroups` {#splitchunkscachegroups} | |||
|
|||
Cache groups can inherit and/or override any options from `splitChunks.*`; but `test`, `priority` and `reuseExistingChunk` can only be configured on cache group level. To disable any of the default cache groups, set them to `false`. | |||
缓存组可以继承和 / 或覆盖来自 `splitChunks。*` 的任何选项。但是 `test`,`priority` 和 `reuseExistingChunk` 只能在缓存组级别上进行配置。要禁用任何默认缓存组,请将它们设置为 `false`。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
缓存组可以继承和 / 或覆盖来自 `splitChunks。*` 的任何选项。但是 `test`,`priority` 和 `reuseExistingChunk` 只能在缓存组级别上进行配置。要禁用任何默认缓存组,请将它们设置为 `false`。 | |
缓存组可以继承和/或覆盖来自 `splitChunks.*` 的任何选项。但是 `test`、`priority` 和 `reuseExistingChunk` 只能在缓存组级别上进行配置。将它们设置为 `false`以禁用任何默认缓存组。 |
麻烦尽快进行修改,翻译之后可以自己读一下看看是否有不合适的地方 @weiyuan0609 |
已调整 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
请检查下全文,翻译中不要出现「您」这样的敬词
@@ -24,34 +24,35 @@ related: | |||
url: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366 | |||
--- | |||
|
|||
Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The `CommonsChunkPlugin` was used to avoid duplicated dependencies across them, but further optimizations were not possible. | |||
最初,chunks(以及内部导入的模块)是通过内部 webpack 图谱中的父子关系关联的。`CommonsChunkPlugin` 曾被用来避免他们之间的重复依赖,但是进一步的优化是不可能的。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
最初,chunks(以及内部导入的模块)是通过内部 webpack 图谱中的父子关系关联的。`CommonsChunkPlugin` 曾被用来避免他们之间的重复依赖,但是进一步的优化是不可能的。 | |
最初,chunks(以及内部导入的模块)是通过内部 webpack 图谱中的父子关系关联的。`CommonsChunkPlugin` 曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化。 |
|
||
## Defaults {#defaults} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里多了一行,要保持行行对应哈
|
||
Out of the box `SplitChunksPlugin` should work well for most users. | ||
对于大部分用户来说,`SplitChunksPlugin` 是开箱即用的,而且很适用。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
对于大部分用户来说,`SplitChunksPlugin` 是开箱即用的,而且很适用。 | |
开箱即用的 `SplitChunksPlugin` 对于大部分用户来说很好用。 |
- New chunk would be bigger than 20kb (before min+gz) | ||
- Maximum number of parallel requests when loading chunks on demand would be lower or equal to 30 | ||
- Maximum number of parallel requests at initial page load would be lower or equal to 30 | ||
- 新的 chunk 可以被多个 chunk 分享,或者模块来自于 node_modules 文件夹 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 新的 chunk 可以被多个 chunk 分享,或者模块来自于 node_modules 文件夹 | |
- 新的 chunk 可以被共享,或者模块来自于 `node_modules` 文件夹 |
@@ -85,21 +85,21 @@ module.exports = { | |||
}; | |||
``` | |||
|
|||
W> When files paths are processed by webpack, they always contain `/` on Unix systems and `\` on Windows. That's why using `[\\/]` in `{cacheGroup}.test` fields is necessary to represent a path separator. `/` or `\` in `{cacheGroup}.test` will cause issues when used cross-platform. | |||
W> 当 webpack 处理文件路径时,它们始终包含 Unix 系统中的 `/` 和 Windows 系统中的 `\`。这就是为什么在 `{cacheGroup}.test` 字段中使用 `[\\/]` 来表示路径分隔符的原因。`{cacheGroup}.test` 中的 `/` 或 `\` 会在跨平台使用时引起问题。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
W> 当 webpack 处理文件路径时,它们始终包含 Unix 系统中的 `/` 和 Windows 系统中的 `\`。这就是为什么在 `{cacheGroup}.test` 字段中使用 `[\\/]` 来表示路径分隔符的原因。`{cacheGroup}.test` 中的 `/` 或 `\` 会在跨平台使用时引起问题。 | |
W> 当 webpack 处理文件路径时,它们始终包含 Unix 系统中的 `/` 和 Windows 系统中的 `\`。这就是为什么在 `{cacheGroup}.test` 字段中使用 `[\\/]` 来表示路径分隔符的原因。`{cacheGroup}.test` 中的 `/` 或 `\` 会在跨平台使用时产生问题。 |
|
||
### `splitChunks.automaticNameDelimiter` {#splitchunksautomaticnamedelimiter} | ||
|
||
`string = '~'` | ||
|
||
By default webpack will generate names using origin and name of the chunk (e.g. `vendors~main.js`). This option lets you specify the delimiter to use for the generated names. | ||
默认情况下,webpack 将使用 chunk 的来源和名称生成名称(例如 `vendors~main.js`)。此选项使你可以指定用于生成名称的定界符。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
默认情况下,webpack 将使用 chunk 的来源和名称生成名称(例如 `vendors~main.js`)。此选项使你可以指定用于生成名称的定界符。 | |
默认情况下,webpack 将使用 chunk 的来源和名称生成名称(例如 `vendors~main.js`)。此选项使你可以指定用于生成名称的分隔符。 |
|
||
### `splitChunks.chunks` {#splitchunkschunks} | ||
|
||
`string = 'async'` `function (chunk)` | ||
|
||
This indicates which chunks will be selected for optimization. When a string is provided, valid values are `all`, `async`, and `initial`. Providing `all` can be particularly powerful, because it means that chunks can be shared even between async and non-async chunks. | ||
这表明将选择哪些 chunk 进行优化。当提供一个字符串,有效值为 `all`,`async` 和 `initial`。提供 `all` 可能特别强大,因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这表明将选择哪些 chunk 进行优化。当提供一个字符串,有效值为 `all`,`async` 和 `initial`。提供 `all` 可能特别强大,因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。 | |
这表明将选择哪些 chunk 进行优化。当提供一个字符串,有效值为 `all`,`async` 和 `initial`。设置为 `all` 可能特别强大,因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。 |
@@ -311,13 +311,13 @@ module.exports = { | |||
|
|||
`number = -20` | |||
|
|||
A module can belong to multiple cache groups. The optimization will prefer the cache group with a higher `priority`. The default groups have a negative priority to allow custom groups to take higher priority (default value is `0` for custom groups). | |||
一个模块可以属于多个缓存组。优化将优先考虑具有更高 `priority` 的缓存组 默认组的优先级为负,以允许自定义组获得更高的优先级(自定义组的默认值为 `0`)。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
一个模块可以属于多个缓存组。优化将优先考虑具有更高 `priority` 的缓存组 默认组的优先级为负,以允许自定义组获得更高的优先级(自定义组的默认值为 `0`)。 | |
一个模块可以属于多个缓存组。优化将优先考虑具有更高 `priority`(优先级)的缓存组。默认组的优先级为负,以允许自定义组获得更高的优先级(自定义组的默认值为 `0`)。 |
|
||
#### `splitChunks.cacheGroups.{cacheGroup}.reuseExistingChunk` {#splitchunkscachegroupscachegroupreuseexistingchunk} | ||
|
||
`boolean = true` | ||
|
||
If the current chunk contains modules already split out from the main bundle, it will be reused instead of a new one being generated. This can impact the resulting file name of the chunk. | ||
如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块。 这可能会影响 chunk 的结果文件名。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块。 这可能会影响 chunk 的结果文件名。 | |
如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块。这可能会影响 chunk 的结果文件名。 |
|
||
Providing a function to`{cacheGroup}.test`: | ||
为 `{cacheGroup}.test` 提供一个功能: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
为 `{cacheGroup}.test` 提供一个功能: | |
为 `{cacheGroup}.test` 提供一个函数: |
@@ -552,16 +552,16 @@ import 'react'; | |||
//... | |||
``` | |||
|
|||
**Result:** A separate chunk would be created containing `react`. At the import call this chunk is loaded in parallel to the original chunk containing `./a`. | |||
__结果:__ 将创建一个单独的包含 `react` 的 chunk。在导入调用中,此 chunk 并行加载到包含 `./a` 的原始 chunk 中。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
__结果:__ 将创建一个单独的包含 `react` 的 chunk。在导入调用中,此 chunk 并行加载到包含 `./a` 的原始 chunk 中。 | |
**结果:** 将创建一个单独的包含 `react` 的 chunk。在导入调用中,此 chunk 并行加载到包含 `./a` 的原始 chunk 中。 |
@@ -588,20 +588,20 @@ import './more-helpers'; // more-helpers is also 40kb in size | |||
//... | |||
``` | |||
|
|||
**Result:** A separate chunk would be created containing `./helpers` and all dependencies of it. At the import calls this chunk is loaded in parallel to the original chunks. | |||
__结果:__ 将创建一个单独的 chunk,其中包含 `./helpers` 及其所有依赖项。在导入调用时,此 chunk 与原始 chunks 并行加载。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
__结果:__ 将创建一个单独的 chunk,其中包含 `./helpers` 及其所有依赖项。在导入调用时,此 chunk 与原始 chunks 并行加载。 | |
**结果:** 将创建一个单独的 chunk,其中包含 `./helpers` 及其所有依赖项。在导入调用时,此 chunk 与原始 chunks 并行加载。 |
已调整 |
Co-authored-by: Jacob <[email protected]>
describe your changes...