diff --git a/src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.mdx index d6d12bb9d71f..41c547f1b097 100644 --- a/src/content/guides/code-splitting.mdx +++ b/src/content/guides/code-splitting.mdx @@ -51,17 +51,17 @@ related: T> 本指南继续沿用 [起步](/guides/getting-started) 中的示例代码。请确保你已熟悉这些指南中提供的示例以及 [管理输出](/guides/output-management/) 章节。 -代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle、控制资源加载优先级,如果使用合理,会极大影响加载时间。 +代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle、控制资源加载优先级,如果使用合理,会极大减小加载时间。 常用的代码分离方法有三种: - **入口起点**:使用 [`entry`](/configuration/entry-context) 配置手动地分离代码。 -- **防止重复**:使用 [Entry dependencies](/configuration/entry-context/#dependencies) 或者 [`SplitChunksPlugin`](/plugins/split-chunks-plugin) 去重和分离 chunk。 -- **动态导入**:通过模块的内联函数调用来分离代码。 +- **防止重复**:使用 [入口依赖](/configuration/entry-context/#dependencies) 或者 [`SplitChunksPlugin`](/plugins/split-chunks-plugin) 去重和分离 chunk。 +- **动态导入**:通过模块的内联函数调用分离代码。 ## 入口起点 $#entry-points$ -这是迄今为止最简单直观的分离代码的方式。不过,这种方式手动配置较多,并有一些我们将会解决的隐患。先来看看如何从 main bundle 中分离另一个模块: +这是迄今为止最简单直观的分离代码的方式。不过,这种方式手动配置较多,并有一些隐患。不过,我们将会介绍如何解决这些隐患。先来看看如何从 main bundle 中分离另一个模块: **project** @@ -120,18 +120,18 @@ cacheable modules 530 KiB webpack 5.4.0 compiled successfully in 245 ms ``` -正如前面提到的,这种方式存在一些隐患: +正如前面所提及,这种方式存在一些隐患: -- 如果入口 chunk 之间包含一些重复的模块,那些重复模块都会被引入到各个 bundle 中。 -- 这种方法不够灵活,并且不能动态地将核心应用程序逻辑中的代码拆分出来。 +- 如果入口 chunk 之间包含一些重复的模块,那么这些重复模块都会被引入到各个 bundle 中。 +- 这种方法不够灵活,并且不能动态地拆分应用程序逻辑中的核心代码。 -以上两点中,第一点对我们的示例来说无疑是个问题,因为之前我们在 `./src/index.js` 中也引入过 `lodash`,这样就在两个 bundle 中造成重复引用。在下一章节会介绍如何移除重复的模块。 +以上两点中,第一点所对应的问题已经在我们上面的实例中体现出来了。除了 `./src/another-module.js`,我们也曾在 `./src/index.js` 中引入过 `lodash`,这就导致了重复引用。下一章节会介绍如何移除重复的模块。 ## 防止重复 $#prevent-duplication$ ### 入口依赖 $#entry-dependencies$ -配置 [`dependOn`](/configuration/entry-context/#dependencies) 选项,这样可以在多个 chunk 之间共享模块: +在配置文件中配置 [`dependOn`](/configuration/entry-context/#dependencies) 选项,以在多个 chunk 之间共享模块: **webpack.config.js** @@ -160,7 +160,7 @@ webpack 5.4.0 compiled successfully in 245 ms }; ``` -如果我们要在一个 HTML 页面上使用多个入口时,还需设置 `optimization.runtimeChunk: 'single'`,否则还会遇到 [这里](https://bundlers.tooling.report/code-splitting/multi-entry/) 所述的麻烦。 +如果想要在一个 HTML 页面上使用多个入口,还需设置 `optimization.runtimeChunk: 'single'`,否则会遇到 [此处](https://bundlers.tooling.report/code-splitting/multi-entry/) 所述的麻烦。 **webpack.config.js** @@ -210,13 +210,13 @@ cacheable modules 530 KiB webpack 5.4.0 compiled successfully in 249 ms ``` -由上可知,除了生成 `shared.bundle.js`,`index.bundle.js` 和 `another.bundle.js` 之外,还生成了一个 `runtime.bundle.js` 文件。 +可以看到,除了 `shared.bundle.js`,`index.bundle.js` 和 `another.bundle.js` 之外,还生成了一个 `runtime.bundle.js` 文件。 -尽管可以在 webpack 中允许每个页面使用多入口,应尽可能避免使用多入口的入口:`entry: { page: ['./analytics', './app'] }`。如此,在使用 `async` 脚本标签时,会有更好的优化以及一致的执行顺序。 +尽管 webpack 允许每个页面使用多入口,但在可能的情况下,应该避免使用多入口,而使用具有多个导入的单入口:`entry: { page: ['./analytics', './app'] }`。这样可以获得更好的优化效果,并在使用异步脚本标签时保证执行顺序一致。 ### SplitChunksPlugin $#splitchunksplugin$ -[`SplitChunksPlugin`](/plugins/split-chunks-plugin) 插件可以将公共的依赖模块提取到已有的入口 chunk 中,或者提取到一个新生成的 chunk。让我们使用这个插件,将之前的示例中重复的 `lodash` 模块去除: +[`SplitChunksPlugin`](/plugins/split-chunks-plugin) 插件可以将公共的依赖模块提取到已有的入口 chunk 中,或者提取到一个新生成的 chunk。让我们使用这个插件去除之前示例中重复的 `lodash` 模块: **webpack.config.js** @@ -241,7 +241,7 @@ webpack 5.4.0 compiled successfully in 249 ms }; ``` -使用 [`optimization.splitChunks`](/plugins/split-chunks-plugin/#optimization-splitchunks) 配置选项之后,将会发现 `index.bundle.js` 和 `another.bundle.js` 中已经移除了重复的依赖模块。需要注意的是,插件将 `lodash` 分离到单独的 chunk,并且将其从 main bundle 中移除,减轻了 bundle 大小。执行 `npm run build` 查看效果: +使用 [`optimization.splitChunks`](/plugins/split-chunks-plugin/#optimization-splitchunks) 配置选项后构建,将会发现 `index.bundle.js` 和 `another.bundle.js` 中已经移除了重复的依赖模块。需要注意的是,插件将 `lodash` 分离到单独的 chunk,并且将其从 main bundle 中移除,减轻了 bundle 大小。执行 `npm run build` 查看效果: ```bash ... @@ -259,17 +259,17 @@ cacheable modules 530 KiB webpack 5.4.0 compiled successfully in 241 ms ``` -以下是由社区提供,一些对于代码分离很有帮助的 plugin 和 loader: +以下是由社区提供,对代码分离很有帮助的 plugin 和 loader: - [`mini-css-extract-plugin`](plugins/mini-css-extract-plugin):用于将 CSS 从主应用程序中分离。 ## 动态导入 $#dynamic-imports$ -当涉及到动态代码拆分时,webpack 提供了两个类似的技术。第一种,也是推荐选择的方式,使用符合 [ECMAScript 提案](https://github.com/tc39/proposal-dynamic-import) 的 [`import()` 语法](/api/module-methods/#import-1) 实现动态导入。第二种则是 webpack 的遗留功能,使用 webpack 特定的 [`require.ensure`](/api/module-methods/#requireensure)。让我们先尝试使用第一种…… +webpack 提供了两个类似的技术实现动态拆分代码。第一种,也是推荐选择的方式,是使用符合 [ECMAScript 提案](https://github.com/tc39/proposal-dynamic-import) 的 [`import()` 语法](/api/module-methods/#import-1) 实现动态导入。第二种则是 webpack 的遗留功能,使用 webpack 特定的 [`require.ensure`](/api/module-methods/#requireensure)。让我们先尝试使用第一种。 -W> `import()` 调用会在内部使用到 [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果在旧版本浏览器中(例如,IE 11)使用 `import()`,记得使用一个 polyfill 库(例如 [es6-promise](https://github.com/stefanpenner/es6-promise) 或 [promise-polyfill](https://github.com/taylorhakes/promise-polyfill))来 shim `Promise`。 +W> 调用 `import()` 会在内部使用 [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。因此如果在旧版本浏览器中(例如,IE 11)使用 `import()`,需要使用一个 polyfill 库(例如 [es6-promise](https://github.com/stefanpenner/es6-promise) 或 [promise-polyfill](https://github.com/taylorhakes/promise-polyfill))来 shim `Promise`。 -在我们开始之前,先从上述示例的配置中移除掉多余的 [`entry`](/concepts/entry-points/) 和 [`optimization.splitChunks`](/plugins/split-chunks-plugin/#optimization-splitchunks),因为接下来的演示中并不需要它们: +在我们开始之前,先从上述示例的配置中移除多余的 [`entry`](/concepts/entry-points/) 和 [`optimization.splitChunks`](/plugins/split-chunks-plugin/#optimization-splitchunks),因为接下来的演示中并不需要它们: **webpack.config.js** @@ -341,9 +341,9 @@ webpack-demo +}); ``` -我们之所以需要 `default`,是因为 webpack 4 在导入 CommonJS 模块时,将不再解析为 `module.exports` 的值,而是为 CommonJS 模块创建一个 artificial namespace 对象,更多有关背后原因的信息,请阅读 [webpack 4: import() and CommonJs](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655)。 +需要 `default` 的原因是自 webpack 4 之后,在导入 CommonJS 模块时,将不再解析为 `module.exports` 的值,而是创建一个人工命名空间对象来表示此 CommonJS 模块。更多有关背后原因的信息,请阅读 [webpack 4: import() and CommonJs](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655)。 -让我们执行 webpack,查看 `lodash` 是否会分离到一个单独的 bundle: +试试构建最新的代码,看看 `lodash` 是否会分离到一个单独的 bundle: ```bash ... @@ -405,7 +405,7 @@ Webpack v4.6.0+ 增加了对预获取(prefetch)和预加载(preload)的 import(/* webpackPrefetch: true */ './path/to/LoginModal.js'); ``` -这会生成 `` 并追加到页面头部,指示着浏览器在闲置时间预取 `login-modal-chunk.js` 文件。 +这会生成 `` 并追加到页面头部,指示浏览器在闲置时间预取 `login-modal-chunk.js` 文件。 T> 只要父 chunk 完成加载,webpack 就会添加预获取提示。 @@ -466,4 +466,4 @@ const lazyComp = () => ## 下一步 $#next-steps$ -接下来,查看 [延迟加载](/guides/lazy-loading/) 来学习如何在真实的应用程序中使用 `import()` 的具体示例,以及查看 [缓存](/guides/caching/) 来学习如何有效地分离代码。 +接下来,查看 [懒加载](/guides/lazy-loading/) 来学习如何在真实的应用程序中使用 `import()` 的具体示例,以及查看 [缓存](/guides/caching/) 来学习如何有效地分离代码。