diff --git a/config/config.js b/config/config.js index 9b78b7e651e7e4ca1d313746fe26712ca055150b..226d448ea8821b30b8a04f5389232383e91feda6 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 f1173bba91a8194731444a05d015f3bfdf00ee23..0286d072fc3004dcfbc06612f3e20e62f7bfea69 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 dd3f240282f8cb93e2ae3da04960124c6e81182e..2fb6c60a1e8d2c95a20ab9d28bf48e694fe49630 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 3d9fbbaf2e62d7eff4e9b70ba80375383e4629b4..c14c061e8b3c43b6e7d469a89923efc9eef68dbc 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 0000000000000000000000000000000000000000..274bea5664541040c7759abf8a77d42efb41f425 --- /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 21e22c28e70c29ecc445fcd1c1f38bde7c82311e..0000000000000000000000000000000000000000 --- 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 78863fabdb7615138baf2063f1c4ed13285abade..081663b38f0d632db9d359496e18442416e1ff3d 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 bf60b418fc1a93fc152295a522eab4d4540e9646..bebe4829c63d4f4a47f4aa7bf649f23e2deef90d 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 388a835856a774b9fab30d5c8e1525579d25385c..f2f2b3a925be290f24c016a6a08230b0fbffde5c 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 0b85db70bb39bb5923a209d432b9f7fe54528638..11fa66adc1b25ca11dbbcac46c6dfa357b2c9d5b 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 629091747c22a65cc6e62d7d4e87af362c2fc7fb..d9bb87c614a90ac1bd01da9028b5919235ae94be 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 e9e44d4583c317615af21dbe623530a5f029f340..3e7ff986abe821cb2ef6956db700365b07e424fb 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 847536651855e59f5b4c7090aa00577df846f7ee..cf09effa0beac18130d5b45dc56b5a4db4ab496d 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 d8d1739f9f8a95ee70b9ab58279ec167852954df..7531af679c6e86532f0e0ada4f3e2eea73b3369d 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); + });