From 5e92fd54e08dcabc739f93b3a9d27c3e4682d60f Mon Sep 17 00:00:00 2001
From: betamee <gongxq95@gmail.com>
Date: Fri, 1 Feb 2019 18:33:45 +0800
Subject: [PATCH 01/10] finish code splitting
---
content/docs/code-splitting.md | 112 ++++++++++++---------------------
1 file changed, 40 insertions(+), 72 deletions(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index d779273f53..ecc2e5fd46 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -1,18 +1,14 @@
---
id: code-splitting
-title: Code-Splitting
+title: 代码分割
permalink: docs/code-splitting.html
---
-## Bundling
+## 打包
-Most React apps will have their files "bundled" using tools like
-[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/).
-Bundling is the process of following imported files and merging them into a
-single file: a "bundle". This bundle can then be included on a webpage to load
-an entire app at once.
+大多数React应用都会通过[Webpack](https://webpack.js.org/) 或 [Browserify](http://browserify.org/)这类的工具来构建自己的打包文件。打包是一个将文件引入并合并到一个单独文件的环节，最终形成一个包（bundle） 。这个包（bundle）是在进入页面后用以加载整个应用的。
-#### Example
+#### 示例
**App:**
@@ -40,44 +36,27 @@ function add(a, b) {
console.log(add(16, 26)); // 42
```
-> Note:
+> 注意：
>
-> Your bundles will end up looking a lot different than this.
+> 最终你的打包文件看起来会和上面的例子有点区别
-If you're using [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), or a similar tool, you will have a Webpack setup out of the box to bundle your
-app.
+如果你正在使用 [Create React App](https://github.com/facebookincubator/create-react-app)，[Next.js](https://github.com/zeit/next.js/)， [Next.js](https://github.com/zeit/next.js/)[Gatsby](https://www.gatsbyjs.org/) ，或者类似的工具，你会拥有一个可以直接使用的Webpack配置来进行打包工作。
-If you aren't, you'll need to setup bundling yourself. For example, see the
-[Installation](https://webpack.js.org/guides/installation/) and
-[Getting Started](https://webpack.js.org/guides/getting-started/) guides on the
-Webpack docs.
+如果你没有使用这类工具，你就需要自己来进行配置。例如，查看 webpack 文档上的[安装](https://webpack.js.org/guides/installation/) 和 [入门教程](https://webpack.js.org/guides/getting-started/)。
-## Code Splitting
+## 代码分割
-Bundling is great, but as your app grows, your bundle will grow too. Especially
-if you are including large third-party libraries. You need to keep an eye on
-the code you are including in your bundle so that you don't accidentally make
-it so large that your app takes a long time to load.
+打包是个非常棒的技术，但随着你的应用增长，你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码，以避免因体积过大而导致加载时间过长。
-To avoid winding up with a large bundle, it's good to get ahead of the problem
-and start "splitting" your bundle.
- [Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature
-supported by bundlers like Webpack and Browserify (via
-[factor-bundle](https://github.com/browserify/factor-bundle)) which can create
-multiple bundles that can be dynamically loaded at runtime.
+为了避免搞出大体积的代码包，在前期就思考该问题并对代码包进行分割是个不错的选择。代码分割是由诸如Webpack（[代码分割](https://webpack.js.org/guides/code-splitting/)）和Browserify（[factor-bundle](https://github.com/browserify/factor-bundle)）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。
-Code-splitting your app can help you "lazy-load" just the things that are
-currently needed by the user, which can dramatically improve the performance of
-your app. While you haven't reduced the overall amount of code in your app,
-you've avoided loading code that the user may never need, and reduced the amount
-of code needed during the initial load.
+对你的应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，能够显著地提高你的应用性能。尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。
## `import()`
-The best way to introduce code-splitting into your app is through the dynamic
-`import()` syntax.
+在你的应用中引入代码分割的最佳方式是通过动态引入语法`import()`。
-**Before:**
+**之前：**
```js
import { add } from './math';
@@ -85,7 +64,7 @@ import { add } from './math';
console.log(add(16, 26));
```
-**After:**
+**之后：**
```js
import("./math").then(math => {
@@ -93,33 +72,28 @@ import("./math").then(math => {
});
```
-> Note:
+> 注意:
>
-> The dynamic `import()` syntax is a ECMAScript (JavaScript)
-> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently
-> part of the language standard. It is expected to be accepted in the
-> near future.
+> 动态引入语法`import()`目前只是一个ECMAScript (JavaScript)
+> [提案](https://github.com/tc39/proposal-dynamic-import)，
+> 而不是正式的语法标准。预计在不远的将来就会被正式接受。
-When Webpack comes across this syntax, it automatically starts code-splitting
-your app. If you're using Create React App, this is already configured for you
-and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
-out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
+当Webpack解析到该语法时，它会自动地开始进行代码分割。如果你使用Create React App，该功能已配置好，你能[立刻使用](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)这个特性 。[Next.js](https://github.com/zeit/next.js/#dynamic-import) 也已支持该特性而无需再配置。
-If you're setting up Webpack yourself, you'll probably want to read Webpack's
-[guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
+如果你自己配置Webpack，你可能要阅读下Webpack关于[代码分割](https://webpack.js.org/guides/code-splitting/)的指南。你的 Webpack配置应该[类似于此](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)。
-When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can
-parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
+当使用[Babel](http://babeljs.io/)时，你要确保Babel能够解析动态引入语法而不是将其进行转换。对于这一要求你需要 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)插件。
## `React.lazy`
-> Note:
+> 注意:
>
-> `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).
+> `React.lazy` 和 Suspense技术还没有为服务端渲染准备好。如果你想要在使用服务端渲染的应用中使用，我们推荐[Loadable Components](https://github.com/smooth-code/loadable-components)这个库。
+> 它有一个很棒的[服务端渲染打包指南](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)。
-The `React.lazy` function lets you render a dynamic import as a regular component.
+`React.lazy`函数能让你像渲染常规组件一样处理动态引入。
-**Before:**
+**之前：**
```js
import OtherComponent from './OtherComponent';
@@ -133,7 +107,7 @@ function MyComponent() {
}
```
-**After:**
+**之后：**
```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -147,13 +121,13 @@ function MyComponent() {
}
```
-This will automatically load the bundle containing the `OtherComponent` when this component gets rendered.
+这个代码将会在渲染组件时，自动导入包含`OtherComponent`组件的包。
-`React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component.
+`React.lazy`必须接受一个调用动态导入语法`import()`的函数。它将会返回一个`Promise`对象，这个对象指向一个包含React组件的默认导出。
### Suspense
-If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component.
+如果在`MyComponent`渲染完成后，包含`OtherComponent`的模块还没有被加载完成，我们必须在这个加载的过程展示一些兜底内容——比如一个加载指示效果。这里我们使用`Suspense`组件来解决。
```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -169,7 +143,7 @@ function MyComponent() {
}
```
-The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component.
+`fallback`属性接受任何在组件加载过程中你想展示的React元素。你可以将`Suspense`组件置于懒加载组件之上的任何位置。你甚至可以用一个`Suspense`组件包裹多个懒加载组件。
```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -189,9 +163,9 @@ function MyComponent() {
}
```
-### Error boundaries
+### 错误边界（Error boundaries）
-If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error.
+如果模块加载失败（如网络问题），它会触发一个错误。你可以通过[错误边界（Error boundaries）](/docs/error-boundaries.html)技术来处理这些情况，以显示良好的用户体验并管理恢复事宜。
```js
import MyErrorBoundary from './MyErrorBoundary';
@@ -212,19 +186,13 @@ const MyComponent = () => (
);
```
-## Route-based code splitting
+## 基于路由的代码分割
-Deciding where in your app to introduce code splitting can be a bit tricky. You
-want to make sure you choose places that will split bundles evenly, but won't
-disrupt the user experience.
+决定在哪引入代码分割需要一些技巧。你需要确保选择的位置能够均匀地分割代码包而不会影响用户体验。
-A good place to start is with routes. Most people on the web are used to
-page transitions taking some amount of time to load. You also tend to be
-re-rendering the entire page at once so your users are unlikely to be
-interacting with other elements on the page at the same time.
+一个不错的选择是从路由开始。大多数网络用户习惯于页面之间能有个加载切换过程。你也可以选择重新渲染整个页面，这样您的用户就不必在渲染的同时再和页面上的其他元素进行交互。
-Here's an example of how to setup route-based code splitting into your app using
-libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`.
+这里是一个例子，展示如何在你的应用中使用`React.lazy`和[React Router](https://reacttraining.com/react-router/)这类的第三方库，来配置基于路由的代码分割。
```js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
@@ -245,9 +213,9 @@ const App = () => (
);
```
-## Named Exports
+## 命名导出（Named Exports）
-`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components.
+`React.lazy`目前只支持默认导出（default exports）。如果你想被引入的模块使用命名导出（named exports），你可以创建一个中间模块，来重新导出为默认模块。这能保证treeshaking不会出错，并且不必引入不需要的组件。
```js
// ManyComponents.js
From e751e73a5ac2257014abe78a2c0525058ddac841 Mon Sep 17 00:00:00 2001
From: betamee <gongxq95@gmail.com>
Date: Fri, 1 Feb 2019 21:32:19 +0800
Subject: [PATCH 02/10] Modify some document layout errors
---
content/docs/code-splitting.md | 49 +++++++++++++++++-----------------
1 file changed, 24 insertions(+), 25 deletions(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index ecc2e5fd46..7b8bb7432c 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -6,11 +6,11 @@ permalink: docs/code-splitting.html
## 打包
-大多数React应用都会通过[Webpack](https://webpack.js.org/) 或 [Browserify](http://browserify.org/)这类的工具来构建自己的打包文件。打包是一个将文件引入并合并到一个单独文件的环节，最终形成一个包（bundle） 。这个包（bundle）是在进入页面后用以加载整个应用的。
+大多数React应用都会通过 [Webpack](https://webpack.docschina.org) 或 [Browserify](http://browserify.org/) 这类的工具来构建自己的打包文件。打包是一个将文件引入并合并到一个单独文件的环节，最终形成一个包（bundle）。这个包（bundle）是在进入页面后用以加载整个应用的。
#### 示例
-**App:**
+**App文件：**
```js
// app.js
@@ -26,7 +26,7 @@ export function add(a, b) {
}
```
-**Bundle:**
+**打包后文件：**
```js
function add(a, b) {
@@ -38,25 +38,25 @@ console.log(add(16, 26)); // 42
> 注意：
>
-> 最终你的打包文件看起来会和上面的例子有点区别
+> 最终你的打包文件看起来会和上面的例子有点区别。
-如果你正在使用 [Create React App](https://github.com/facebookincubator/create-react-app)，[Next.js](https://github.com/zeit/next.js/)， [Next.js](https://github.com/zeit/next.js/)[Gatsby](https://www.gatsbyjs.org/) ，或者类似的工具，你会拥有一个可以直接使用的Webpack配置来进行打包工作。
+如果你正在使用 [Create React App](https://github.com/facebookincubator/create-react-app)，[Next.js](https://github.com/zeit/next.js/)，[Gatsby](https://www.gatsbyjs.org/)，或者类似的工具，你会拥有一个可以直接使用的 Webpack 配置来进行打包工作。
-如果你没有使用这类工具，你就需要自己来进行配置。例如，查看 webpack 文档上的[安装](https://webpack.js.org/guides/installation/) 和 [入门教程](https://webpack.js.org/guides/getting-started/)。
+如果你没有使用这类工具，你就需要自己来进行配置。例如，查看 Webpack 文档上的[安装](https://webpack.docschina.org/guides/installation/)和[入门教程](https://webpack.docschina.org/guides/getting-started/)。
## 代码分割
打包是个非常棒的技术，但随着你的应用增长，你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码，以避免因体积过大而导致加载时间过长。
-为了避免搞出大体积的代码包，在前期就思考该问题并对代码包进行分割是个不错的选择。代码分割是由诸如Webpack（[代码分割](https://webpack.js.org/guides/code-splitting/)）和Browserify（[factor-bundle](https://github.com/browserify/factor-bundle)）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。
+为了避免搞出大体积的代码包，在前期就思考该问题并对代码包进行分割是个不错的选择。代码分割是由诸如 Webpack（[代码分割](https://webpack.docschina.org/guides/code-splitting/)）和 Browserify（[factor-bundle](https://github.com/browserify/factor-bundle)）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。
对你的应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，能够显著地提高你的应用性能。尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。
## `import()`
-在你的应用中引入代码分割的最佳方式是通过动态引入语法`import()`。
+在你的应用中引入代码分割的最佳方式是通过动态引入语法 `import()`。
-**之前：**
+**使用之前：**
```js
import { add } from './math';
@@ -64,7 +64,7 @@ import { add } from './math';
console.log(add(16, 26));
```
-**之后：**
+**使用之后：**
```js
import("./math").then(math => {
@@ -74,26 +74,25 @@ import("./math").then(math => {
> 注意:
>
-> 动态引入语法`import()`目前只是一个ECMAScript (JavaScript)
-> [提案](https://github.com/tc39/proposal-dynamic-import)，
+> 动态引入语法 `import()` 目前只是一个 ECMAScript (JavaScript) [提案](https://github.com/tc39/proposal-dynamic-import)，
> 而不是正式的语法标准。预计在不远的将来就会被正式接受。
-当Webpack解析到该语法时，它会自动地开始进行代码分割。如果你使用Create React App，该功能已配置好，你能[立刻使用](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)这个特性 。[Next.js](https://github.com/zeit/next.js/#dynamic-import) 也已支持该特性而无需再配置。
+当 Webpack 解析到该语法时，它会自动地开始进行代码分割。如果你使用 Create React App，该功能已配置好，你能[立刻使用](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)这个特性。[Next.js](https://github.com/zeit/next.js/#dynamic-import) 也已支持该特性而无需再配置。
-如果你自己配置Webpack，你可能要阅读下Webpack关于[代码分割](https://webpack.js.org/guides/code-splitting/)的指南。你的 Webpack配置应该[类似于此](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)。
+如果你自己配置 Webpack，你可能要阅读下 Webpack 关于[代码分割](https://webpack.docschina.org/guides/code-splitting/)的指南。你的 Webpack 配置应该[类似于此](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)。
-当使用[Babel](http://babeljs.io/)时，你要确保Babel能够解析动态引入语法而不是将其进行转换。对于这一要求你需要 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)插件。
+当使用 [Babel](https://babel.docschina.org/) 时，你要确保 Babel 能够解析动态引入语法而不是将其进行转换。对于这一要求你需要 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) 插件。
## `React.lazy`
> 注意:
>
-> `React.lazy` 和 Suspense技术还没有为服务端渲染准备好。如果你想要在使用服务端渲染的应用中使用，我们推荐[Loadable Components](https://github.com/smooth-code/loadable-components)这个库。
+> `React.lazy` 和 Suspense 技术还没有为服务端渲染准备好。如果你想要在使用服务端渲染的应用中使用，我们推荐 [Loadable Components](https://github.com/smooth-code/loadable-components) 这个库。
> 它有一个很棒的[服务端渲染打包指南](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)。
-`React.lazy`函数能让你像渲染常规组件一样处理动态引入。
+`React.lazy` 函数能让你像渲染常规组件一样处理动态引入。
-**之前：**
+**使用之前：**
```js
import OtherComponent from './OtherComponent';
@@ -107,7 +106,7 @@ function MyComponent() {
}
```
-**之后：**
+**使用之后：**
```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -121,13 +120,13 @@ function MyComponent() {
}
```
-这个代码将会在渲染组件时，自动导入包含`OtherComponent`组件的包。
+这个代码将会在渲染组件时，自动导入包含 `OtherComponent` 组件的包。
-`React.lazy`必须接受一个调用动态导入语法`import()`的函数。它将会返回一个`Promise`对象，这个对象指向一个包含React组件的默认导出。
+`React.lazy` 必须接受一个调用动态导入语法 `import()` 的函数。它将会返回一个 `Promise` 对象，这个对象指向一个包含 React 组件的默认导出。
### Suspense
-如果在`MyComponent`渲染完成后，包含`OtherComponent`的模块还没有被加载完成，我们必须在这个加载的过程展示一些兜底内容——比如一个加载指示效果。这里我们使用`Suspense`组件来解决。
+如果在 `MyComponent` 渲染完成后，包含 `OtherComponent` 的模块还没有被加载完成，我们必须在这个加载的过程展示一些兜底内容——比如一个加载指示效果。这里我们使用 `Suspense` 组件来解决。
```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -143,7 +142,7 @@ function MyComponent() {
}
```
-`fallback`属性接受任何在组件加载过程中你想展示的React元素。你可以将`Suspense`组件置于懒加载组件之上的任何位置。你甚至可以用一个`Suspense`组件包裹多个懒加载组件。
+`fallback` 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 `Suspense` 组件置于懒加载组件之上的任何位置。你甚至可以用一个 `Suspense` 组件包裹多个懒加载组件。
```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -192,7 +191,7 @@ const MyComponent = () => (
一个不错的选择是从路由开始。大多数网络用户习惯于页面之间能有个加载切换过程。你也可以选择重新渲染整个页面，这样您的用户就不必在渲染的同时再和页面上的其他元素进行交互。
-这里是一个例子，展示如何在你的应用中使用`React.lazy`和[React Router](https://reacttraining.com/react-router/)这类的第三方库，来配置基于路由的代码分割。
+这里是一个例子，展示如何在你的应用中使用 `React.lazy` 和 [React Router](https://react-router.docschina.org/) 这类的第三方库，来配置基于路由的代码分割。
```js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
@@ -215,7 +214,7 @@ const App = () => (
## 命名导出（Named Exports）
-`React.lazy`目前只支持默认导出（default exports）。如果你想被引入的模块使用命名导出（named exports），你可以创建一个中间模块，来重新导出为默认模块。这能保证treeshaking不会出错，并且不必引入不需要的组件。
+`React.lazy` 目前只支持默认导出（default exports）。如果你想被引入的模块使用命名导出（named exports），你可以创建一个中间模块，来重新导出为默认模块。这能保证 treeshaking 不会出错，并且不必引入不需要的组件。
```js
// ManyComponents.js
From 1eb20733bfca91dbbde4ecbf665f547ffc5ee8db Mon Sep 17 00:00:00 2001
From: betamee <gongxq95@gmail.com>
Date: Mon, 11 Feb 2019 19:52:38 +0800
Subject: [PATCH 03/10] update code-splitting.md
---
content/docs/code-splitting.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 7b8bb7432c..5e65025610 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -6,7 +6,7 @@ permalink: docs/code-splitting.html
## 打包
-大多数React应用都会通过 [Webpack](https://webpack.docschina.org) 或 [Browserify](http://browserify.org/) 这类的工具来构建自己的打包文件。打包是一个将文件引入并合并到一个单独文件的环节，最终形成一个包（bundle）。这个包（bundle）是在进入页面后用以加载整个应用的。
+大多数React应用都会通过 [Webpack](https://webpack.docschina.org) 或 [Browserify](http://browserify.org/) 这类的工具来构建自己的打包文件。打包是一个将文件引入并合并到一个单独文件的环节，最终形成一个包（bundle）。这个包用于在页面上加载整个应用。
#### 示例
From d8cc7e61bd971fae2c43c53f684247c7e4bd9b9b Mon Sep 17 00:00:00 2001
From: betamee <gongxq95@gmail.com>
Date: Tue, 12 Feb 2019 10:35:17 +0800
Subject: [PATCH 04/10] update some words
---
content/docs/code-splitting.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 5e65025610..c32b6c616e 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -6,7 +6,7 @@ permalink: docs/code-splitting.html
## 打包
-大多数React应用都会通过 [Webpack](https://webpack.docschina.org) 或 [Browserify](http://browserify.org/) 这类的工具来构建自己的打包文件。打包是一个将文件引入并合并到一个单独文件的环节，最终形成一个包（bundle）。这个包用于在页面上加载整个应用。
+大多数 React 应用都会使用 [Webpack](https://webpack.docschina.org) 或 [Browserify](http://browserify.org/) 这类的构建工具来打包文件。打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个“bundle”。这个 bundle 用于在页面上一次性加载整个应用。
#### 示例
@@ -162,9 +162,9 @@ function MyComponent() {
}
```
-### 错误边界（Error boundaries）
+### 异常捕获边界（Error boundaries）
-如果模块加载失败（如网络问题），它会触发一个错误。你可以通过[错误边界（Error boundaries）](/docs/error-boundaries.html)技术来处理这些情况，以显示良好的用户体验并管理恢复事宜。
+如果模块加载失败（如网络问题），它会触发一个错误。你可以通过[异常捕获边界（Error boundaries）](/docs/error-boundaries.html)技术来处理这些情况，以显示良好的用户体验并管理恢复事宜。
```js
import MyErrorBoundary from './MyErrorBoundary';
From 6ea0219d86c78f83d4b79ae5461004a833995c5c Mon Sep 17 00:00:00 2001
From: betamee <gongxq95@gmail.com>
Date: Tue, 12 Feb 2019 11:08:19 +0800
Subject: [PATCH 05/10] update some words
---
content/docs/code-splitting.md | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index c32b6c616e..197e83319e 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -38,7 +38,7 @@ console.log(add(16, 26)); // 42
> 注意：
>
-> 最终你的打包文件看起来会和上面的例子有点区别。
+> 最终你的打包文件看起来会和上面的例子区别很大。
如果你正在使用 [Create React App](https://github.com/facebookincubator/create-react-app)，[Next.js](https://github.com/zeit/next.js/)，[Gatsby](https://www.gatsbyjs.org/)，或者类似的工具，你会拥有一个可以直接使用的 Webpack 配置来进行打包工作。
@@ -54,7 +54,7 @@ console.log(add(16, 26)); // 42
## `import()`
-在你的应用中引入代码分割的最佳方式是通过动态引入语法 `import()`。
+在你的应用中引入代码分割的最佳方式是通过动态 `import()` 语法。
**使用之前：**
@@ -74,23 +74,23 @@ import("./math").then(math => {
> 注意:
>
-> 动态引入语法 `import()` 目前只是一个 ECMAScript (JavaScript) [提案](https://github.com/tc39/proposal-dynamic-import)，
+> 动态 `import()` 语法目前只是一个 ECMAScript (JavaScript) [提案](https://github.com/tc39/proposal-dynamic-import)，
> 而不是正式的语法标准。预计在不远的将来就会被正式接受。
当 Webpack 解析到该语法时，它会自动地开始进行代码分割。如果你使用 Create React App，该功能已配置好，你能[立刻使用](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)这个特性。[Next.js](https://github.com/zeit/next.js/#dynamic-import) 也已支持该特性而无需再配置。
如果你自己配置 Webpack，你可能要阅读下 Webpack 关于[代码分割](https://webpack.docschina.org/guides/code-splitting/)的指南。你的 Webpack 配置应该[类似于此](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)。
-当使用 [Babel](https://babel.docschina.org/) 时，你要确保 Babel 能够解析动态引入语法而不是将其进行转换。对于这一要求你需要 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) 插件。
+当使用 [Babel](https://babel.docschina.org/) 时，你要确保 Babel 能够解析动态 `import()` 语法而不是将其进行转换。对于这一要求你需要 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) 插件。
## `React.lazy`
> 注意:
>
-> `React.lazy` 和 Suspense 技术还没有为服务端渲染准备好。如果你想要在使用服务端渲染的应用中使用，我们推荐 [Loadable Components](https://github.com/smooth-code/loadable-components) 这个库。
+> `React.lazy` 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 [Loadable Components](https://github.com/smooth-code/loadable-components) 这个库。
> 它有一个很棒的[服务端渲染打包指南](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)。
-`React.lazy` 函数能让你像渲染常规组件一样处理动态引入。
+`React.lazy` 函数能让你像渲染常规组件一样处理动态引入（的组件）。
**使用之前：**
@@ -122,11 +122,11 @@ function MyComponent() {
这个代码将会在渲染组件时，自动导入包含 `OtherComponent` 组件的包。
-`React.lazy` 必须接受一个调用动态导入语法 `import()` 的函数。它将会返回一个 `Promise` 对象，这个对象指向一个包含 React 组件的默认导出。
+`React.lazy` 必须接受一个调用动态 `import()` 语法的函数。它将会返回一个 `Promise` 对象，这个对象指向一个包含 React 组件的默认导出。
### Suspense
-如果在 `MyComponent` 渲染完成后，包含 `OtherComponent` 的模块还没有被加载完成，我们必须在这个加载的过程展示一些兜底内容——比如一个加载指示效果。这里我们使用 `Suspense` 组件来解决。
+如果在 `MyComponent` 渲染完成后，包含 `OtherComponent` 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 `Suspense` 组件来解决。
```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
From bbb341d4669286423c221b0a3c6fb09bb85d820a Mon Sep 17 00:00:00 2001
From: betamee <gongxq95@gmail.com>
Date: Tue, 12 Feb 2019 11:09:17 +0800
Subject: [PATCH 06/10] update import
---
content/docs/code-splitting.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 197e83319e..cb2c70d78e 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -81,7 +81,7 @@ import("./math").then(math => {
如果你自己配置 Webpack，你可能要阅读下 Webpack 关于[代码分割](https://webpack.docschina.org/guides/code-splitting/)的指南。你的 Webpack 配置应该[类似于此](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)。
-当使用 [Babel](https://babel.docschina.org/) 时，你要确保 Babel 能够解析动态 `import()` 语法而不是将其进行转换。对于这一要求你需要 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) 插件。
+当使用 [Babel](https://babel.docschina.org/) 时，你要确保 Babel 能够解析动态 import 语法而不是将其进行转换。对于这一要求你需要 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) 插件。
## `React.lazy`
From ba528d3464de59ea1af854356eb0f542e4d540d4 Mon Sep 17 00:00:00 2001
From: betamee <gongxq95@gmail.com>
Date: Thu, 14 Feb 2019 15:58:16 +0800
Subject: [PATCH 07/10] update some words
---
content/docs/code-splitting.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index cb2c70d78e..a282869285 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -6,7 +6,7 @@ permalink: docs/code-splitting.html
## 打包
-大多数 React 应用都会使用 [Webpack](https://webpack.docschina.org) 或 [Browserify](http://browserify.org/) 这类的构建工具来打包文件。打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个“bundle”。这个 bundle 用于在页面上一次性加载整个应用。
+大多数 React 应用都会使用 [Webpack](https://webpack.docschina.org) 或 [Browserify](http://browserify.org/) 这类的构建工具来打包文件。打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。接着在页面上引入该 bundle，整个应用即可一次性加载。
#### 示例
From add1092b08241221119820a99e81061e2116eaad Mon Sep 17 00:00:00 2001
From: betamee <gongxq95@gmail.com>
Date: Sun, 17 Feb 2019 18:59:59 +0800
Subject: [PATCH 08/10] update some words
---
content/docs/code-splitting.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index a282869285..a39259aaeb 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -122,7 +122,7 @@ function MyComponent() {
这个代码将会在渲染组件时，自动导入包含 `OtherComponent` 组件的包。
-`React.lazy` 必须接受一个调用动态 `import()` 语法的函数。它将会返回一个 `Promise` 对象，这个对象指向一个包含 React 组件的默认导出。
+`React.lazy` 接受一个函数，这个函数需要动态调用 `import()`。它必须返回一个 `Promise`，该 Promise 需要 resolve 至一个 `default` export 属性包含 React 组件的 module。
### Suspense
From 65120422f736bb56d2fb36779e49b5fb2fbc814c Mon Sep 17 00:00:00 2001
From: Joe Jiang <hijiangtao@gmail.com>
Date: Mon, 18 Feb 2019 10:53:25 +0800
Subject: [PATCH 09/10] Update code-splitting.md
---
content/docs/code-splitting.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index a39259aaeb..d9551ff2ba 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -122,7 +122,7 @@ function MyComponent() {
这个代码将会在渲染组件时，自动导入包含 `OtherComponent` 组件的包。
-`React.lazy` 接受一个函数，这个函数需要动态调用 `import()`。它必须返回一个 `Promise`，该 Promise 需要 resolve 至一个 `default` export 属性包含 React 组件的 module。
+`React.lazy` 接受一个函数，这个函数需要动态调用 `import()`。它必须返回一个 `Promise`，该 Promise 需要 resolve 一个 `defalut` export 的 React 组件。
### Suspense
From 66259f663c2d5344cd4942d0c75d1808bba43f14 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Mon, 18 Feb 2019 10:58:55 +0800
Subject: [PATCH 10/10] fix: rm extra line
---
content/docs/code-splitting.md | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index d9551ff2ba..0544f4c360 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -87,8 +87,7 @@ import("./math").then(math => {
> 注意:
>
-> `React.lazy` 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 [Loadable Components](https://github.com/smooth-code/loadable-components) 这个库。
-> 它有一个很棒的[服务端渲染打包指南](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)。
+> `React.lazy` 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 [Loadable Components](https://github.com/smooth-code/loadable-components) 这个库。它有一个很棒的[服务端渲染打包指南](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)。
`React.lazy` 函数能让你像渲染常规组件一样处理动态引入（的组件）。