improve less compile

package.json

@@ -74,7 +74,6 @@
     "mockjs": "^1.0.1-beta3",
     "prettier": "1.14.2",
     "pro-download": "^1.0.1",
-    "react-loadable": "^5.4.0",
     "redbox-react": "^1.5.0",
     "regenerator-runtime": "^0.12.0",
     "stylelint": "^9.4.0",

src/components/SettingDarwer/index.js

@@ -224,6 +224,9 @@ class SettingDarwer extends PureComponent {
               {formatMessage({ id: 'app.setting.copy' })}
             </Button>
           </CopyToClipboard>
+          <div className={styles.productionHint}>
+            {formatMessage({ id: 'app.setting.production.hint' })}
+          </div>
         </div>
       </Drawer>
     );

src/components/SettingDarwer/index.less

@@ -12,7 +12,7 @@
     margin-right: 16px;
     position: relative;
     // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
+    border-radius: @border-radius-base;
     cursor: pointer;
     img {
       width: 48px;
@@ -31,6 +31,7 @@
     font-weight: bold;
   }
 }
+
 .color_block {
   width: 38px;
   height: 22px;
@@ -41,9 +42,10 @@
   display: inline-block;
   vertical-align: middle;
 }
+
 .title {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
+  color: @heading-color;
   line-height: 22px;
   margin-bottom: 12px;
 }
@@ -51,7 +53,7 @@
 .handle {
   position: fixed;
   top: 240px;
-  background: #1890ff;
+  background: @primary-color;
   width: 48px;
   height: 48px;
   right: 273px;
@@ -65,3 +67,9 @@
   font-size: 16px;
   border-radius: 4px 0 0 4px;
 }
+
+.productionHint {
+  font-size: 12px;
+  color: @text-color-secondary;
+  margin-top: 4px;
+}

src/defaultSetting.js

@@ -0,0 +1,11 @@
+export default {
+  collapse: false,
+  silderTheme: 'dark',
+  themeColor: '#1890FF',
+  layout: 'sidemenu',
+  grid: 'Fluid',
+  fixedHeader: false,
+  autoHideHeader: false,
+  fixSiderbar: false,
+  colorWeak: false,
+};

src/locales/zh-CN.js

@@ -162,5 +162,6 @@ export default {
   'app.setting.othersettings': '其他设置',
   'app.setting.weakmode': '色弱模式',
   'app.setting.copy': '拷贝设置',
-  'app.setting.copyinfo': '拷贝成功，请到 src/models/setting.js 中替换 defaultSetting',
+  'app.setting.copyinfo': '拷贝成功，请到 src/defaultSetting.js 中替换',
+  'app.setting.production.hint': '设置侧边栏只会出现在开发环境，请手动配置 src/defaultSetting.js',
 };

src/models/setting.js

@@ -1,42 +1,59 @@
 import { message } from 'antd';
+import defaultSetting from '../defaultSetting';
 
-const defaultSetting = {
-  collapse: false,
-  silderTheme: 'dark',
-  themeColor: '#1890FF',
-  layout: 'sidemenu',
-  grid: 'Fluid',
-  fixedHeader: false,
-  autoHideHeader: false,
-  fixSiderbar: false,
-  colorWeak: false,
-};
-
-const buildLessAndWeak = (themeColor, colorWeak) => {
+let lessNodesAppended;
+const buildSettings = (themeColor, colorWeak) => {
+  document.body.className = colorWeak ? 'colorWeak' : '';
   // Determine if the component is remounted
-  if (themeColor && themeColor !== '#1890FF' && themeColor !== window['antd_pro_less_color']) {
-    window.less.refresh().then(() => {
-      const hideMessage = message.loading('正在编译主题！', 0);
-      setTimeout(() => {
-        window.less
-          .modifyVars({
-            '@primary-color': themeColor,
-            '@input-hover-border-color': themeColor,
-          })
-          .then(() => {
-            window['antd_pro_less_color'] = themeColor;
-            hideMessage();
-          })
-          .catch(() => {
-            message.error(`Failed to update theme`);
-          });
-      }, 200);
-    });
+  if (!themeColor || themeColor === '#1890FF' || themeColor === window['antd_pro_less_color']) {
+    return;
   }
-  if (colorWeak) {
-    document.body.className = 'colorWeak';
+  const hideMessage = message.loading('正在编译主题！', 0);
+  if (!lessNodesAppended) {
+    console.log('append less nodes');
+    const lessStyleNode = document.createElement('link');
+    const lessConfigNode = document.createElement('script');
+    const lessScriptNode = document.createElement('script');
+    lessStyleNode.setAttribute('rel', 'stylesheet/less');
+    lessStyleNode.setAttribute('href', '/color.less');
+    lessConfigNode.innerHTML = `
+      window.less = {
+        async: true,
+        env: 'production',
+        javascriptEnabled: true
+      };
+    `;
+    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
+    lessScriptNode.async = true;
+    lessScriptNode.onload = () => {
+      buildIt();
+      lessScriptNode.onload = null;
+    };
+    document.head.appendChild(lessStyleNode);
+    document.head.appendChild(lessConfigNode);
+    document.head.appendChild(lessScriptNode);
+    lessNodesAppended = true;
   } else {
-    document.body.className = '';
+    buildIt();
+  }
+  function buildIt() {
+    if (!window.less) {
+      return;
+    }
+    window.less
+      .modifyVars({
+        '@primary-color': themeColor,
+        '@input-hover-border-color': themeColor,
+      })
+      .then(() => {
+        console.log('start to compile');
+        window['antd_pro_less_color'] = themeColor;
+        hideMessage();
+      })
+      .catch(() => {
+        message.error(`Failed to update theme`);
+        hideMessage();
+      });
   }
 };
 
@@ -54,7 +71,7 @@ export default {
         }
       });
       const { themeColor, colorWeak } = setting;
-      buildLessAndWeak(themeColor, colorWeak);
+      buildSettings(themeColor, colorWeak);
       return {
         ...state,
         ...setting,
@@ -80,7 +97,7 @@ export default {
         }
       });
       const { themeColor, colorWeak } = payload;
-      buildLessAndWeak(themeColor, colorWeak);
+      buildSettings(themeColor, colorWeak);
       window.history.replaceState(null, 'setting', urlParams.href);
       return {
         ...state,

src/pages/document.ejs

@@ -10,13 +10,5 @@
 </head>
 <body>
   <div id="root"></div>
-  <link rel="stylesheet/less" type="text/css" href="/color.less" />
-  <script>
-    window.less = {
-      async: false,
-      env: 'production'
-    };
-  </script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
 </body>
 </html>