update lazy-loading example

Author: yyx990803

examples/lazy-loading/Bar.vue

@@ -2,6 +2,7 @@
   <div>
     <h2>{{ msg }}</h2>
     <p>I am lazy-loaded. (check out the Networks tab in Chrome devtools)</p>
+    <router-view></router-view>
   </div>
 </template>
 

examples/lazy-loading/Baz.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h3>Baz</h3>
+    <p>I'm loaded in the same chunk with Bar.</p>
+  </div>
+</template>

examples/lazy-loading/app.js

@@ -5,27 +5,52 @@ Vue.use(VueRouter)
 
 const Home = { template: '<div>home</div>' }
 
-// define Foo & Bar as async components.
-// async components are defined as: resolve => { resolve(Component) }
-
-// In Webpack we can use the AMD require syntax to signify a "split point"
+// In Webpack we can use special require syntax to signify a "split point"
 // Webpack will automatically split and lazy-load the split modules.
 // - https://webpack.github.io/docs/code-splitting.html
 
+// Combine that with Vue's async components, we can easily make our route
+// components lazy-loaded only when the given route is matched.
+
+// async components are defined as:
+// - resolve => resolve(Component)
+// or
+// - () => Promise<Component>
+
+// For single component, we can use the AMD shorthand
+// require(['dep'], dep => { ... })
 const Foo = resolve => require(['./Foo.vue'], resolve)
-const Bar = resolve => require(['./Bar.vue'], resolve)
 
 // If using Webpack 2, you can also do:
 // const Foo = () => System.import('./Foo.vue')
 
+// If you want to group a number of components that belong to the same
+// nested route in the same async chunk, the syntax is a bit more verbose.
+// The repetition of the ensured list is necessary because the dependencies
+// must be statically analyzable by Webpack. (Please let me know if you
+// have a better way of handling this!)
+const Bar = resolve => require.ensure(['./Bar.vue', './Baz.vue'], () => {
+  resolve(require('./Bar.vue'))
+})
+
+const Baz = resolve => require.ensure(['./Bar.vue', './Baz.vue'], () => {
+  resolve(require('./Baz.vue'))
+})
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
   routes: [
     { path: '/', component: Home },
     // Just use them normally in the route config
     { path: '/foo', component: Foo },
-    { path: '/bar', component: Bar }
+    // Bar and Baz belong to the same root route
+    // and grouped in the same async chunk.
+    { path: '/bar', component: Bar,
+      children: [
+        { path: 'baz', component: Baz }
+      ]
+    }
   ]
 })
 
@@ -38,6 +63,7 @@ new Vue({
         <li><router-link to="/">/</router-link></li>
         <li><router-link to="/foo">/foo</router-link></li>
         <li><router-link to="/bar">/bar</router-link></li>
+        <li><router-link to="/bar/baz">/bar/baz</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>