Modify some document layout errors

Author: betamee

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,33 +38,33 @@ 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';
 
 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