-
-
Notifications
You must be signed in to change notification settings - Fork 5k
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
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 组件本身): | ||
|
||
|
||
``` js | ||
const Foo = () => Promise.resolve({ /* component definition */ }) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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): | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 来定义 |
||
|
||
``` 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 可以正确地解析语法。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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({ | ||
|
@@ -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) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 会将任何一个异步模块与相同的块名称组合到相同的异步块中。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
首先,可以将
async异步 (注:上下文统一) 组件定义为返回一个 Promise 的工厂函数(该函数 返回的Promise 应该 resolve 组件本身):