[文档] 路由懒加载，解决第一次访问较慢的问题

yelog · Aug 2, 2019 · f6014f4 · f6014f4
1 parent 68b5755
commit f6014f4
Show file tree

Hide file tree

Showing 46 changed files with 51 additions and 45 deletions.
diff --git a/docs/0.js b/docs/0.js
diff --git a/docs/1.js b/docs/1.js
diff --git a/docs/10.js b/docs/10.js
diff --git a/docs/11.js b/docs/11.js
diff --git a/docs/12.js b/docs/12.js
diff --git a/docs/13.js b/docs/13.js
diff --git a/docs/14.js b/docs/14.js
diff --git a/docs/15.js b/docs/15.js
diff --git a/docs/16.js b/docs/16.js
diff --git a/docs/17.js b/docs/17.js
diff --git a/docs/18.js b/docs/18.js
diff --git a/docs/19.js b/docs/19.js
diff --git a/docs/2.js b/docs/2.js
diff --git a/docs/20.js b/docs/20.js
diff --git a/docs/21.js b/docs/21.js
diff --git a/docs/22.js b/docs/22.js
diff --git a/docs/23.js b/docs/23.js
diff --git a/docs/24.js b/docs/24.js
diff --git a/docs/25.js b/docs/25.js
diff --git a/docs/26.js b/docs/26.js
diff --git a/docs/27.js b/docs/27.js
diff --git a/docs/28.js b/docs/28.js
diff --git a/docs/29.js b/docs/29.js
diff --git a/docs/3.js b/docs/3.js
diff --git a/docs/30.js b/docs/30.js
diff --git a/docs/31.js b/docs/31.js
diff --git a/docs/32.js b/docs/32.js
diff --git a/docs/33.js b/docs/33.js
diff --git a/docs/34.js b/docs/34.js
diff --git a/docs/35.js b/docs/35.js
diff --git a/docs/36.js b/docs/36.js
diff --git a/docs/37.js b/docs/37.js
diff --git a/docs/38.js b/docs/38.js
diff --git a/docs/39.js b/docs/39.js
diff --git a/docs/4.js b/docs/4.js
diff --git a/docs/5.js b/docs/5.js
diff --git a/docs/6.js b/docs/6.js
diff --git a/docs/7.js b/docs/7.js
diff --git a/docs/8.js b/docs/8.js
diff --git a/docs/9.js b/docs/9.js
diff --git a/docs/app.aa10e87.js → docs/app.b92c416.js b/docs/app.aa10e87.js → docs/app.b92c416.js
diff --git a/docs/en-US.js b/docs/en-US.js
diff --git a/docs/en-US~zh-CN.js b/docs/en-US~zh-CN.js
diff --git a/docs/index.html b/docs/index.html
@@ -19,7 +19,7 @@
     <div id="app"></div>
     <script src="layui/layui.js"></script>
 
-  <script type="text/javascript" src="app.aa10e87.js"></script></body>
+  <script type="text/javascript" src="app.b92c416.js"></script></body>
 
   <script>
     var ga = function() {

diff --git a/docs/zh-CN.js b/docs/zh-CN.js
diff --git a/documents/route.config.js b/documents/route.config.js
@@ -1,39 +1,8 @@
 import navConfig from './nav.config'
 import langs from './i18n/route'
 
-const LOAD_MAP = {
-  'zh-CN': name => {
-    return r => require.ensure([], () =>
-      r(require(`./pages/zh-CN/${name}.vue`)),
-    'zh-CN')
-  },
-  'en-US': name => {
-    return r => require.ensure([], () =>
-      r(require(`./pages/en-US/${name}.vue`)),
-    'en-US')
-  }
-}
-
-const load = function (lang, path) {
-  return LOAD_MAP[lang](path)
-}
-
-const LOAD_DOCS_MAP = {
-  'zh-CN': path => {
-    return r => require.ensure([], () =>
-      r(require(`./docs/zh-CN${path}.md`)),
-    'zh-CN')
-  },
-  'en-US': path => {
-    return r => require.ensure([], () =>
-      r(require(`./docs/en-US${path}.md`)),
-    'en-US')
-  }
-}
-
-const loadDocs = function (lang, path) {
-  return LOAD_DOCS_MAP[lang](path)
-}
+const importMap = (lang, name) => () => import(`./pages/${lang}/${name}.vue`)
+const importDocs = (lang, path) => () => import(`./docs/${lang}${path}.md`)
 
 const registerRoute = (navConfig) => {
   let route = []
@@ -42,7 +11,7 @@ const registerRoute = (navConfig) => {
     route.push({
       path: `/${lang}/component`,
       redirect: `/${lang}/component/installation`,
-      component: load(lang, 'component'),
+      component: importMap(lang, 'component'),
       children: []
     })
     navs.forEach(nav => {
@@ -63,7 +32,7 @@ const registerRoute = (navConfig) => {
     })
   })
   function addRoute (page, lang, index) {
-    const component = loadDocs(lang, page.path)
+    const component = importDocs(lang, page.path)
     let child = {
       path: page.path.slice(1),
       meta: {
@@ -87,33 +56,33 @@ const generateMiscRoutes = function (lang) {
   let guideRoute = {
     path: `/${lang}/guide`, // 指南
     redirect: `/${lang}/guide/design`,
-    component: load(lang, 'guide'),
+    component: importMap(lang, 'guide'),
     children: [{
       path: 'design', // 设计原则
       name: 'guide-design' + lang,
       meta: { lang },
-      component: load(lang, 'design')
+      component: importMap(lang, 'design')
     }, {
       path: 'nav', // 导航
       name: 'guide-nav' + lang,
       meta: { lang },
-      component: load(lang, 'nav')
+      component: importMap(lang, 'nav')
     }]
   }
 
   let resourceRoute = {
     path: `/${lang}/resource`, // 资源
     meta: { lang },
     name: 'resource' + lang,
-    component: load(lang, 'resource')
+    component: importMap(lang, 'resource')
   }
 
   let indexRoute = {
     path: `/${lang}`, // 首页
     meta: { lang },
     name: 'home' + lang,
     redirect: `/${lang}/component/changelog`,
-    component: load(lang, 'index')
+    component: importMap(lang, 'index')
   }
 
   return [guideRoute, resourceRoute, indexRoute]