feat: demonstrate route-level code splitting in generated file

close #1928
vuejs · Jul 24, 2018 · 7d46db9 · 7d46db9
1 parent e9d01eb
commit 7d46db9
Showing 1 changed file with 7 additions and 2 deletions.
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'
+      )
     }
   ]
 })