您可以通过使用浏览器资源提示（预加载和预取）来实现此目的

如果您使用的是webpack，那么魔术注释将很有帮助。您可以尝试这样的事情：

const HomeModule  = React.lazy(() => import(/* webpackPreload: true * /'./modules/ft_home_module/src/main'));
const AuthModule  = React.lazy(() => import(/* webpackPrefetch: true * /'./modules/ft_auth_module/src/main'));
const ProfileModule  = React.lazy(() => import(/* webpackPrefetch: true * /'./modules/ft_profile_module/src/main'));
const MerchantModule  = React.lazy(() => import(/* webpackPrefetch: true */ './modules/ft_merchant_module/src/main'));

在上述情况下，无论使用什么url，它都会预加载homemodule并以低优先级预取其他三个模块。

如果您想要动态行为，可以尝试使用插件： https://github.com/SebastianS90/webpack-prefetch-chunk

添加插件后，您可以使用 webpack_require .pfc方法在后台加载块。

const prefetchChunk = chunkName => {
  if (!window.requestIdleCallback) {
    return;
  } else if (chunkName) {
    let chunkArray = [].concat(chunkName);
    window.requestIdleCallback(() => {
      chunkArray.forEach(chunk => {
        __webpack_require__.pfc(chunk);
      });
    });
  } else {
    return;
  }
};

用挂起包装路由器，该挂起具有后备功能（如果尚未加载，则在加载块时显示一些内容）...

 import React,{Suspense} from 'react';
 import {Router} from '@reach/router';    

        const HomeModule  = React.lazy(() => import('./modules/ft_home_module/src/main'));
        const AuthModule  = React.lazy(() => import('./modules/ft_auth_module/src/main')) const ProfileModule  = React.lazy(() => import('./modules/ft_profile_module/src/main'));
        const MerchantModule  = React.lazy(() => import('./modules/ft_merchant_module/src/main'));
        const Loading = () => <div>Loading chunk..</div>

            <Suspense fallback={<Loading/>}>
                <Router>
                  <HomeModule path="/home" />
                  <AuthModule path="/auth" />
                  <ProfileModule path="/profile" />
                  <MerchantModule path="/merchant" />
                </Router>
            </Suspense>