如何避免React动态加载页面重复加载已加载的可复用组件？

方案1：构建层面拆分共用组件为独立Chunk #

通过构建工具（Webpack/Vite）的代码分割配置，将多个页面共用的组件打包到单独的Chunk中，浏览器加载一次后会缓存该Chunk，后续页面加载时直接复用缓存。

Webpack 配置示例 #

如果使用Webpack（包括Create React App需eject或用craco/customize-cra），在webpack.config.js中配置splitChunks：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        sharedComponents: {
          // 匹配共用组件的路径规则，根据实际项目调整
          test: /[\\/]components[\\/]Shared(.*)\.jsx?$/,
          name: 'shared-components',
          chunks: 'all',
          priority: 10,
          enforce: true, // 强制拆分，忽略其他缓存组规则
        },
      },
    },
  },
};

Vite 配置示例 #

Vite用户可在vite.config.js中通过manualChunks手动指定共用组件Chunk：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 将指定的共用组件打包到同一个Chunk
          'shared-components': [
            'src/components/SharedComponent1',
            'src/components/SharedComponent2'
          ],
        },
      },
    },
  },
};

方案2：自定义带缓存的Lazy加载函数 #

封装一个缓存模块的自定义lazy函数，第一次加载组件后将Promise缓存，后续调用直接复用缓存的Promise，避免重复发起网络请求。

import React from 'react';

// 维护模块缓存Map
const moduleCache = new Map();

const cachedLazy = (importFn) => {
  return React.lazy(() => {
    // 用import函数的字符串作为缓存key，确保唯一
    const cacheKey = importFn.toString();
    if (moduleCache.has(cacheKey)) {
      return moduleCache.get(cacheKey);
    }
    const modulePromise = importFn();
    moduleCache.set(cacheKey, modulePromise);
    return modulePromise;
  });
};

// 使用方式：替换React.lazy为cachedLazy
const SharedComponent1 = cachedLazy(() => import('../components/SharedComponent1'));
const SharedComponent2 = cachedLazy(() => import('../components/SharedComponent2'));

方案3：预加载共用组件 #

在应用初始化阶段（比如App组件挂载时）提前加载共用组件，将模块Promise缓存，后续页面使用时直接读取缓存。

// 预加载共用组件
const preloadSharedComponents = async () => {
  const components = [
    import('../components/SharedComponent1'),
    import('../components/SharedComponent2')
  ];
  // 等待所有组件加载完成，或直接缓存Promise即可
  await Promise.all(components);
};

// 在App组件中调用预加载
function App() {
  React.useEffect(() => {
    preloadSharedComponents();
  }, []);

  return (
    <div className="App">
      {/* 路由和页面内容 */}
    </div>
  );
}

方案选择建议 #

• 优先用方案1：构建层面的拆分是最通用、自动化程度最高的方案，无需修改业务代码，适合大多数场景。
• 方案2适合需要更细粒度控制组件加载缓存的场景，比如部分组件仅在特定条件下复用。
• 方案3适合核心共用组件，需要提前加载以提升后续页面的加载速度。

内容的提问来源于stack exchange，提问作者Cristian