perf: reduce bundle size

Author: Jerry-CodeHub

config/config.github.ts

@@ -1,9 +1,11 @@
 import { defineConfig } from '@umijs/max';
 import path from 'path';
+import { configureSplitChunks } from './splitChunks';
 // import { routes } from './routes';
 
 export default defineConfig({
   chainWebpack(config) {
+    configureSplitChunks(config);
     config.module
       .rule('cesium')
       .test(/\.js$/)
@@ -19,6 +21,7 @@ export default defineConfig({
   },
   define: {
     CESIUM_BASE_URL: '/umi-react-admin/Cesium',
+    CESIUM_ION_TOKEN: process.env.CESIUM_ION_TOKEN,
   },
   favicons: ['/umi-react-admin/favicon.ico'],
   base: '/umi-react-admin/',

config/config.ts

@@ -1,8 +1,12 @@
 import { defineConfig } from '@umijs/max';
 // import path from 'path';
 import { routes } from './routes';
+import { configureSplitChunks } from './splitChunks';
 
 export default defineConfig({
+  chainWebpack(config) {
+    configureSplitChunks(config);
+  },
   copy: [
     {
       from: 'node_modules/cesium/Build/Cesium/Workers',

config/splitChunks.ts

@@ -0,0 +1,82 @@
+type SplitChunksOptions = {
+  chunks: 'all';
+  minSize: number;
+  maxSize: number;
+  cacheGroups: Record<string, unknown>;
+};
+
+type WebpackChainConfig = {
+  optimization: {
+    splitChunks: (options: SplitChunksOptions) => void;
+  };
+};
+
+export const configureSplitChunks = (config: WebpackChainConfig) => {
+  config.optimization.splitChunks({
+    chunks: 'all',
+    minSize: 30_000,
+    maxSize: 240_000,
+    cacheGroups: {
+      framework: {
+        name: 'framework',
+        test: /[\\/]node_modules[\\/](react|react-dom|scheduler|history)[\\/]/,
+        priority: 50,
+        enforce: true,
+      },
+      charts: {
+        name: 'vendor-charts',
+        test: /[\\/]node_modules[\\/](@antv|d3|@ant-design[\\/](charts|plots))[\\/]/,
+        priority: 45,
+        enforce: true,
+        maxSize: 240_000,
+      },
+      antd: {
+        name: 'vendor-antd',
+        test: /[\\/]node_modules[\\/](@ant-design|antd|rc-.+)[\\/]/,
+        priority: 40,
+        enforce: true,
+        maxSize: 240_000,
+      },
+      cesium: {
+        name: 'vendor-cesium',
+        test: /[\\/]node_modules[\\/](cesium|cesium-navigation-es6)[\\/]/,
+        priority: 35,
+        enforce: true,
+      },
+      designable: {
+        name: 'vendor-designable',
+        test: /[\\/]node_modules[\\/](@designable|@pind|@formily)[\\/]/,
+        priority: 30,
+        enforce: true,
+        maxSize: 240_000,
+      },
+      pdf: {
+        name: 'vendor-pdf',
+        test: /[\\/]node_modules[\\/](react-pdf|pdfjs-dist)[\\/]/,
+        priority: 25,
+        enforce: true,
+        maxSize: 240_000,
+      },
+      media: {
+        name: 'vendor-media',
+        test: /[\\/]node_modules[\\/](artplayer|wavesurfer\.js|xgplayer|xgplayer-music|html2canvas|tinymce)[\\/]/,
+        priority: 20,
+        enforce: true,
+        maxSize: 240_000,
+      },
+      turf: {
+        name: 'vendor-turf',
+        test: /[\\/]node_modules[\\/](@turf|geojson-rbush|rbush)[\\/]/,
+        priority: 20,
+        enforce: true,
+      },
+      vendors: {
+        name: 'vendors',
+        test: /[\\/]node_modules[\\/]/,
+        priority: -10,
+        reuseExistingChunk: true,
+        maxSize: 240_000,
+      },
+    },
+  });
+};