feat[ptr]: 异步组件 + 进度条

Author: ceilf6

Vue2/sandboxs/package-lock.json

@@ -26,6 +26,7 @@
     "axios": "^1.13.4",
     "core-js": "^3.6.5",
     "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
     "querystring": "^0.2.1",
     "vue": "^2.6.11",
     "vue-router": "^3.6.5",

Vue2/sandboxs/package.json

@@ -8,28 +8,30 @@
 // import AdminAction from '../views/Admin/component/AdminAction.vue'
 // import Loading from '../views/Loading'
 
+import { syncGetComp } from "../utils"
+
 export default [
-    { name: "Home", path: "/", component: () => import(/* webpackChunkName: "home" */ "@/views/Home"), }, // 一个对象就是一条匹配规则
-    { name: "About", path: "/about", component: () => import(/* webpackChunkName: "about" */"@/views/About"), },
-    { name: "Blog", path: "/article", component: () => import(/* webpackChunkName: "blog" */"@/views/Blog"), },
-    { name: "CategoryBlog", path: "/article/cate/:categoryId", component: () => import(/* webpackChunkName: "blog" */ "@/views/Blog"), },
-    { name: "Message", path: "/message", component: () => import(/* webpackChunkName: "message" */ "@/views/Message"), },
+    { name: "Home", path: "/", component: syncGetComp(() => import(/* webpackChunkName: "home" */ "@/views/Home")), }, // 一个对象就是一条匹配规则
+    { name: "About", path: "/about", component: syncGetComp(() => import(/* webpackChunkName: "about" */"@/views/About")), },
+    { name: "Blog", path: "/article", component: syncGetComp(() => import(/* webpackChunkName: "blog" */"@/views/Blog")), },
+    { name: "CategoryBlog", path: "/article/cate/:categoryId", component: syncGetComp(() => import(/* webpackChunkName: "blog" */ "@/views/Blog")), },
+    { name: "Message", path: "/message", component: syncGetComp(() => import(/* webpackChunkName: "message" */ "@/views/Message")), },
     // { name: "Admin", path: "/admin", component: Admin },
     // { name: "AdminHome", path: "/admin/home", component: AdminHome },
     // { name: "AdminLogin", path: "/admin/login", component: AdminLogin }
     {
         name: "Admin",
         path: "/admin",
-        component: () => import(/* webpackChunkName: "admin" */ "@/views/Admin"),
+        component: syncGetComp(() => import(/* webpackChunkName: "admin" */ "@/views/Admin")),
         children: [
-            { name: "AdminHome", path: "home", component: () => import(/* webpackChunkName: "adminHome" */ "@/views/Admin/component/Home"), },
-            { name: "AdminLogin", path: "login", component: () => import(/* webpackChunkName: "adminLogin" */ "@/views/Admin/component/Login") },
+            { name: "AdminHome", path: "home", component: syncGetComp(() => import(/* webpackChunkName: "adminHome" */ "@/views/Admin/component/Home")), },
+            { name: "AdminLogin", path: "login", component: syncGetComp(() => import(/* webpackChunkName: "adminLogin" */ "@/views/Admin/component/Login")) },
             {
                 name: "AdminAction", path: "action",
-                component: () => import(/* webpackChunkName: "adminAction" */ "@/views/Admin/component/AdminAction"),
+                component: syncGetComp(() => import(/* webpackChunkName: "adminAction" */ "@/views/Admin/component/AdminAction")),
                 meta: { auth: true } // 挂上额外信息 meta 用于 to 路由鉴权
             }
         ]
     },
-    { name: "Loading", path: "/loading", component: () => import(/* webpackChunkName: "loading" */ "@/views/Loading"), }
+    { name: "Loading", path: "/loading", component: syncGetComp(() => import(/* webpackChunkName: "loading" */ "@/views/Loading")), }
 ]

Vue2/sandboxs/src/router/routes.js

@@ -0,0 +1,7 @@
+<template>
+  <h1>动态加载的异步组件</h1>
+</template>
+
+<script>
+export default {};
+</script>

Vue2/sandboxs/src/test/TestSyncComp.vue

@@ -1,4 +1,5 @@
 export { default as toast } from './toast';
 export { default as getComponentRootDom } from './getComponentRootDom';
 export { default as formatDate } from './formatDate'
-export { default as delay } from './delay'
+export { default as delay } from './delay'
+export { default as syncGetComp } from './syncGetComp'

Vue2/sandboxs/src/utils/index.js

@@ -0,0 +1,26 @@
+import delay from './delay'
+import { start, done, configure } from "nprogress"
+import 'nprogress/nprogress.css'
+
+configure({
+    tickleSpeed: 16,
+    showSpinner: false,
+})
+
+/**
+ * 
+ * @param {*} getWay 获取目标组件的执行语句，例如 () => import('./Comp') 
+ * @returns 
+ */
+export default function syncGetComp(getWay) {
+    return async () => {
+        console.log('开始加载')
+        start()
+        if (process.env.NODE_ENV === 'development') await delay(2000)
+        // process 正常来说只有 Node.js 有，但是 Vue-cli 自动挂载 var 了
+        const comp = await getWay()
+        console.log("加载结束")
+        done()
+        return comp
+    }
+}

Vue2/sandboxs/src/utils/syncGetComp.js

@@ -1,7 +1,28 @@
 <template>
-  <h1>Talk whatever wanna</h1>
+  <div>
+    <h1>Talk whatever wanna</h1>
+    <SyncComp />
+  </div>
 </template>
 
 <script>
-export default {};
+// import TestSyncComp from "@/test/TestSyncComp.vue";
+// const SyncComp = () => {
+//   return new Promise((resolve) => {
+//     setTimeout(async () => {
+//     //   resolve(TestSyncComp);
+//     // }, 3000);
+//     })
+//   });
+// };
+const SyncComp = async () => {
+  const res = await import("@/test/TestSyncComp.vue");
+  return res;
+};
+
+export default {
+  components: {
+    SyncComp,
+  },
+};
 </script>