site: improve load performance

site/bisheng.config.js

@@ -1,5 +1,17 @@
 const path = require('path');
 
+function pickerGenerator(module) {
+  const tester = new RegExp(`^docs/${module}`);
+  return (markdownData) => {
+    const filename = markdownData.meta.filename;
+    if (tester.test(filename) && !/\.en-US\.md/.test(filename)) {
+      return {
+        meta: markdownData.meta,
+      };
+    }
+  };
+}
+
 module.exports = {
   port: 8001,
   source: [
@@ -24,6 +36,18 @@ module.exports = {
         meta: markdownData.meta,
       };
     },
+    changelog(markdownData) {
+      if (markdownData.meta.filename === 'CHANGELOG.md') {
+        return {
+          meta: markdownData.meta,
+        };
+      }
+    },
+    'docs/pattern': pickerGenerator('pattern'),
+    'docs/practice': pickerGenerator('practice'),
+    'docs/react': pickerGenerator('react'),
+    'docs/resource': pickerGenerator('resource'),
+    'docs/spec': pickerGenerator('spec'),
   },
   theme: './site/theme',
   htmlTemplate: './site/theme/static/template.html',

site/theme/template/Content/MainContent.jsx

@@ -95,9 +95,19 @@ export default class MainContent extends React.Component {
     return [...topLevel, ...itemGroups];
   }
 
+  getModuleData() {
+    const props = this.props;
+    const pathname = props.location.pathname;
+    const moduleName = /^components/.test(pathname) ?
+            'components' : pathname.split('/').slice(0, 2).join('/');
+    return moduleName === 'components' || moduleName === 'changelog' || moduleName === 'docs/react' ?
+      [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
+      props.picked[moduleName];
+  }
+
   getMenuItems() {
-    const moduleData = this.props.moduleData;
-    const menuItems = utils.getMenuItems(moduleData, this.context.intl.locale);
+    const moduleData = this.getModuleData();
+    const menuItems = utils.getMenuItems(moduleData);
     const topLevel = this.generateSubMenuItems(menuItems.topLevel);
     const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel)
       .sort((a, b) => config.categoryOrder[a] - config.categoryOrder[b])
@@ -143,18 +153,14 @@ export default class MainContent extends React.Component {
     const menuItems = this.getMenuItems();
     const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
 
-    const locale = this.context.intl.locale;
-    const moduleData = this.props.moduleData;
-    const localizedPageData = moduleData.filter(
-      page => page.meta.filename.toLowerCase().startsWith(props.location.pathname)
-    )[0];
-
+    const moduleData = this.getModuleData();
+    const localizedPageData = props.localizedPageData;
     return (
       <div className="main-wrapper">
         <Row>
           <Col lg={4} md={6} sm={24} xs={24}>
             <Menu className="aside-container" mode="inline"
-              openKeys={Object.keys(utils.getMenuItems(moduleData, locale))}
+              openKeys={Object.keys(utils.getMenuItems(moduleData))}
               selectedKeys={[activeMenuItem]}
             >
               {menuItems}

site/theme/template/Content/index.jsx

@@ -1,39 +1,32 @@
 import React from 'react';
 import MainContent from './MainContent';
 import Promise from 'bluebird';
-import * as utils from '../utils';
+
+// locale copy from layout
+const locale = (
+  window.localStorage &&
+    localStorage.getItem('locale') !== 'en-US'
+) ? 'zh-CN' : 'en-US';
 
 export function collect(nextProps, callback) {
-  const componentsList = utils.collectDocs(nextProps.data.components);
+  const pageData = nextProps.location.pathname === 'changelog' ?
+          nextProps.data.CHANGELOG : nextProps.pageData;
+  const pageDataPromise = typeof pageData === 'function' ?
+          pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
+  const promises = [pageDataPromise];
 
   const pathname = nextProps.location.pathname;
-  let moduleDocs;
-  if (/(docs\/react\/)|(components\/)|(changelog)/i.test(pathname)) {
-    moduleDocs = [
-      ...utils.collectDocs(nextProps.data.docs.react),
-      ...componentsList,
-      /* eslint-disable new-cap */
-      nextProps.data.CHANGELOG(),
-      /* eslint-enable new-cap */
-    ];
-  } else {
-    moduleDocs = utils.collectDocs(
-      nextProps.utils.get(nextProps.data, pathname.split('/').slice(0, 2))
-    );
-  }
-
-  const demos = nextProps.utils.get(nextProps.data, [...pathname.split('/'), 'demo']);
-
-  const promises = [Promise.all(componentsList), Promise.all(moduleDocs)];
+  const demos = nextProps.utils.get(
+    nextProps.data, [...pathname.split('/'), 'demo']
+  );
   if (demos) {
     promises.push(demos());
   }
   Promise.all(promises)
     .then((list) => callback(null, {
       ...nextProps,
-      components: list[0],
-      moduleData: list[1],
-      demos: list[2],
+      localizedPageData: list[0],
+      demos: list[1],
     }));
 }
 

site/theme/template/utils.jsx

@@ -1,21 +1,5 @@
-export function collectDocs(docs) {
-  // locale copy from layout
-  const locale = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'en-US') ?
-        'zh-CN' : 'en-US';
-  const docsList = Object.keys(docs)
-    .map(key => docs[key])
-    .map((value) => {
-      if (typeof value !== 'function') {
-        return value[locale] || value.index[locale] || value.index;
-      }
-      return value;
-    })
-    .map(fn => fn());
-  return docsList;
-}
-
-export function getMenuItems(data) {
-  const menuMeta = data.map((item) => item.meta);
+export function getMenuItems(moduleData) {
+  const menuMeta = moduleData.map(item => item.meta);
   const menuItems = {};
   menuMeta.sort(
     (a, b) => (a.order || 0) - (b.order || 0)
@@ -32,7 +16,6 @@ export function getMenuItems(data) {
 
     menuItems[category][type].push(meta);
   });
-
   return menuItems;
 }