React项目构建包体积优化：懒加载大文件未生效的原因及解决方法求助

我遇到一个头疼的问题，想请教大家：

之前我的React项目构建包只有36MB，可加入一行初始化阶段执行的代码后，包体积直接涨到了92MB——就是这行代码：

require(`./path/to/large_file`)

这行代码运行成本很高，所以我尝试用懒加载优化，写了这样一个函数：

function lazy_loader() {
  return () => require(`./path/to/large_file`)
}

然后初始化阶段只调用lazy_loader();，这个函数只是返回一个需要时才会执行的require函数，按道理不会加载那个大文件才对。

但结果完全没变化，构建包还是92MB！

有没有大佬能解释下为什么这个方法没用？如果可以的话，能不能告诉我正确的解决办法？

原因分析 #

你的lazy_loader之所以没起作用，核心在于现代前端打包工具（比如Webpack）是基于静态代码分析处理依赖的。你写的require('./path/to/large_file')是静态路径引用——路径字符串固定不变，打包工具在编译阶段就能识别到这个依赖，不管你把它嵌套在多少层函数里，都会把large_file直接打包进主bundle，不会延迟加载它。

正确的解决方法 #

要实现真正的懒加载，你需要使用动态import()语法，这是打包工具专门用来拆分代码的标准方式，结合React可以这样做：

如果large_file是React组件

用React官方的React.lazy和Suspense组合，自动处理组件懒加载和加载状态：

// 动态导入组件，Webpack会把它拆成单独的chunk
const LargeComponent = React.lazy(() => import('./path/to/large_file'));

function MyApp() {
  return (
    // Suspense用来指定加载中显示的 fallback 内容
    <React.Suspense fallback={<div>加载中，请稍候...</div>}>
      <LargeComponent />
    </React.Suspense>
  );
}

如果large_file是普通工具类/数据文件

直接用动态import()按需加载，在需要用到的时候再执行：

// 定义一个按需加载的函数
async function loadLargeResource() {
  // 只有调用这个函数时，才会请求对应的chunk
  const largeFile = await import('./path/to/large_file');
  // 这里使用largeFile导出的内容，比如 largeFile.someFunction()
}

// 举个例子：在用户触发某个操作时再加载，比如点击按钮
document.getElementById('load-btn').addEventListener('click', loadLargeResource);

这样处理后，Webpack会把large_file打包成一个独立的代码块，主bundle的体积就会回到36MB左右，只有当代码执行到import()的时候，浏览器才会去加载这个大文件的chunk。

备注：内容来源于stack exchange，提问作者Bear Bile Farming is Torture