React代码分割：避免底层组件初始加载时自动下载

方案1：改造根导出为动态导入函数（最可靠） #

把组件根目录的index.js改成导出返回动态导入的函数，替代原来的静态导出：

// components/index.js
export const une = () => import('./une');
export const dues = () => import('./dues');
export const trois = () => import('./trois');

在懒加载的页面组件中，结合React.lazy使用这些函数：

// 示例懒加载页面
import { Suspense } from 'react';
import { une } from 'components';

const UneComponent = React.lazy(une);

const PageA = () => {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <UneComponent />
    </Suspense>
  );
};

export default PageA;

这种方式既保留了import { une } from 'components'的简洁写法，又能确保每个组件只有在被页面实际渲染时才会触发下载，完全不会进入初始加载包。

方案2：优化Tree-Shaking（保留静态导入） #

如果不想修改导入逻辑，可以通过优化构建工具的Tree-Shaking能力，让未被使用的组件自动从打包产物中剔除：

• 确保所有组件都使用ES模块语法（用export/export default，避免CommonJS的module.exports）
• 在项目根目录的package.json中添加"sideEffects": false，告诉构建工具这些组件文件无副作用，可以安全地移除未引用代码；如果部分组件有副作用（比如全局样式），需在sideEffects数组中明确列出对应的文件路径
• 确保构建工具处于生产模式（Webpack/Vite等在生产模式下默认开启Tree-Shaking），或手动开启相关配置（比如Webpack的optimization.usedExports: true）

需要注意的是，Tree-Shaking的效果依赖代码结构和构建工具的分析能力，如果组件存在复杂的依赖关系或隐藏副作用，可能无法完全生效。

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