Optimize performance

.webpackrc.js

@@ -28,4 +28,23 @@ export default {
   publicPath: '/',
   disableDynamicImport: true,
   hash: true,
+  cssLoaderOptions: {
+    modules: true,
+    getLocalIdent: (context, localIdentName, localName) => {
+      if (context.resourcePath.includes('node_modules')) {
+        return localName;
+      }
+
+      let antdProPath = context.resourcePath.match(/src(.*)/)[1];
+      if (context.resourcePath.includes('components')) {
+        antdProPath = antdProPath.replace('components/', '');
+      }
+      const arr = antdProPath
+        .split('/')
+        .map(a => a.replace(/([A-Z])/g, '-$1'))
+        .map(a => a.toLowerCase());
+      arr.pop();
+      return `antd-pro${arr.join('-')}-${localName}`.replace('--', '-');
+    },
+  },
 };

src/components/Charts/Bar/index.js

@@ -25,7 +25,6 @@ class Bar extends Component {
     if (!this.node) {
       return;
     }
-    requestAnimationFrame(() => {
     const canvasWidth = this.node.parentNode.clientWidth;
     const { data = [], autoLabel = true } = this.props;
     if (!autoLabel) {
@@ -45,7 +44,6 @@ class Bar extends Component {
         autoHideXLabels: false,
       });
     }
-    });
   }
 
   handleRoot = n => {

src/components/Charts/ChartCard/index.js

 import React from 'react';
-import { Card, Spin } from 'antd';
+import { Card } from 'antd';
 import classNames from 'classnames';
 
 import styles from './index.less';
@@ -19,18 +19,23 @@ const renderTotal = total => {
   return totalDom;
 };
 
-const ChartCard = ({
-  loading = false,
-  contentHeight,
-  title,
-  avatar,
-  action,
-  total,
-  footer,
-  children,
-  ...rest
-}) => {
-  const content = (
+class ChartCard extends React.PureComponent {
+  state = {
+    loading: true,
+  };
+  componentDidMount() {
+    requestAnimationFrame(() => {
+      this.setState({
+        loading: false,
+      });
+    });
+  }
+  renderConnet = () => {
+    const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
+    if (loading || this.state.loading) {
+      return false;
+    }
+    return (
       <div className={styles.chartCard}>
         <div
           className={classNames(styles.chartTop, {
@@ -62,16 +67,29 @@ const ChartCard = ({
         )}
       </div>
     );
-
+  };
+  render() {
+    const {
+      loading = false,
+      contentHeight,
+      title,
+      avatar,
+      action,
+      total,
+      footer,
+      children,
+      ...rest
+    } = this.props;
     return (
-    <Card bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
-      {
-        <Spin spinning={loading} wrapperClassName={styles.spin}>
-          {content}
-        </Spin>
-      }
+      <Card
+        loading={loading || this.state.loading}
+        bodyStyle={{ padding: '20px 24px 8px 24px' }}
+        {...rest}
+      >
+        {this.renderConnet()}
       </Card>
     );
-};
+  }
+}
 
 export default ChartCard;

src/components/Charts/Pie/index.js

@@ -19,7 +19,13 @@ export default class Pie extends Component {
   };
 
   componentDidMount() {
-    window.addEventListener('resize', this.resize, { passive: true });
+    window.addEventListener(
+      'resize',
+      () => {
+        requestAnimationFrame(() => this.resize());
+      },
+      { passive: true }
+    );
   }
 
   componentDidUpdate(preProps) {
@@ -66,7 +72,6 @@ export default class Pie extends Component {
   @Bind()
   @Debounce(300)
   resize() {
-    requestAnimationFrame(() => {
     const { hasLegend } = this.props;
     if (!hasLegend || !this.root) {
       window.removeEventListener('resize', this.resize);
@@ -83,7 +88,6 @@ export default class Pie extends Component {
         legendBlock: false,
       });
     }
-    });
   }
 
   handleRoot = n => {

src/components/Charts/WaterWave/index.js

@@ -17,7 +17,13 @@ export default class WaterWave extends PureComponent {
       this.renderChart();
       this.resize();
     });
-    window.addEventListener('resize', this.resize, { passive: true });
+    window.addEventListener(
+      'resize',
+      () => {
+        requestAnimationFrame(() => this.resize());
+      },
+      { passive: true }
+    );
   }
 
   componentWillUnmount() {
@@ -29,7 +35,6 @@ export default class WaterWave extends PureComponent {
   }
 
   resize = () => {
-    requestAnimationFrame(() => {
     if (this.root) {
       const { height } = this.props;
       const { offsetWidth } = this.root.parentNode;
@@ -37,7 +42,6 @@ export default class WaterWave extends PureComponent {
         radio: offsetWidth < height ? offsetWidth / height : 1,
       });
     }
-    });
   };
 
   renderChart() {