|
2 | 2 |
|
3 | 3 | バンドラーを使ってアプリケーションを構築している時、バンドルされる JavaScript が非常に大きいものになり得ます。結果的にページのロード時間に影響を与えてしまいます。もし各ルートコンポーネントごとに別々のチャンクにして、訪れたルートの時だけロードできればより効率的でしょう。
|
4 | 4 |
|
5 |
| -Vue の [非同期コンポーネント機能](http://jp.vuejs.org/guide/components.html#非同期コンポーネント) と Webpack の [コード分割機能](https://webpack.js.org/guides/code-splitting-require/) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。 |
| 5 | +Vue の [非同期コンポーネント機能](http://jp.vuejs.org/guide/components.html#非同期コンポーネント) と webpack の [コード分割機能](https://webpack.js.org/guides/code-splitting-async/) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。 |
6 | 6 |
|
7 |
| -必要なことは非同期のルートコンポーネントを定義するだけです。 |
| 7 | +最初に、非同期コンポーネントは Promise (コンポーネント自身解決する必要がある) を返すファクトリ関数として定義できます: |
8 | 8 |
|
9 | 9 | ``` js
|
10 |
| -const Foo = resolve => { |
11 |
| - // require.ensure はコード分割のための Webpack の特殊な文法です。 |
12 |
| - require.ensure(['./Foo.vue'], () => { |
13 |
| - resolve(require('./Foo.vue')) |
14 |
| - }) |
15 |
| -} |
| 10 | +const Foo = () => Promise.resolve({ /* component definition */ }) |
16 | 11 | ```
|
17 | 12 |
|
18 |
| -コード分割の文法の代替として、 AMD 形式の require もあります。これを使うと次のように簡略されます。 |
| 13 | +次に、webpack 2 において [動的 import](https://github.com/tc39/proposal-dynamic-import) 構文を使用して、コード分割ポイントを示すことができます: |
19 | 14 |
|
20 | 15 | ``` js
|
21 |
| -const Foo = resolve => require(['./Foo.vue'], resolve) |
| 16 | +import('./Foo.vue') // returns a Promise |
22 | 17 | ```
|
23 | 18 |
|
24 |
| -特にルート設定を変更する必要はなく、普段のように `Foo` を使用するだけです。 |
| 19 | +> Note: Babel を使用している場合、Babel が構文を正しく解析するために [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) プラグインを追加する必要があります。 |
| 20 | +
|
| 21 | +2 つを組み合わせることで、これは、webpack によって自動的にコード分割される非同期コンポーネントを定義する方法です: |
25 | 22 |
|
26 | 23 | ``` js
|
27 |
| -const router = new VueRouter({ |
28 |
| - routes: [ |
29 |
| - { path: '/foo', component: Foo } |
30 |
| - ] |
31 |
| -}) |
| 24 | +const Foo = () => import('./Foo.vue') |
32 | 25 | ```
|
33 | 26 |
|
34 | 27 | ### 同じチャンク内でのコンポーネントグループ化
|
35 | 28 |
|
36 |
| -しばしば同じ非同期のチャンクに、そのルート配下のネストされた全てのコンポーネントをグループ化したいと思うかもしれません。それを実現するためには、 `require.ensure` の第 3 引数にチャンクの名前を提供する [名前付きチャンク](https://webpack.js.org/guides/code-splitting-require/#chunkname) を使う必要があります。 |
| 29 | +しばしば同じ非同期のチャンクに、そのルート配下のネストされた全てのコンポーネントをグループ化したいと思うかもしれません。それを実現するためには、 特別なコメント構文 (webpack > 2.4 必須)を使用してチャンクの名前を提供する [名前付きチャンク](https://webpack.js.org/guides/code-splitting-async/#chunk-names) を使う必要があります。 |
37 | 30 |
|
38 | 31 | ``` js
|
39 |
| -const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') |
40 |
| -const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') |
41 |
| -const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') |
| 32 | +const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') |
| 33 | +const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') |
| 34 | +const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') |
42 | 35 | ```
|
43 | 36 |
|
44 |
| -Webpack は同じチャンク名のどんな非同期のモジュールも同じ非同期のチャンクにグループします。つまり、 `require.ensure` に対して明示的に依存関係をリストする必要がありません (したがって空の配列を渡しています)。 |
| 37 | +webpack は同じチャンク名のどんな非同期のモジュールも同じ非同期のチャンクにグループします。 |
0 commit comments