From 0b9758a89a28b182aa9d55afa3ac565b1d105412 Mon Sep 17 00:00:00 2001 From: wangyi7099 <724003548@qq.com> Date: Sat, 10 Aug 2019 14:29:09 +0800 Subject: [PATCH] feat(antdsite): add useCNDForLargeFiles that you can use cnd for those large files. --- .circleci/config.yml | 16 ++------- package.json | 2 +- .../antdsite/__default__/default-config.js | 1 + packages/antdsite/gatsby-ssr.js | 19 ++++++++++ .../lib/gatsby/onCreateWebpackConfig.js | 15 +++++++- packages/antdsite/lib/large-file-list.js | 19 ++++++++++ packages/antdsite/lib/util.js | 21 +++++++++-- .../src/default-theme/components/SEO/SEO.tsx | 6 ++-- packages/antdsite/src/html.js | 36 ------------------- packages/docs/package.json | 2 +- 10 files changed, 78 insertions(+), 59 deletions(-) create mode 100644 packages/antdsite/gatsby-ssr.js create mode 100644 packages/antdsite/lib/large-file-list.js delete mode 100644 packages/antdsite/src/html.js diff --git a/.circleci/config.yml b/.circleci/config.yml index d67fbff..4322350 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/package.json b/package.json index 4bc88ed..a8c2945 100644 --- a/package.json +++ b/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": [ diff --git a/packages/antdsite/__default__/default-config.js b/packages/antdsite/__default__/default-config.js index e5ef5f5..a335dda 100644 --- a/packages/antdsite/__default__/default-config.js +++ b/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, diff --git a/packages/antdsite/gatsby-ssr.js b/packages/antdsite/gatsby-ssr.js new file mode 100644 index 0000000..52b5451 --- /dev/null +++ b/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); + } +}; diff --git a/packages/antdsite/lib/gatsby/onCreateWebpackConfig.js b/packages/antdsite/lib/gatsby/onCreateWebpackConfig.js index eafb43a..a5c8266 100644 --- a/packages/antdsite/lib/gatsby/onCreateWebpackConfig.js +++ b/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 + }); + } }; diff --git a/packages/antdsite/lib/large-file-list.js b/packages/antdsite/lib/large-file-list.js new file mode 100644 index 0000000..936820d --- /dev/null +++ b/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; diff --git a/packages/antdsite/lib/util.js b/packages/antdsite/lib/util.js index b48aba1..bfc4dff 100644 --- a/packages/antdsite/lib/util.js +++ b/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; }; diff --git a/packages/antdsite/src/default-theme/components/SEO/SEO.tsx b/packages/antdsite/src/default-theme/components/SEO/SEO.tsx index 67f9103..b11c925 100644 --- a/packages/antdsite/src/default-theme/components/SEO/SEO.tsx +++ b/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 = ({ {/* General tags */} @@ -31,7 +31,7 @@ const SEO = ({ tag[0], { key: index, - ...(tag[1] || {}), + ...(tag[1] || {}) }, tag[2] ); diff --git a/packages/antdsite/src/html.js b/packages/antdsite/src/html.js deleted file mode 100644 index 68e650f..0000000 --- a/packages/antdsite/src/html.js +++ /dev/null @@ -1,36 +0,0 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/destructuring-assignment */ -/* eslint-disable jsx-a11y/html-has-lang */ -import React from 'react'; -import PropTypes from 'prop-types'; - -export default function HTML(props) { - return ( - - - - - - {props.headComponents} - - - {props.preBodyComponents} - -
- {props.postBodyComponents} - - - ); -} - -HTML.propTypes = { - htmlAttributes: PropTypes.object, - headComponents: PropTypes.array, - bodyAttributes: PropTypes.object, - preBodyComponents: PropTypes.array, - body: PropTypes.string, - postBodyComponents: PropTypes.array, -}; diff --git a/packages/docs/package.json b/packages/docs/package.json index 36c662e..eb76a10 100644 --- a/packages/docs/package.json +++ b/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",