Auto commit: 2024-09-15 17:20:46

blog/2024-09-14-umi-dev.md

@@ -29,6 +29,7 @@ Mako https://makojs.dev is a new fast Rust based bundler from us, which is heavi
 删除 node_module，执行下 npm install 重装依赖。
 ```
 
+Umi 4 默认按页拆包、按需加载（这近似等同于 Umi 3 中的 `dynamicImport`），通过 `loading.tsx` 来自定义加载动画。
 
 ## 分析
 
@@ -263,4 +264,75 @@ Details:
     # remove mfsu dependencies
     $ umi mfsu remove
     $ umi mfsu remove --all
+```
+
+## [物理缓存 chainWebpack](https://umijs.org/blog/webpack-5-prod-cache)
+
+
+```ts
+// 官方配置
+
+// .umirc.ts
+import { join } from 'path';
+import { defineConfig } from 'umi';
+import { createHash } from 'crypto';
+
+export default defineConfig({
+  chainWebpack(config, { env }) {
+    if (env === 'production') {
+      config.cache({
+        type: 'filesystem',
+        store: 'pack',
+        // 🟡 假如你的项目在 CI 中构建每次环境变量都不一样，请挑选或者排除
+        version: createEnvironmentHash(process.env),
+        buildDependencies: {
+          config: [__filename],
+          tsconfig: [join(__dirname, 'tsconfig.json')],
+          packagejson: [join(__dirname, 'package.json')],
+          umirc: [join(__dirname, '.umirc.ts')],
+          // 🟡 其他可能会影响项目的配置文件路径，其内容变更会使缓存失效
+        },
+      });
+    }
+  },
+});
+
+function createEnvironmentHash(env: Record<string, any>) {
+  const hash = createHash('md5');
+  hash.update(JSON.stringify(env));
+  const result = hash.digest('hex');
+  return result;
+}
+
+// 网络资料
+const config = {
+  chainWebpack: (config) => {
+// 生产环境才分包
+    if (BUILD_ENV === 'production') {
+      config.merge({
+        optimization: {
+          splitChunks: {
+            chunks: 'all',
+            minSize: 30000,
+            minChunks: 3,
+            automaticNameDelimiter: '.',
+            cacheGroups: {
+              vendor: {
+                name: 'vendors',
+                test({ resource }) {
+                  return /[\\/]node_modules[\\/]/.test(resource);
+                },
+                priority: 10,
+              },
+            },
+          },
+        },
+      });
+    }
+  }
+  mfsu : {},
+  webpack5: {},
+}
+// 配置完之后，删除 src/.umi 目录重新启动 umi dev
+// rm -rf dist && rm -rf node_modules && rm -rf src/.umi && npm install
 ```