Skip to content

Commit

Permalink
Modify some document layout errors
Browse files Browse the repository at this point in the history
  • Loading branch information
betamee committed Feb 1, 2019
1 parent 5e92fd5 commit e751e73
Showing 1 changed file with 24 additions and 25 deletions.
49 changes: 24 additions & 25 deletions content/docs/code-splitting.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -26,7 +26,7 @@ export function add(a, b) {
}
```

**Bundle:**
**打包后文件：**

```js
function add(a, b) {
Expand All @@ -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 => {
Expand All @@ -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';
Expand All @@ -107,7 +106,7 @@ function MyComponent() {
}
```

**之后：**
**使用之后：**

```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
Expand All @@ -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'));
Expand All @@ -143,7 +142,7 @@ function MyComponent() {
}
```

`fallback`属性接受任何在组件加载过程中你想展示的React元素。你可以将`Suspense`组件置于懒加载组件之上的任何位置。你甚至可以用一个`Suspense`组件包裹多个懒加载组件。
`fallback` 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 `Suspense` 组件置于懒加载组件之上的任何位置。你甚至可以用一个 `Suspense` 组件包裹多个懒加载组件。

```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
Expand Down Expand Up @@ -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';
Expand All @@ -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
Expand Down

0 comments on commit e751e73

Please sign in to comment.