fix: 修复无限嵌套路由渲染

config/proxy.js

@@ -90,6 +90,16 @@ module.exports = {
         '/CityTemp': '/CityTemp',
       },
     },
+    '/civweb4': {
+      target: proxyURL,
+      changeOrigin: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      pathRewrite: {
+        '/civweb4': '/civweb4',
+      },
+    },
     '/web4': {
       target: proxyURL,
       changeOrigin: true,
@@ -97,7 +107,7 @@ module.exports = {
         'Access-Control-Allow-Origin': '*',
       },
       pathRewrite: {
-        '/web4': '/web4',
+        'web4': 'web4',
       },
     }
   },

internals/webpack/webpack.base.babel.js

@@ -65,7 +65,7 @@ const defaultConfig = {
     edge: 13,
     ios: 10,
     ie: 11,
-  },
+  }
 };
 module.exports = options => {
   const chainConfig = new Config();
@@ -76,7 +76,7 @@ module.exports = options => {
   const isProd = process.env.NODE_ENV === 'production';
   const disableCompress = process.env.COMPRESS === 'none';
   const isWebpack5 = webpack.version.startsWith('5');
-
+  const cwd = process.cwd();
   const devtool = options.devtool || false;
 
   chainConfig.devtool(
@@ -86,9 +86,9 @@ module.exports = options => {
         : devtool || 'cheap-module-source-map'
       : devtool,
   );
-
+  const mfsu = defineConfig.mfsu;
   const useHash = defineConfig.hash && isProd;
-
+ 
   const absOutputPath = process.env.npm_config_releasepath
     ? path.resolve(
         process.env.npm_config_releasepath,
@@ -100,7 +100,7 @@ module.exports = options => {
     .path(absOutputPath)
     .filename(useHash ? `[name].[contenthash:8].js` : `[name].js`)
     .chunkFilename(
-      useHash ? `[name].[contenthash:8].async.js` : `[name].chunk.js`,
+      useHash ? `[name].[contenthash:8].async.js` : `[name].js`,
     )
     .publicPath(`/${pkg.name.toLocaleLowerCase()}/`)
     .futureEmitAssets(true)
@@ -173,6 +173,7 @@ module.exports = options => {
       { libraryName: 'antd-mobile', libraryDirectory: 'es', style: true },
     ]),
   });
+
   let babelOpts = {
     sourceType: 'unambiguous',
     babelrc: false,
@@ -187,10 +188,17 @@ module.exports = options => {
   chainConfig.module
     .rule('js')
     .test(/\.(js|mjs|jsx|ts|tsx)$/)
-    .exclude.add(/node_modules/)
+    .include
+      .add([
+        cwd,
+        ...(process.env.APP_ROOT ? [process.cwd()] : [])
+      ]).end()
+    .exclude
+      .add(/node_modules/)
+      .add(/\.mfsu/)
     .end()
     .use('babel-loader')
-    .loader(require.resolve('babel-loader'))
+    .loader(require.resolve('@umijs/deps/compiled/babel-loader'))
     .options(babelOpts);
 
   if (defineConfig.extraBabelIncludes) {
@@ -214,6 +222,8 @@ module.exports = options => {
     });
   }
 
+  const staticDir = mfsu ? 'mf-static' : 'static';
+
   chainConfig.module
     .rule('images')
     .test(/\.(png|jpe?g|gif|webp|ico)(\?.*)?$/)
@@ -221,17 +231,28 @@ module.exports = options => {
     .loader(require.resolve('url-loader'))
     .options({
       limit: defineConfig.inlineLimit || 10000,
-      name: 'static/[name].[hash:8].[ext]',
+      name: `${staticDir}/[name].[hash:8].[ext]`,
       // require 图片的时候不用加 .default
       esModule: false,
       fallback: {
         loader: require.resolve('file-loader'),
         options: {
-          name: 'static/[name].[hash:8].[ext]',
+          name: `${staticDir}/[name].[hash:8].[ext]`,
           esModule: false,
         },
       },
     });
+  
+  chainConfig.module
+    .rule('avif')
+    .test(/\.(avif)(\?.*)?$/)
+    .use('file-loader')
+      .loader(require.resolve('file-loader'))
+      .options({
+        name: `${staticDir}/[name].[hash:8].[ext]`,
+        esModule: false,
+      });
+
 
   chainConfig.module
     .rule('svg')
@@ -239,7 +260,7 @@ module.exports = options => {
     .use('file-loader')
     .loader(require.resolve('@umijs/deps/compiled/file-loader'))
     .options({
-      name: 'static/[name].[hash:8].[ext]',
+      name: `${staticDir}/[name].[hash:8].[ext]`,
       esModule: false,
     })
     .end();
@@ -250,7 +271,7 @@ module.exports = options => {
     .use('file-loader')
     .loader(require.resolve('file-loader'))
     .options({
-      name: 'static/[name].[hash:8].[ext]',
+      name: `${staticDir}/[name].[hash:8].[ext]`,
       esModule: false,
     });
 
@@ -270,6 +291,15 @@ module.exports = options => {
     .use('raw-loader')
     .loader(require.resolve('raw-loader'));
 
+  if(defineConfig.workerLoader) {
+    chainConfig.module
+      .rule('worker')
+      .test(/.*worker.(ts|js)/)
+      .use('worker-loader')
+        .loader(require.resolve('worker-loader'))
+        .options(defineConfig.workerLoader);
+  }  
+
   css({
     type: 'csr',
     config: defineConfig,
@@ -369,7 +399,7 @@ module.exports = options => {
     .plugin('replaceTheme')
     .use(ThemeColorReplacer, [themePluginOption]);
 
-  const cwd = process.cwd();
+
   const copyPatterns = [
     fs.existsSync(path.join(process.cwd(), 'public')) && {
       from: path.join(cwd, 'public'),
@@ -514,7 +544,14 @@ module.exports = options => {
   }
 
   if (process.env.PROGRESS !== 'none') {
-    chainConfig.plugin('progress').use(require.resolve('webpackbar'));
+    chainConfig.plugin('progress').use(require.resolve('webpackbar'), [
+      mfsu ? {
+        name: 'MFSU',
+        color: '#facc00'
+      }: defineConfig.ssr ? {
+        name: type === 'ssr' ? 'Server': 'Client'
+      }: {}
+    ]);
   }
 
   if (process.env.FRIENDLY_ERROR !== 'none') {
@@ -578,20 +615,6 @@ module.exports = options => {
             },
           ]);
       }
-
-      if(defineConfig.esbuild) {
-        const { target = 'es2015' } = defineConfig.esbuild || {};
-        const optsMap = {
-          ['csr']: {
-            minify: true,
-            target
-          }
-        };
-        const opt = optsMap['csr'];
-        chainConfig.optimization.minimize = true;
-        chainConfig.optimization.minimizer = [new ESBuildMinifyPlugin(opt)];
-        chainConfig.plugin('es-build').use(new ESBuildPlugin())
-      }
     },
   );
 
@@ -607,9 +630,24 @@ module.exports = options => {
     });
   }
 
+  if(defineConfig.esbuild) {
+    const { target = 'es2015' } = defineConfig.esbuild || {};
+    const optsMap = {
+      ['csr']: {
+        minify: true,
+        target
+      }
+    };
+    const opt = optsMap['csr'];
+    chainConfig.optimization.minimize = true;
+    chainConfig.optimization.minimizer = [new ESBuildMinifyPlugin(opt)];
+    chainConfig.plugin('es-build').use(new ESBuildPlugin())
+  }
+
   if (defineConfig.chainWebpack) {
     defineConfig.chainWebpack(chainConfig, {
       type: 'csr',
+      // mfsu,
       env: process.env,
       webpack,
       createCSSRule: createCSSRuleFn,
@@ -647,6 +685,34 @@ module.exports = options => {
     entry.push(require.resolve('./runtimePublicPathEntry'));
   }
 
+  // const nodeLibs = require('node-libs-browser');
+  // const ProvidePlugin = webpack.ProvidePlugin;
+  // if(isWebpack5) {
+  //   // ret.plugins.push({
+  //   //   new ProvidePlugin({
+  //   //     process: nodeLibs['process']
+  //   //   })
+  //   // });
+  //   // ret.plugins.push({
+  //   //   new ProvidePlugin({
+  //   //     Buffer: ['buffer', 'Buffer'],
+  //   //   })
+  //   // });
+  //   ret.resolve.fallback = {
+  //     ...ret.resolve.fallback,
+  //     ...Object.keys(nodeLibs).reduce((memo, key) => {
+  //       if(nodeLibs[key]) {
+  //         memo[key] = nodeLibs[key]
+  //       } else {
+  //         memo[key] = false
+  //       };
+  //       return memo
+  //     }, {}),
+  //     http: false,
+  //     https: false,
+  //   }
+  // }
+
   ret = {
     ...ret,
     // mode: options.mode,

internals/webpack/webpack.dev.babel.js

@@ -14,8 +14,38 @@ module.exports = require('./webpack.base.babel')({
     path.join(process.cwd(), 'src/app.js'), // Start with js/app.js
   ],
   optimization: {
+    namedModules: true,
+    namedChunks: true,
+    runtimeChunk: {
+      name: "runtime",
+    },
     splitChunks: {
-      chunks: 'all',
+      name: false,
+      chunks: "all", // all(全部)， async(异步的模块)，initial(同步的模块)
+      minSize: 20000, // 表示文件大于1k的时候才对它进行打包
+      minChunks: 2, // 当某个模块满足minChunks引用次数时，才会被打包。
+      maxAsyncRequests: 5, // 在打包某个模块的时候，最多分成5个chunk，多余的会合到最后一个chunk中
+      maxInitialRequests: Infinity,
+      automaticNameDelimiter: "~", // 当vendors或者default中的filename不填时，打包出来的文件名就会带~
+      cacheGroups: {
+        default: false,
+        vendors: {
+          // 将从node_modules中引入的模块统一打包到common.js文件中
+          name: "common",
+          chunks: "all",
+          minChunks: 2,
+          test: /[\\/]node_modules[\\/]/,
+        },
+        styles: {
+          // css统一打包到common.css文件中
+          name: "common",
+          chunks: "all",
+          minChunks: 2,
+          test: /\.(css|less|scss|stylus)$/,
+          enforce: true,
+          priority: 50,
+        },
+      },
     },
   },
   plugins: [