Skip to content

Commit 02e2bf8

Browse files
committed
docs(ja): async route loading (ref f1561d2)
1 parent 9d64e55 commit 02e2bf8

File tree

2 files changed

+64
-0
lines changed

2 files changed

+64
-0
lines changed

docs/ja/SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
- [Router オプション](options.md)
1111
- [router-view](view.md)
1212
- [v-link](link.md)
13+
- [Lazy loading Routes](lazy.md)
1314
- [トランジションパイプライン](pipeline/README.md)
1415
- [トランジションフック](pipeline/hooks.md)
1516
- [data](pipeline/data.md)

docs/ja/lazy.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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+
```

0 commit comments

Comments
 (0)