pref: optimize performance (#3542)

* pref: optimize performance

* pref: use less img

* pref: use less img

config/config.js

@@ -24,6 +24,7 @@ const plugins = [
       dynamicImport: {
         loadingComponent: './components/PageLoading/index',
         webpackChunkName: true,
+        level: 3,
       },
       pwa: pwa
         ? {
@@ -76,10 +77,7 @@ export default {
   },
   externals: {
     '@antv/data-set': 'DataSet',
-    // if is production externals react react-dom and bizcharts
-    ...(NODE_ENV === 'production'
-      ? { react: 'React', 'react-dom': 'ReactDOM', bizcharts: 'BizCharts' }
-      : {}),
+    bizcharts: 'BizCharts',
   },
   // proxy: {
   //   '/server/api/': {

mock/api.js

@@ -22,7 +22,7 @@ const avatars = [
 ];
 
 const avatars2 = [
-  'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+  'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
   'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
   'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
   'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',

mock/user.js

@@ -3,7 +3,7 @@ export default {
   // 支持值为 Object 和 Array
   'GET /api/currentUser': {
     name: 'Serati Ma',
-    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+    avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
     userid: '00000001',
     email: 'antdesign@alipay.com',
     signature: '海纳百川，有容乃大',

src/components/ActiveChart/index.js

 import React, { Component } from 'react';
 import { MiniArea } from '../Charts';
 import NumberInfo from '../NumberInfo';
-
 import styles from './index.less';
 
 function fixedZero(val) {

src/components/Charts/AsyncLoadBizCharts.js

+import React from 'react';
+import PageLoading from '../PageLoading';
+import { importCDN } from '@/utils/utils';
+
+let isLoaderBizChart = false;
+const loadBizCharts = async () => {
+  if (isLoaderBizChart) {
+    return Promise.resolve(true);
+  }
+  await Promise.all([
+    importCDN('//gw.alipayobjects.com/os/lib/bizcharts/3.4.3/umd/BizCharts.min.js'),
+    importCDN('//gw.alipayobjects.com/os/lib/antv/data-set/0.10.1/dist/data-set.min.js'),
+  ]);
+  // eslint-disable-next-line no-console
+  console.log('bizCharts load success');
+  isLoaderBizChart = true;
+  return Promise.resolve(true);
+};
+
+class AsyncLoadBizCharts extends React.Component {
+  state = {
+    loading: !isLoaderBizChart,
+  };
+
+  async componentDidMount() {
+    await loadBizCharts();
+    this.setState({
+      loading: false,
+    });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { loading } = this.state;
+    if (!loading) {
+      return children;
+    }
+    return <PageLoading />;
+  }
+}
+
+export { loadBizCharts, AsyncLoadBizCharts };

src/components/Charts/g2.js

-// 全局 G2 设置
-import { track, setTheme } from 'bizcharts';
-
-track(false);
-
-const config = {
-  defaultColor: '#1089ff',
-  shape: {
-    interval: {
-      fillOpacity: 1,
-    },
-  },
-};
-
-setTheme(config);

src/components/Charts/index.js

+import React, { Suspense } from 'react';
 import numeral from 'numeral';
-import './g2';
 import ChartCard from './ChartCard';
-import Bar from './Bar';
-import Pie from './Pie';
-import Radar from './Radar';
-import Gauge from './Gauge';
-import MiniArea from './MiniArea';
-import MiniBar from './MiniBar';
-import MiniProgress from './MiniProgress';
-import Field from './Field';
-import WaterWave from './WaterWave';
-import TagCloud from './TagCloud';
-import TimelineChart from './TimelineChart';
+
+const getComponent = Component => {
+  return props => {
+    return (
+      <Suspense fallback={null}>
+        <Component {...props} />
+      </Suspense>
+    );
+  };
+};
+
+const Bar = getComponent(React.lazy(() => import('./Bar')));
+const Pie = getComponent(React.lazy(() => import('./Pie')));
+const Radar = getComponent(React.lazy(() => import('./Radar')));
+const Gauge = getComponent(React.lazy(() => import('./Gauge')));
+const MiniArea = getComponent(React.lazy(() => import('./MiniArea')));
+const MiniBar = getComponent(React.lazy(() => import('./MiniBar')));
+const MiniProgress = getComponent(React.lazy(() => import('./MiniProgress')));
+const Field = getComponent(React.lazy(() => import('./Field')));
+const WaterWave = getComponent(React.lazy(() => import('./WaterWave')));
+const TagCloud = getComponent(React.lazy(() => import('./TagCloud')));
+const TimelineChart = getComponent(React.lazy(() => import('./TimelineChart')));
 
 const yuan = val => `¥ ${numeral(val).format('0,0')}`;
 

src/global.js

@@ -3,6 +3,8 @@ import { notification, Button, message } from 'antd';
 import { formatMessage } from 'umi/locale';
 import defaultSettings from './defaultSettings';
 
+window.React = React;
+
 const { pwa } = defaultSettings;
 // if pwa is true
 if (pwa) {

src/pages/Account/Settings/BaseView.js

@@ -74,7 +74,7 @@ class BaseView extends Component {
     if (currentUser.avatar) {
       return currentUser.avatar;
     }
-    const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
+    const url = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png';
     return url;
   }
 

src/pages/Dashboard/Analysis.js

 import React, { Component, Suspense } from 'react';
 import { connect } from 'dva';
 import { Row, Col, Icon, Menu, Dropdown } from 'antd';
-
 import GridContent from '@/components/PageHeaderWrapper/GridContent';
 import { getTimeDistance } from '@/utils/utils';
-
 import styles from './Analysis.less';
 import PageLoading from '@/components/PageLoading';
+import { AsyncLoadBizCharts } from '@/components/Charts/AsyncLoadBizCharts';
 
 const IntroduceRow = React.lazy(() => import('./IntroduceRow'));
 const SalesCard = React.lazy(() => import('./SalesCard'));
@@ -26,6 +25,7 @@ class Analysis extends Component {
   };
 
   componentDidMount() {
+    console.log('run');
     const { dispatch } = this.props;
     this.reqRef = requestAnimationFrame(() => {
       dispatch({
@@ -184,4 +184,8 @@ class Analysis extends Component {
   }
 }
 
-export default Analysis;
+export default props => (
+  <AsyncLoadBizCharts>
+    <Analysis {...props} />
+  </AsyncLoadBizCharts>
+);

src/pages/Dashboard/Monitor.js

-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
+import { AsyncLoadBizCharts } from '@/components/Charts/AsyncLoadBizCharts';
 import { connect } from 'dva';
 import { formatMessage, FormattedMessage } from 'umi/locale';
 import { Row, Col, Card, Tooltip } from 'antd';
@@ -8,7 +9,6 @@ import CountDown from '@/components/CountDown';
 import ActiveChart from '@/components/ActiveChart';
 import numeral from 'numeral';
 import GridContent from '@/components/PageHeaderWrapper/GridContent';
-
 import Authorized from '@/utils/Authorized';
 import styles from './Monitor.less';
 
@@ -27,7 +27,7 @@ const havePermissionAsync = new Promise(resolve => {
   monitor,
   loading: loading.models.monitor,
 }))
-class Monitor extends PureComponent {
+class Monitor extends Component {
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -110,7 +110,7 @@ class Monitor extends PureComponent {
                   }
                 >
                   <img
-                    src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
+                    src="https://gw.alipayobjects.com/zos/antfincdn/h%24wFbzuuzz/HBWnDEUXCnGnGrRfrpKa.png"
                     alt="map"
                   />
                 </Tooltip>
@@ -242,4 +242,8 @@ class Monitor extends PureComponent {
   }
 }
 
-export default Monitor;
+export default props => (
+  <AsyncLoadBizCharts>
+    <Monitor {...props} />
+  </AsyncLoadBizCharts>
+);

src/pages/Dashboard/Workplace.js

@@ -3,7 +3,7 @@ import moment from 'moment';
 import { connect } from 'dva';
 import Link from 'umi/link';
 import { Row, Col, Card, List, Avatar } from 'antd';
-
+import { AsyncLoadBizCharts } from '@/components/Charts/AsyncLoadBizCharts';
 import { Radar } from '@/components/Charts';
 import EditableLinkGroup from '@/components/EditableLinkGroup';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
@@ -253,4 +253,8 @@ class Workplace extends PureComponent {
   }
 }
 
-export default Workplace;
+export default props => (
+  <AsyncLoadBizCharts>
+    <Workplace {...props} />
+  </AsyncLoadBizCharts>
+);

src/pages/document.ejs

@@ -9,12 +9,6 @@
     />
     <title>Ant Design Pro</title>
     <link rel="icon" href="/favicon.png" type="image/x-icon" />
-    <% if(context.env === 'production') { %>
-    <script src="//gw.alipayobjects.com/os/lib/react/16.8.1/umd/react.production.min.js"></script>
-    <script src="//gw.alipayobjects.com/os/lib/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
-    <script src="//gw.alipayobjects.com/os/lib/bizcharts/3.4.3/umd/BizCharts.min.js"></script>
-    <% }%>
-    <script src="https://gw.alipayobjects.com/os/lib/antv/data-set/0.10.1/dist/data-set.min.js"></script>
   </head>
   <body>
     <noscript>Sorry, we need js to run correctly!</noscript>

src/utils/utils.js

@@ -181,3 +181,14 @@ export function formatWan(val) {
 export function isAntdPro() {
   return window.location.hostname === 'preview.pro.ant.design';
 }
+
+export const importCDN = (url, name) =>
+  new Promise(resolve => {
+    const dom = document.createElement('script');
+    dom.src = url;
+    dom.type = 'text/javascript';
+    dom.onload = () => {
+      resolve(window[name]);
+    };
+    document.head.appendChild(dom);
+  });