From 10ef3eaf08ab5266dd4779b1ce4c80d94c4bdede Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 18 Feb 2019 10:39:30 +0800 Subject: [PATCH] pref: optimize performance (#3542) * pref: optimize performance * pref: use less img * pref: use less img --- config/config.js | 6 +-- mock/api.js | 2 +- mock/user.js | 2 +- src/components/ActiveChart/index.js | 1 - src/components/Charts/AsyncLoadBizCharts.js | 42 +++++++++++++++++++++ src/components/Charts/g2.js | 15 -------- src/components/Charts/index.js | 35 +++++++++++------ src/global.js | 2 + src/pages/Account/Settings/BaseView.js | 2 +- src/pages/Dashboard/Analysis.js | 10 +++-- src/pages/Dashboard/Monitor.js | 14 ++++--- src/pages/Dashboard/Workplace.js | 8 +++- src/pages/document.ejs | 6 --- src/utils/utils.js | 11 ++++++ 14 files changed, 105 insertions(+), 51 deletions(-) create mode 100644 src/components/Charts/AsyncLoadBizCharts.js delete mode 100644 src/components/Charts/g2.js diff --git a/config/config.js b/config/config.js index 9b78b7e651..226d448ea8 100644 --- a/config/config.js +++ b/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/': { diff --git a/mock/api.js b/mock/api.js index f1173bba91..0286d072fc 100644 --- a/mock/api.js +++ b/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', diff --git a/mock/user.js b/mock/user.js index dd3f240282..2fb6c60a1e 100644 --- a/mock/user.js +++ b/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: '海纳百川，有容乃大', diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js index 3d9fbbaf2e..c14c061e8b 100644 --- a/src/components/ActiveChart/index.js +++ b/src/components/ActiveChart/index.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import { MiniArea } from '../Charts'; import NumberInfo from '../NumberInfo'; - import styles from './index.less'; function fixedZero(val) { diff --git a/src/components/Charts/AsyncLoadBizCharts.js b/src/components/Charts/AsyncLoadBizCharts.js new file mode 100644 index 0000000000..274bea5664 --- /dev/null +++ b/src/components/Charts/AsyncLoadBizCharts.js @@ -0,0 +1,42 @@ +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 ; + } +} + +export { loadBizCharts, AsyncLoadBizCharts }; diff --git a/src/components/Charts/g2.js b/src/components/Charts/g2.js deleted file mode 100644 index 21e22c28e7..0000000000 --- a/src/components/Charts/g2.js +++ /dev/null @@ -1,15 +0,0 @@ -// 全局 G2 设置 -import { track, setTheme } from 'bizcharts'; - -track(false); - -const config = { - defaultColor: '#1089ff', - shape: { - interval: { - fillOpacity: 1, - }, - }, -}; - -setTheme(config); diff --git a/src/components/Charts/index.js b/src/components/Charts/index.js index 78863fabdb..081663b38f 100644 --- a/src/components/Charts/index.js +++ b/src/components/Charts/index.js @@ -1,17 +1,28 @@ +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 ( + + + + ); + }; +}; + +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')}`; diff --git a/src/global.js b/src/global.js index bf60b418fc..bebe4829c6 100644 --- a/src/global.js +++ b/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) { diff --git a/src/pages/Account/Settings/BaseView.js b/src/pages/Account/Settings/BaseView.js index 388a835856..f2f2b3a925 100644 --- a/src/pages/Account/Settings/BaseView.js +++ b/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; } diff --git a/src/pages/Dashboard/Analysis.js b/src/pages/Dashboard/Analysis.js index 0b85db70bb..11fa66adc1 100644 --- a/src/pages/Dashboard/Analysis.js +++ b/src/pages/Dashboard/Analysis.js @@ -1,12 +1,11 @@ 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 => ( + + + +); diff --git a/src/pages/Dashboard/Monitor.js b/src/pages/Dashboard/Monitor.js index 629091747c..d9bb87c614 100644 --- a/src/pages/Dashboard/Monitor.js +++ b/src/pages/Dashboard/Monitor.js @@ -1,4 +1,5 @@ -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 { } > map @@ -242,4 +242,8 @@ class Monitor extends PureComponent { } } -export default Monitor; +export default props => ( + + + +); diff --git a/src/pages/Dashboard/Workplace.js b/src/pages/Dashboard/Workplace.js index e9e44d4583..3e7ff986ab 100644 --- a/src/pages/Dashboard/Workplace.js +++ b/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 => ( + + + +); diff --git a/src/pages/document.ejs b/src/pages/document.ejs index 8475366518..cf09effa0b 100644 --- a/src/pages/document.ejs +++ b/src/pages/document.ejs @@ -9,12 +9,6 @@ /> Ant Design Pro - <% if(context.env === 'production') { %> - - - - <% }%> - diff --git a/src/utils/utils.js b/src/utils/utils.js index d8d1739f9f..7531af679c 100644 --- a/src/utils/utils.js +++ b/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); + });