File tree Expand file tree Collapse file tree 2 files changed +64
-0
lines changed Expand file tree Collapse file tree 2 files changed +64
-0
lines changed Original file line number Diff line number Diff line change 10
10
- [ Router オプション] ( options.md )
11
11
- [ router-view] ( view.md )
12
12
- [ v-link] ( link.md )
13
+ - [ Lazy loading Routes] ( lazy.md )
13
14
- [ トランジションパイプライン] ( pipeline/README.md )
14
15
- [ トランジションフック] ( pipeline/hooks.md )
15
16
- [ data] ( pipeline/data.md )
Original file line number Diff line number Diff line change
1
+ # Lazy Loading Routes
2
+
3
+ Webpack または Browserify のようなバンドラを使用しているとき、Vue.js 組み込みの[ 非同期コンポーネント機能] ( http://jp.vuejs.org/guide/components.html#c64d5f72fddd9b02b5daff9b8c4b6648 ) を使用すると route コンポーネントを遅延読み込みすることが、いとも簡単にできます。直接あなたの route コンポーネントを定義する代わりに、非同期に実際のコンポーネント定義を解決する関数として定義します:
4
+
5
+ ``` js
6
+ router .map ({
7
+ ' /async' : {
8
+ component : function (resolve ) {
9
+ // 何らかのコンポーネント定義をサーバから取得 ...
10
+ resolve (MyComponent)
11
+ }
12
+ }
13
+ })
14
+ ```
15
+
16
+ さて、手動によるコンポーネント検索のハンドリングは理想的ではないですが、Webpack & Browserify のようなバンドラ両方は、それを容易にする方法を提供します。
17
+
18
+ ### Webpack
19
+
20
+ Webpack は組み込みで非同期なコード分離をサポートします。非同期なコード分離するポイントを示すために、コードにおいて AMD のような ` require ` シンタックスを使用できます:
21
+
22
+ ``` js
23
+ require ([' ./MyComponent.vue' ], function (MyComponent ) {
24
+ // ここのコードは、MyComponent.vue が非同期に読み込まれた後に、実行されます
25
+ })
26
+ ```
27
+
28
+ ルーターと組合せると、次のようになります:
29
+
30
+ ``` js
31
+ router .map ({
32
+ ' /async' : {
33
+ component : function (resolve ) {
34
+ require ([' ./MyComponent.vue' ], resolve)
35
+ }
36
+ }
37
+ })
38
+ ```
39
+
40
+ ここでは、` MyComponent.vue ` は、それ自身単体でのみ使用される任意の依存関係と一緒に、ルート ` /async ` がレンダリングする必要があるときだけ、非同期に読み込まれます。
41
+
42
+ ### Browserify
43
+
44
+ Browserify で同じことを達成するにはちょっとトリッキーですが、[ ` partition-bundle ` プラグイン] ( https://github.com/substack/browserify-handbook/blob/master/readme.markdown#partition-bundle ) で可能です。手動で ` json ` ファイルにバンドルマッピングを宣言する必要があります:
45
+
46
+ ``` json
47
+ {
48
+ "main.js" : [" ./main.js" ],
49
+ "my-component.js" : [" ./MyComponent.vue" ]
50
+ }
51
+ ```
52
+
53
+ そして ` main.js ` で、` require ` の代わりに ` loadjs ` 関数を使用して、同じような何かをするでしょう:
54
+
55
+ ``` js
56
+ router .map ({
57
+ ' /async' : {
58
+ component : function (resolve ) {
59
+ loadjs ([' ./MyComponent.vue' ], resolve)
60
+ }
61
+ }
62
+ })
63
+ ```
You can’t perform that action at this time.
0 commit comments