diff --git a/.webpackrc.js b/.webpackrc.js
new file mode 100755
index 0000000000000000000000000000000000000000..1e02e9fdf1c882e0ffc4f38ddb035ef162631795
--- /dev/null
+++ b/.webpackrc.js
@@ -0,0 +1,47 @@
+const path = require('path');
+
+export default {
+  entry: 'src/index.js',
+  extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
+  env: {
+    development: {
+      extraBabelPlugins: ['dva-hmr'],
+    },
+  },
+  externals: {
+    '@antv/data-set': 'DataSet',
+    bizcharts: 'BizCharts',
+    rollbar: 'rollbar',
+  },
+  alias: {
+    components: path.resolve(__dirname, 'src/components/'),
+  },
+  ignoreMomentLocale: true,
+  theme: './src/theme.js',
+  html: {
+    template: './src/index.ejs',
+  },
+  publicPath: '/',
+  hash: true,
+  lessLoaderOptions: {
+    javascriptEnabled: true,
+  },
+  disableDynamicImport: true,
+  cssLoaderOptions: {
+    modules: true,
+    getLocalIdent: (context, localIdentName, localName) => {
+      if (
+        context.resourcePath.includes('node_modules') ||
+        context.resourcePath.includes('ant.design.pro.less')
+      ) {
+        return localName;
+      }
+      const antdProPath = context.resourcePath.match(/src(.*)/)[1].replace('.less', '');
+      const arr = antdProPath
+        .split('/')
+        .map(a => a.replace(/([A-Z])/g, '-$1'))
+        .map(a => a.toLowerCase());
+      return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
+    },
+  },
+};
diff --git a/src/components/GlobalHeader/RightContent.js b/src/components/GlobalHeader/RightContent.js
index 596bd3ea09f65190aebdc09c1515677421110e29..1c74d47ff4f4932e25259f0484436d723530b998 100644
--- a/src/components/GlobalHeader/RightContent.js
+++ b/src/components/GlobalHeader/RightContent.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd';
+import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip, Button } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import NoticeIcon from '../NoticeIcon';
@@ -40,6 +40,16 @@ export default class GlobalHeaderRight extends PureComponent {
     return groupBy(newNotices, 'type');
   }
 
+  changLang = () => {
+    const locale = localStorage.getItem('locale');
+    if (!locale || locale === 'zh-CN') {
+      localStorage.setItem('locale', 'en-US');
+    } else {
+      localStorage.setItem('locale', 'zh-CN');
+    }
+    location.reload();
+  };
+
   render() {
     const {
       currentUser,
@@ -141,8 +151,11 @@ export default class GlobalHeaderRight extends PureComponent {
             </span>
           </Dropdown>
         ) : (
-          <Spin size="small" style={{ marginLeft: 8 }} />
+          <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
         )}
+        <Button size="small" onClick={this.changLang}>
+          <FormattedMessage id="navbar.lang" />
+        </Button>
       </div>
     );
   }
diff --git a/src/locale/en-US.js b/src/locale/en-US.js
index 3a22caf6a7b7758170c7c175eaf282f1c0eb4077..e5d9971dd7f9024e50ce835cd92e1bdedf072a20 100644
--- a/src/locale/en-US.js
+++ b/src/locale/en-US.js
@@ -7,6 +7,7 @@ export default {
   data: appLocaleData,
   antd: antdEn,
   messages: {
+    'navbar.lang': 'English',
     'menu.home': 'Home',
     'menu.dashboard': 'Dashboard',
     'menu.dashboard.analysis': 'Analysis',
diff --git a/src/locale/zh-CN.js b/src/locale/zh-CN.js
index fcbbfaecd9bfd650e91a99c106520aa0a861106b..852d25422c2998e08046e93abeeda71f67ac8879 100644
--- a/src/locale/zh-CN.js
+++ b/src/locale/zh-CN.js
@@ -7,6 +7,7 @@ export default {
   data: appLocaleData,
   antd: antdZh,
   messages: {
+    'navbar.lang': '中文',
     'menu.home': '首页',
     'menu.dashboard': 'Dashboard',
     'menu.dashboard.analysis': '分析页',
diff --git a/src/pages/Dashboard/Analysis.js b/src/pages/Dashboard/Analysis.js
index 6e06569247adbf26d094961cb76187ee3393b774..5c36b333171e04ae6cdd6049db55689c8b96cda3 100644
--- a/src/pages/Dashboard/Analysis.js
+++ b/src/pages/Dashboard/Analysis.js
@@ -322,6 +322,7 @@ class Analysis extends Component {
           <Col {...topColResponsiveProps}>
             <ChartCard
               bordered={false}
+              loading={loading}
               title={<FormattedMessage id="app.analysis.visits" defaultMessage="visits" />}
               action={
                 <Tooltip
@@ -349,6 +350,7 @@ class Analysis extends Component {
           <Col {...topColResponsiveProps}>
             <ChartCard
               bordered={false}
+              loading={loading}
               title={<FormattedMessage id="app.analysis.payments" defaultMessage="Payments" />}
               action={
                 <Tooltip
diff --git a/src/router.js b/src/router.js
index 29896c04134d1a48e465e9dc472f0d8f855936fb..b11e50dbb00b9fab1d12a0d7c40e16fdc1e38b8d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -18,11 +18,10 @@ dynamic.setDefaultLoadingComponent(() => {
 });
 
 function getLang() {
-  if (window) {
-    return 'en-US';
+  if (window.localStorage && localStorage.getItem('locale')) {
+    return localStorage.getItem('locale');
   }
-  return (window.localStorage && localStorage.getItem('locale')) ||
-    (navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us'
+  return (navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us'
     ? 'en-US'
     : 'zh-CN';
 }