Skip to content

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

Merged
merged 30 commits into from
Mar 3, 2021

Conversation

weiyuan0609
Copy link

describe your changes...

  • Read and sign the CLA. PRs that haven't signed it won't be accepted.
  • Make sure your PR complies with the writer's guide.
  • Review the diff carefully as sometimes this can reveal issues.
  • Do not abandon your Pull Request: Stale Pull Requests.
  • Remove these instructions from your PR as they are for your eyes only.

@netlify
Copy link

netlify bot commented Sep 24, 2020

Deploy preview for cn-webpack ready!

Built with commit 414603c

https://deploy-preview-854--cn-webpack.netlify.app

@QC-L
Copy link
Member

QC-L commented Oct 25, 2020

开始看了~

@weiyuan0609
Copy link
Author

开始看了~

👌

@weiyuan0609
Copy link
Author

重新合并了

- 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 文件夹
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- 新的 chunk 可以被多个 chunk 分享,或者它来自于 node_modules 文件夹
- 新的 chunk 可以被多个 chunk 分享,或者模块来自于 node_modules 文件夹


webpack provides a set of options for developers that want more control over this functionality.
webpack 为希望对该功能进行更多控制的开发人员提供了一组选项。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 性能最佳实践,但是项目的最佳策略可能有所不同。如果要更改配置,则应评估所做更改的影响,以确保有真正的收益。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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` 会在跨平台使用时引起问题。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
W> 从 webpack 5 开始,不再允许将条目名称传递给 `{cacheGroup}.test` 现有的 chunk 并使用现有的 chunk 的名称 `{cacheGroup}.name`
W> 从 webpack 5 开始,不再允许将 entry 名称传递给 `{cacheGroup}.test` 或者为 `{cacheGroup}.name` 使用现有的 chunk 的名称


Why:
为什么?
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
为什么
为什么


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 与应用程序代码分开进行缓存(假设您使用的是 chunkhashrecordsCache-Control 或其他长期缓存方法)。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
这背后的原因是什么?`react` 可能不会像您的应用程序代码那样频繁地更改。通过将其移动到单独的 chunk 中,可以将该 chunk 与应用程序代码分开进行缓存(假设您使用的是 chunkhash,records,Cache-Control 或其他长期缓存方法)。
这背后的原因是什么?`react` 可能不会像你的应用程序代码那样频繁地更改。通过将其移动到单独的 chunk 中,可以将该 chunk 与应用程序代码分开进行缓存(假设你使用的是 chunkhash,records,Cache-Control 或其他长期缓存方法)。


Why:
为什么?
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
为什么
为什么

@@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
告诉 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`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
缓存组可以继承和 / 或覆盖来自 `splitChunks*` 的任何选项。但是 `test``priority``reuseExistingChunk` 只能在缓存组级别上进行配置。要禁用任何默认缓存组,请将它们设置为 `false`
缓存组可以继承和/或覆盖来自 `splitChunks.*` 的任何选项。但是 `test``priority``reuseExistingChunk` 只能在缓存组级别上进行配置。将它们设置为 `false`以禁用任何默认缓存组

@jacob-lcs
Copy link
Member

麻烦尽快进行修改,翻译之后可以自己读一下看看是否有不合适的地方 @weiyuan0609

@weiyuan0609
Copy link
Author

已调整

Copy link
Member

@jacob-lcs jacob-lcs left a 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` 曾被用来避免他们之间的重复依赖,但是进一步的优化是不可能的。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
最初,chunks(以及内部导入的模块)是通过内部 webpack 图谱中的父子关系关联的。`CommonsChunkPlugin` 曾被用来避免他们之间的重复依赖,但是进一步的优化是不可能的
最初,chunks(以及内部导入的模块)是通过内部 webpack 图谱中的父子关系关联的。`CommonsChunkPlugin` 曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化


## Defaults {#defaults}

Copy link
Member

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` 是开箱即用的,而且很适用。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
对于大部分用户来说,`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 文件夹
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- 新的 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` 中的 `/` `\` 会在跨平台使用时引起问题。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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`)。此选项使你可以指定用于生成名称的定界符。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
默认情况下,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 之间共享。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
这表明将选择哪些 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`)。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
一个模块可以属于多个缓存组。优化将优先考虑具有更高 `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 的结果文件名。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块。 这可能会影响 chunk 的结果文件名。
如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块。这可能会影响 chunk 的结果文件名。


Providing a function to`{cacheGroup}.test`:
`{cacheGroup}.test` 提供一个功能:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`{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 中。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
__结果:__ 将创建一个单独的包含 `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 并行加载。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
__结果:__ 将创建一个单独的 chunk,其中包含 `./helpers` 及其所有依赖项。在导入调用时,此 chunk 与原始 chunks 并行加载。
**结果:** 将创建一个单独的 chunk,其中包含 `./helpers` 及其所有依赖项。在导入调用时,此 chunk 与原始 chunks 并行加载。

@weiyuan0609
Copy link
Author

已调整

@QC-L QC-L merged commit 2014371 into docschina:cn Mar 3, 2021
@jacob-lcs jacob-lcs mentioned this pull request Mar 3, 2021
73 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants