💥 feat(config): 开发阶段懒编译

Kurisu
1 parent 590f1a01
Showing 2 changed files with 6 additions and 106 deletions
config/config.ts
config/plugin.config.ts
 import { defineConfig } from 'umi';
 import routers from './routers';
 import proxy from './proxy';
-import webpackPlugin from './plugin.config';
  
 const { REACT_APP_ENV } = process.env;
  
@@ -9,24 +8,19 @@ export default defineConfig({
   dva: {
     hmr: true,
   },
-  webpack5: {},
+  webpack5: { lazyCompilation: {} },
   fastRefresh: {},
   devtool: false,
-  // umi routes: https://umijs.org/zh/guide/router.html
   routes: routers,
   define: {
     PROD_APP_ENV: (REACT_APP_ENV || 'dev') === 'prod',
     GRAY_TAG: '',
   },
-  // Theme for antd: https://ant.design/docs/react/customize-theme-cn
   theme: {
     'primary-color': (REACT_APP_ENV || 'dev') === 'prod' ? '#1890FF' : '#FAAD14',
   },
-  // layout: defaultSettings,
   locale: {
-    // default zh-CN
     default: 'zh-CN',
-    // default true, when it is true, will use `navigator.language` overwrite default
     antd: true,
     baseNavigator: true,
   },
@@ -58,5 +52,9 @@ export default defineConfig({
     type: process.env.NODE_ENV == 'development' ? 'none' : 'all',
     exclude: [],
   },
-  chainWebpack: webpackPlugin,
+  chainWebpack(config: any) {
+    config.set('experiments', {
+      asyncWebAssembly: true,
+    });
+  },
 });
-import ThemeColorReplacer from "webpack-theme-color-replacer";
-import path from "path";
-import { generate } from "@ant-design/colors";
-
-function getModulePackageName(module: { context: string }) {
-  if (!module.context) return null;
-
-  const nodeModulesPath = path.join(__dirname, "../node_modules/");
-  if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) {
-    return null;
-  }
-
-  const moduleRelativePath = module.context.substring(nodeModulesPath.length);
-  const [moduleDirName] = moduleRelativePath.split(path.sep);
-  let packageName: string | null = moduleDirName;
-  // handle tree shaking
-  if (packageName && packageName.match("^_")) {
-    // eslint-disable-next-line prefer-destructuring
-    packageName = packageName.match(/^_(@?[^@]+)/)![1];
-  }
-  return packageName;
-}
-
-export default (config: any, { env, webpack, createCSSRule }: any) => {
-  // preview.pro.ant.design only do not use in your production;
-  if (
-    process.env.ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === "site" ||
-    process.env.NODE_ENV !== "production"
-  ) {
-    config.plugin("webpack-theme-color-replacer").use(ThemeColorReplacer, [
-      {
-        fileName: "css/theme-colors-[contenthash:8].css",
-        matchColors: getAntdSerials("#1890ff"), // 主色系列
-        // 改变样式选择器，解决样式覆盖问题
-        changeSelector(selector: string): string {
-          switch (selector) {
-            case ".ant-calendar-today .ant-calendar-date":
-              return ":not(.ant-calendar-selected-date)" + selector;
-            case ".ant-btn:focus,.ant-btn:hover":
-              return ".ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)";
-            case ".ant-btn.active,.ant-btn:active":
-              return ".ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)";
-            default:
-              return selector;
-          }
-        },
-        // isJsUgly: true,
-      },
-    ]);
-  }
-
-  config.set("experiments", {
-    asyncWebAssembly: true,
-  });
-
-  // optimize chunks
-  config.optimization
-    // share the same chunks across different modules
-    .runtimeChunk(false)
-    .splitChunks({
-      chunks: "async",
-      maxInitialRequests: Infinity,
-      minSize: 0,
-      cacheGroups: {
-        vendors: {
-          test: (module: { context: string }) => {
-            const packageName = getModulePackageName(module) || "";
-            if (packageName) {
-              return ["bizcharts", "gg-editor", "g6", "@antv", "gg-editor-core", "bizcharts-plugin-slider"].includes(
-                packageName
-              );
-            }
-            return false;
-          },
-          name(module: { context: string }) {
-            const packageName = getModulePackageName(module);
-            if (packageName) {
-              if (["bizcharts", "@antv_data-set"].indexOf(packageName) >= 0) {
-                return "viz"; // visualization package
-              }
-            }
-            return "misc";
-          },
-        },
-      },
-    });
-};
-
-const getAntdSerials = (color: string) => {
-  const lightNum = 9;
-  const devide10 = 10;
-  // 淡化（即less的tint）
-  const lightens = new Array(lightNum).fill(undefined).map((_, i: number) => {
-    return ThemeColorReplacer.varyColor.lighten(color, i / devide10);
-  });
-  const colorPalettes = generate(color);
-  return lightens.concat(colorPalettes);
-};