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,27 +25,25 @@ class Bar extends Component {
     if (!this.node) {
       return;
     }
-    requestAnimationFrame(() => {
-      const canvasWidth = this.node.parentNode.clientWidth;
-      const { data = [], autoLabel = true } = this.props;
-      if (!autoLabel) {
-        return;
-      }
-      const minWidth = data.length * 30;
-      const { autoHideXLabels } = this.state;
+    const canvasWidth = this.node.parentNode.clientWidth;
+    const { data = [], autoLabel = true } = this.props;
+    if (!autoLabel) {
+      return;
+    }
+    const minWidth = data.length * 30;
+    const { autoHideXLabels } = this.state;
 
-      if (canvasWidth <= minWidth) {
-        if (!autoHideXLabels) {
-          this.setState({
-            autoHideXLabels: true,
-          });
-        }
-      } else if (autoHideXLabels) {
+    if (canvasWidth <= minWidth) {
+      if (!autoHideXLabels) {
         this.setState({
-          autoHideXLabels: false,
+          autoHideXLabels: true,
         });
       }
-    });
+    } else if (autoHideXLabels) {
+      this.setState({
+        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,59 +19,77 @@ const renderTotal = total => {
   return totalDom;
 };
 
-const ChartCard = ({
-  loading = false,
-  contentHeight,
-  title,
-  avatar,
-  action,
-  total,
-  footer,
-  children,
-  ...rest
-}) => {
-  const content = (
-    <div className={styles.chartCard}>
-      <div
-        className={classNames(styles.chartTop, {
-          [styles.chartTopMargin]: !children && !footer,
-        })}
-      >
-        <div className={styles.avatar}>{avatar}</div>
-        <div className={styles.metaWrap}>
-          <div className={styles.meta}>
-            <span className={styles.title}>{title}</span>
-            <span className={styles.action}>{action}</span>
-          </div>
-          {renderTotal(total)}
-        </div>
-      </div>
-      {children && (
-        <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
-          <div className={contentHeight && styles.contentFixed}>{children}</div>
-        </div>
-      )}
-      {footer && (
+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.footer, {
-            [styles.footerMargin]: !children,
+          className={classNames(styles.chartTop, {
+            [styles.chartTopMargin]: !children && !footer,
           })}
         >
-          {footer}
+          <div className={styles.avatar}>{avatar}</div>
+          <div className={styles.metaWrap}>
+            <div className={styles.meta}>
+              <span className={styles.title}>{title}</span>
+              <span className={styles.action}>{action}</span>
+            </div>
+            {renderTotal(total)}
+          </div>
         </div>
-      )}
-    </div>
-  );
-
-  return (
-    <Card bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
-      {
-        <Spin spinning={loading} wrapperClassName={styles.spin}>
-          {content}
-        </Spin>
-      }
-    </Card>
-  );
-};
+        {children && (
+          <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
+            <div className={contentHeight && styles.contentFixed}>{children}</div>
+          </div>
+        )}
+        {footer && (
+          <div
+            className={classNames(styles.footer, {
+              [styles.footerMargin]: !children,
+            })}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    );
+  };
+  render() {
+    const {
+      loading = false,
+      contentHeight,
+      title,
+      avatar,
+      action,
+      total,
+      footer,
+      children,
+      ...rest
+    } = this.props;
+    return (
+      <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,24 +72,22 @@ export default class Pie extends Component {
   @Bind()
   @Debounce(300)
   resize() {
-    requestAnimationFrame(() => {
-      const { hasLegend } = this.props;
-      if (!hasLegend || !this.root) {
-        window.removeEventListener('resize', this.resize);
-        return;
-      }
-      if (this.root.parentNode.clientWidth <= 380) {
-        if (!this.state.legendBlock) {
-          this.setState({
-            legendBlock: true,
-          });
-        }
-      } else if (this.state.legendBlock) {
+    const { hasLegend } = this.props;
+    if (!hasLegend || !this.root) {
+      window.removeEventListener('resize', this.resize);
+      return;
+    }
+    if (this.root.parentNode.clientWidth <= 380) {
+      if (!this.state.legendBlock) {
         this.setState({
-          legendBlock: false,
+          legendBlock: true,
         });
       }
-    });
+    } else if (this.state.legendBlock) {
+      this.setState({
+        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,15 +35,13 @@ export default class WaterWave extends PureComponent {
   }
 
   resize = () => {
-    requestAnimationFrame(() => {
-      if (this.root) {
-        const { height } = this.props;
-        const { offsetWidth } = this.root.parentNode;
-        this.setState({
-          radio: offsetWidth < height ? offsetWidth / height : 1,
-        });
-      }
-    });
+    if (this.root) {
+      const { height } = this.props;
+      const { offsetWidth } = this.root.parentNode;
+      this.setState({
+        radio: offsetWidth < height ? offsetWidth / height : 1,
+      });
+    }
   };
 
   renderChart() {