From e751e73a5ac2257014abe78a2c0525058ddac841 Mon Sep 17 00:00:00 2001 From: betamee Date: Fri, 1 Feb 2019 21:32:19 +0800 Subject: [PATCH] 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