feat: demonstrate route-level code splitting in generated file

yyx990803 · yyx990803 · commit 7d46db926a2b · 2018-07-24T09:56:05.000-04:00
close vuejs#1928
diff --git a/packages/@vue/cli-service/generator/router/template/src/router.js b/packages/@vue/cli-service/generator/router/template/src/router.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from './views/Home.vue'
-import About from './views/About.vue'
 
 Vue.use(Router)
 
@@ -15,7 +14,13 @@ export default new Router({
     {
       path: '/about',
       name: 'about',
-      component: About
+      // route level code-splitting
+      // this generates a separate chunk (about.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import(
+        /* webpackChunkName: "about" */
+        './views/About.vue'
+      )
     }
   ]
 })
