如何在React项目特定环境下禁用React.lazy懒加载

安全阿岳

2026-9-23

React开发环境禁用React.lazy实现方案

以下两种方案都可以实现开发环境下React.lazy和普通import一致的同步加载效果，同时不改动生产环境的代码分割逻辑：

方案1：无侵入式重写React.lazy（推荐）

直接在项目入口文件最顶部添加以下代码，不需要修改任何现有路由/懒加载逻辑：

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const originalLazy = React.lazy;
  React.lazy = (importFunction) => {
    // 开发环境立即执行导入逻辑，提前加载所有懒加载模块
    importFunction();
    return originalLazy(importFunction);
  };
}

该方案特性：

零业务代码改动，生产环境自动恢复正常懒加载逻辑
模块在应用初始化时就全部加载完成，和普通import行为完全一致
原有Suspense、路由逻辑不需要做任何调整

方案2：封装自定义懒加载工具

如果需要更灵活的控制逻辑，可以封装统一的懒加载函数替换原有React.lazy调用：

// src/utils/lazyImport.js
import React from 'react';

export function lazyImport(importFunc) {
  if (process.env.NODE_ENV === 'development') {
    // 返回立即resolve的懒加载组件，无加载等待
    return React.lazy(() => Promise.resolve(importFunc()));
  }
  // 生产环境走正常懒加载
  return React.lazy(importFunc);
}

使用时替换所有React.lazy调用即可：

// 替换前
const Home = React.lazy(() => import('@/pages/Home'));
// 替换后
const Home = lazyImport(() => import('@/pages/Home'));

调试优化补充

给动态导入添加魔法注释指定chunk名，方便定位文件：

import(/* webpackChunkName: "HomePage" */ '@/pages/Home') // webpack场景
import(/* @vite-ignore */ /* viteChunkName: "HomePage" */ '@/pages/Home') // vite场景