Lazy load & code splitting

juanwmedia · Jun 17, 2020 · c90b627 · c90b627
1 parent 04a7e69
commit c90b627
Showing 1 changed file with 23 additions and 11 deletions.
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,10 +1,10 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import AppUserList from "../views/AppUserList.vue";
-import AppContact from "../views/AppContact.vue";
-import AppLegal from "../views/AppLegal.vue";
-import AppUser from "../views/AppUser.vue";
-import UserInfo from "../components/UserInfo.vue";
+// import AppUserList from "../views/AppUserList.vue";
+// import AppContact from "../views/AppContact.vue";
+// import AppLegal from "../views/AppLegal.vue";
+// import AppUser from "../views/AppUser.vue";
+// import UserInfo from "../components/UserInfo.vue";
 import NotFound from "../components/NotFound.vue";
 
 Vue.use(VueRouter);
@@ -14,32 +14,44 @@ const routes = [
   //   path: "/",
   //   redirect: { name: "Home" }
   // },
-  { path: "/user", component: AppUserList, alias: "/" },
   {
     path: "/user",
     name: "Home",
-    component: AppUserList
+    component: () =>
+      import(/* webpackChunkName: "AppUserList" */ "../views/AppUserList.vue"),
+    alias: "/"
   },
+  // {
+  //   path: "/user",
+  //   name: "Home",
+  //   component: AppUserList
+  // },
   {
     path: "/contact",
     name: "Contact",
-    component: AppContact
+    component: () =>
+      import(/* webpackChunkName: "AppContact" */ "../views/AppContact.vue")
   },
   {
     path: "/legal",
     name: "Legal",
-    component: AppLegal
+    component: () =>
+      import(/* webpackChunkName: "AppLegal" */ "../views/AppLegal.vue")
   },
   {
     path: "/user/:username",
     name: "Users",
-    component: AppUser,
+    component: () =>
+      import(/* webpackChunkName: "AppUser" */ "../views/AppUser.vue"),
     children: [
       {
         path: "information",
         name: "Info",
         props: true,
-        component: UserInfo
+        component: () =>
+          import(
+            /* webpackChunkName: "UserInfo" */ "../components/UserInfo.vue"
+          )
       }
     ]
   },