feat(antdsite): add useCNDForLargeFiles that you can use cnd for thos…

…e large files.

.circleci/config.yml

@@ -24,23 +24,11 @@ jobs:
       - checkout
       - run: yarn && yarn bs
       - run: yarn build-with-prefix
-      - persist_to_workspace:
-          root: ~/project
-          paths:
-            - antdsite
-  send-docs:
-    <<: *defaults
-    steps:
-      - attach_workspace:
-          at: ~/project
       - run: ssh -o "StrictHostKeyChecking no" root@$DOCKER_IP "rm -rf /etc/ngxin/website/antdsite"
-      - run: scp -o "StrictHostKeyChecking no" -r packages/docs/public root@$DOCKER_IP:/etc/nginx/website/antdsite
+      - run: scp -o "StrictHostKeyChecking no" -r packages/docs/public/. root@$DOCKER_IP:/etc/nginx/website/antdsite
 workflows:
   version: 2
   build-and-deploy:
     jobs:
-      - build-docs
-      - send-docs:
-          requires:
-            - build-docs
+      - build-docs:
           context: aliyun

package.json

@@ -7,7 +7,7 @@
     "build": "yarn build:docs",
     "build:docs": "yarn workspace docs build",
     "start": "yarn workspace docs start",
-    "build-with-prefix": "cross-env base=/antdsite yarn build",
+    "build-with-prefix": "cross-env base=/antdsite  yarn build",
     "cl": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "workspaces": [

packages/antdsite/__default__/default-config.js

@@ -7,6 +7,7 @@ module.exports = {
   lang: 'en-US',
   head: [],
   footer: null,
+  useCNDForLargeFiles: true,
   themeConfig: {
     themeColors: null,
     repo: null,

packages/antdsite/gatsby-ssr.js

@@ -0,0 +1,19 @@
+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 => {
+      headComponents.unshift(
+        React.createElement('script', {
+          type: 'text/javascript',
+          src: file.cdnLink,
+          key: file.cdnLink
+        })
+      );
+    });
+    replaceHeadComponents(headComponents);
+  }
+};

packages/antdsite/lib/gatsby/onCreateWebpackConfig.js

@@ -1,4 +1,6 @@
-const { resolveLayouts, setThemeColors } = require('../util');
+const { resolveLayouts, setThemeColors, getFinalConfig } = require('../util');
+const largeFileList = require('../large-file-list');
+const config = getFinalConfig();
 
 module.exports = ({ stage, actions, loaders }) => {
   resolveLayouts(actions);
@@ -16,4 +18,15 @@ module.exports = ({ stage, actions, loaders }) => {
       }
     });
   }
+
+  if (config.useCNDForLargeFiles && stage !== 'build-html') {
+    const externals = {};
+    largeFileList.forEach(file => {
+      externals[file.name] = file.umdName;
+    });
+
+    actions.setWebpackConfig({
+      externals
+    });
+  }
 };

packages/antdsite/lib/large-file-list.js

@@ -0,0 +1,19 @@
+const largeFileList = [
+  {
+    name: 'moment',
+    umdName: 'moment',
+    cdnLink: 'https://gw.alipayobjects.com/os/lib/moment/2.24.0/min/moment.min.js'
+  },
+  {
+    name: 'react-dom',
+    umdName: 'ReactDOM',
+    cdnLink: 'https://gw.alipayobjects.com/os/lib/react-dom/16.8.1/umd/react-dom.production.min.js'
+  },
+  {
+    name: 'react',
+    umdName: 'React',
+    cdnLink: 'https://gw.alipayobjects.com/os/lib/react/16.8.1/umd/react.production.min.js'
+  }
+];
+
+module.exports = largeFileList;

packages/antdsite/lib/util.js

@@ -1,12 +1,23 @@
 const path = require('path');
-const defaultConfig = require(path.resolve(__dirname, '../__default__/default-config'));
+const defaultConfig = require('../__default__/default-config');
 const chalk = require('chalk');
-const fs = require('fs');
+const fs = require('fs-extra');
+const os = require('os');
 
 const configName = '.antdsite/config.js';
 const themeName = '.antdsite/theme';
 
 let userConfig;
+let finalConfig;
+
+const createFinalConfig = config => {
+  const filePath = path.resolve(__dirname, '../.cache/finalConfig.js');
+  fs.ensureFileSync(filePath);
+  const exportConfig = `module.exports = 
+  ${JSON.stringify(config)}
+  `;
+  fs.writeFileSync(filePath, exportConfig + os.EOL);
+};
 
 module.exports.getUserConfig = () => {
   if (userConfig) return userConfig;
@@ -50,13 +61,17 @@ function deepMerge(from, to) {
 }
 
 module.exports.getFinalConfig = function() {
+  if (finalConfig) return finalConfig;
+
   const config = module.exports.getUserConfig();
 
   // merge with default config.
-  const finalConfig = deepMerge(config, defaultConfig);
+  finalConfig = deepMerge(config, defaultConfig);
 
   // validate & fix config.
   validateConfig(finalConfig);
+  // create a  config as a file for ssr reading.
+  createFinalConfig(finalConfig);
 
   return finalConfig;
 };

packages/antdsite/src/default-theme/components/SEO/SEO.tsx

@@ -5,7 +5,7 @@ const SEO = ({
   title,
   description,
   head,
-  lang,
+  lang
 }: {
   title: string;
   description: string;
@@ -16,7 +16,7 @@ const SEO = ({
     <React.Fragment>
       <Helmet
         htmlAttributes={{
-          lang,
+          lang
         }}
       >
         {/* General tags */}
@@ -31,7 +31,7 @@ const SEO = ({
             tag[0],
             {
               key: index,
-              ...(tag[1] || {}),
+              ...(tag[1] || {})
             },
             tag[2]
           );

packages/docs/package.json

@@ -8,7 +8,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "antdsite": "^0.1.3",
+    "antdsite": "^0.1.4",
     "gatsby": "^2.13.39",
     "gatsby-plugin-netlify": "^2.0.0",
     "react": "^16.8.0",