Skip to content

update lazy-loading Chinese docs #1627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 25, 2017
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 21 additions & 16 deletions docs/zh-cn/advanced/lazy-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,28 @@

结合 Vue 的 [异步组件](http://vuejs.org/guide/components.html#Async-Components) 和 Webpack 的 [code splitting feature](https://doc.webpack-china.org//guides/code-splitting-async/#require-ensure-/), 轻松实现路由组件的懒加载。

我们要做的就是把路由对应的组件定义成异步组件:
首先,可以将 async 组件定义为返回一个 Promise 的工厂函数(该函数应该 resolve 组件本身):
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

首先,可以将 async 异步 (注:上下文统一) 组件定义为返回一个 Promise 的工厂函数(该函数 返回的Promise 应该 resolve 组件本身):



``` js
const Foo = () => Promise.resolve({ /* component definition */ })
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

component definition => 组件定义对象

```

第二,在 webpack 2中,我们可以使用[动态 import](https://github.com/tc39/proposal-dynamic-import)语法来定义 code split 点(split point):
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

来定义code split 代码分块 点(split point)


``` js
const Foo = resolve => {
// require.ensure 是 Webpack 的特殊语法,用来设置 code-split point
// (代码分块)
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}
import('./Foo.vue') // returns a Promise
```

这里还有另一种代码分块的语法,使用 AMD 风格的 require,于是就更简单了:
>注意:如果您使用的是 babel,你将需要添加[syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/)插件,babel 可以正确地解析语法。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

才能使 babel 可以正确地解析语法


结合这两者,这就是如何定义一个能够被 webpack自动代码分割的异步组件

``` js
const Foo = resolve => require(['./Foo.vue'], resolve)
const Foo = () => import('./Foo.vue')
```

不需要改变任何路由配置,跟之前一样使用 `Foo`
在路由配置中什么都不需要改变,只需要像往常一样使用 `Foo`:

``` js
const router = new VueRouter({
Expand All @@ -32,14 +35,16 @@ const router = new VueRouter({
})
```


### 把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 [给 chunk 命名](https://webpack.js.org/guides/code-splitting-require/#chunkname),提供 `require.ensure` 第三个参数作为 chunk 的名称:
有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要使用 [命名 chunk](https://webpack.js.org/guides/code-splitting-require/#chunkname),一个特殊的注释语法来提供chunk name(需要webpack > 2.4)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在同个异步 chunk 中 -> 在同个异步块(chunk)中

注:下文中出现了“异步块”,这里应该提及



``` js
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
```

Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 `require.ensure` 的依赖(传空数组就行)
webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中