perf(antdsite): allow to set cdn link for production build.

YvesCoding · Aug 10, 2019 · 98a4b3b · 98a4b3b
1 parent b5531b5
commit 98a4b3b
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 37 deletions.
diff --git a/packages/antdsite/__default__/default-config.js b/packages/antdsite/__default__/default-config.js
@@ -8,6 +8,26 @@ module.exports = {
   head: [],
   footer: null,
   useCNDForLargeFiles: true,
+  largeFileList: [
+    {
+      name: 'moment',
+      umdName: 'moment',
+      cdnLink: 'https://gw.alipayobjects.com/os/lib/moment/2.24.0/min/moment.min.js'
+    },
+    {
+      order: 2,
+      name: 'react-dom',
+      umdName: 'ReactDOM',
+      cdnLink:
+        'https://gw.alipayobjects.com/os/lib/react-dom/16.8.1/umd/react-dom.production.min.js'
+    },
+    {
+      order: 1,
+      name: 'react',
+      umdName: 'React',
+      cdnLink: 'https://gw.alipayobjects.com/os/lib/react/16.8.1/umd/react.production.min.js'
+    }
+  ],
   themeConfig: {
     themeColors: null,
     repo: null,

diff --git a/packages/antdsite/gatsby-ssr.js b/packages/antdsite/gatsby-ssr.js
@@ -1,11 +1,16 @@
 const React = require('react');
-const largeFileList = require('./lib/large-file-list');
 const config = require('./.cache/finalConfig');
 
 exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
   if (config.useCNDForLargeFiles) {
     const headComponents = getHeadComponents() || [];
-    largeFileList.forEach(file => {
+    const fileList = config.largeFileList;
+    // sort by order desc
+    fileList.sort((a, b) => {
+      return b.order - a.order;
+    });
+
+    fileList.forEach(file => {
       headComponents.unshift(
         React.createElement('script', {
           type: 'text/javascript',

diff --git a/packages/antdsite/lib/gatsby/onCreateWebpackConfig.js b/packages/antdsite/lib/gatsby/onCreateWebpackConfig.js
@@ -1,5 +1,4 @@
 const { resolveLayouts, setThemeColors, getFinalConfig } = require('../util');
-const largeFileList = require('../large-file-list');
 const config = getFinalConfig();
 
 module.exports = ({ stage, actions, loaders }) => {
@@ -19,9 +18,13 @@ module.exports = ({ stage, actions, loaders }) => {
     });
   }
 
-  if (config.useCNDForLargeFiles && stage !== 'build-html') {
+  if (
+    config.useCNDForLargeFiles &&
+    stage !== 'build-html' &&
+    process.env.NODE_ENV !== 'development'
+  ) {
     const externals = {};
-    largeFileList.forEach(file => {
+    config.largeFileList.forEach(file => {
       externals[file.name] = file.umdName;
     });
 

diff --git a/packages/antdsite/lib/large-file-list.js b/packages/antdsite/lib/large-file-list.js
diff --git a/packages/antdsite/lib/util.js b/packages/antdsite/lib/util.js
@@ -46,7 +46,9 @@ function isObject(receive) {
 
 function deepMerge(from, to) {
   for (var key in from) {
-    if (isObject(from[key]) && to && isObject(to[key])) {
+    if (Array.isArray(from[key] || Array.isArray(to[key]))) {
+      from[key] = [].concat(from[key]).concat(to[key]);
+    } else if (isObject(from[key]) && to && isObject(to[key])) {
       deepMerge(from[key], to[key]);
     } else {
       if (!to) {

diff --git a/packages/antdsite/src/templates/index.tsx b/packages/antdsite/src/templates/index.tsx
@@ -9,7 +9,6 @@ import Layout from 'antdsite-layout';
 import MDXRenderer from 'gatsby-mdx-fix/mdx-renderer';
 import Media from 'react-media';
 import { MDXProvider } from '@mdx-js/react';
-const antd = require('antd');
 
 export interface IGraphqlFrontmatterData {
   title: string;
@@ -94,7 +93,7 @@ export default function Template(props: {
   const { body } = props.data.mdx.code;
 
   return (
-    <MDXProvider components={{ ...antd, ...{ PageCustomer: PageContext.Consumer } }}>
+    <MDXProvider components={{ ...{ PageCustomer: PageContext.Consumer } }}>
       <PageContext.Provider
         value={{
           ...pageContext,

diff --git a/packages/docs/docs/guide/usejsx.md b/packages/docs/docs/guide/usejsx.md
@@ -29,9 +29,7 @@ export const ShowTime = () => {
         return (
           <div className="modifiedTime modifiedTimeLeft">
             {context.currentLocaleWebConfig.themeConfig.lastUpdated}{' '}
-            {moment(context.currentPageInfo.fields.modifiedTime).format(
-              'YYYY-MM-DD HH:mm:SS'
-            )}
+            {moment(context.currentPageInfo.fields.modifiedTime).format('YYYY-MM-DD HH:mm:SS')}
           </div>
         );
       }}
@@ -60,16 +58,17 @@ import {ShowTime} from '@components/ShowModifiedTime'
 
 ## Use `antd`
 
-Use components of `antd` directly in markdown without importing.
-
 ```jsx
+import {Button} from 'antd'
+
 <Button>Button</Button>
 <br />
 <Switch defaultChecked style={{marginTop:'15px'}} />
 ```
 
 The result is as follow:
 
+import {Button} from 'antd'
 <Button>Button</Button>
 
 <br />

diff --git a/packages/docs/docs/zh/guide/usejsx.md b/packages/docs/docs/zh/guide/usejsx.md
@@ -29,9 +29,7 @@ export const ShowTime = () => {
         return (
           <div className="modifiedTime modifiedTimeLeft">
             {context.currentLocaleWebConfig.themeConfig.lastUpdated}{' '}
-            {moment(context.currentPageInfo.fields.modifiedTime).format(
-              'YYYY-MM-DD HH:mm:SS'
-            )}
+            {moment(context.currentPageInfo.fields.modifiedTime).format('YYYY-MM-DD HH:mm:SS')}
           </div>
         );
       }}
@@ -60,16 +58,17 @@ import {ShowTime} from '@components/ShowModifiedTime'
 
 ## 使用`antd`
 
-不用`import`, 直接在 markdown 中使用 `antd` 里面的组件
-
 ```jsx
+import {Button} from 'antd';
+
 <Button>Button</Button>
 <br />
 <Switch defaultChecked style={{marginTop:'15px'}} />
 ```
 
 效果如下：
 
+import {Button} from 'antd';
 <Button>Button</Button>
 
 <br />