feat: split doc files (#4792)

build/cooking.demo.js

@@ -55,6 +55,11 @@ cooking.add('loader.md', {
   loader: 'vue-markdown-loader'
 });
 
+cooking.add(
+  'output.chunkFilename',
+  isProd ? '[name].[chunkhash:7].js' : '[name].js'
+);
+
 cooking.add('vueMarkdown', {
   use: [
     [require('markdown-it-anchor'), {

examples/components/footer.vue

@@ -146,7 +146,7 @@
 
     computed: {
       lang() {
-        return this.$route.path.split('/')[1];
+        return this.$route.path.split('/')[1] || 'zh-CN';
       },
 
       langConfig() {

examples/route.config.js

@@ -1,6 +1,40 @@
 import navConfig from './nav.config.json';
 import langs from './i18n/route.json';
 
+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 registerRoute = (navConfig) => {
   let route = [];
   Object.keys(navConfig).forEach((lang, index) => {
@@ -8,7 +42,7 @@ const registerRoute = (navConfig) => {
     route.push({
       path: `/${ lang }/component`,
       redirect: `/${ lang }/component/installation`,
-      component: require(`./pages/${ lang }/component.vue`),
+      component: load(lang, 'component'),
       children: []
     });
     navs.forEach(nav => {
@@ -30,8 +64,8 @@ const registerRoute = (navConfig) => {
   });
   function addRoute(page, lang, index) {
     const component = page.path === '/changelog'
-      ? require(`./pages/${ lang }/changelog.vue`)
-      : require(`./docs/${ lang }${page.path}.md`);
+      ? load(lang, 'changelog')
+      : loadDocs(lang, page.path);
     let child = {
       path: page.path.slice(1),
       meta: {
@@ -55,17 +89,17 @@ const generateMiscRoutes = function(lang) {
   let guideRoute = {
     path: `/${ lang }/guide`, // 指南
     redirect: `/${ lang }/guide/design`,
-    component: require(`./pages/${ lang }/guide.vue`),
+    component: load(lang, 'guide'),
     children: [{
       path: 'design', // 设计原则
       name: 'guide-design' + lang,
       meta: { lang },
-      component: require(`./pages/${ lang }/design.vue`)
+      component: load(lang, 'design')
     }, {
       path: 'nav', // 导航
       name: 'guide-nav' + lang,
       meta: { lang },
-      component: require(`./pages/${ lang }/nav.vue`)
+      component: load(lang, 'nav')
     }]
   };
 
@@ -73,14 +107,14 @@ const generateMiscRoutes = function(lang) {
     path: `/${ lang }/resource`, // 资源
     meta: { lang },
     name: 'resource' + lang,
-    component: require(`./pages/${ lang }/resource.vue`)
+    component: load(lang, 'resource')
   };
 
   let indexRoute = {
     path: `/${ lang }`, // 首页
     meta: { lang },
     name: 'home' + lang,
-    component: require(`./pages/${ lang }/index.vue`)
+    component: load(lang, 'index')
   };
 
   return [guideRoute, resourceRoute, indexRoute];