React-TS应用本地开发环境UI渲染缓慢，线上正常求助排查

一、组件渲染优化方向 #

• 定位频繁重渲染组件：打开React DevTools的Profiler，录制页面交互（比如切换路由、操作表单），查看火焰图里哪些组件反复触发渲染。重点检查：是否在组件内部每次渲染时创建新的函数、对象（比如onClick={() => {}}、const data = { key: value }），导致React误判props变化；是否有未使用memo/useMemo/useCallback优化的纯组件。
• 第三方组件减负：你用到了antd、highcharts、apexcharts这类重型组件，开发模式下它们会包含额外的调试、警告逻辑。可以临时在开发环境中引入生产版的antd（比如替换import路径为antd/dist/antd.min.js），或者检查图表组件是否每次渲染都重新初始化实例——用useRef缓存图表实例，避免重复初始化。
• 强化懒加载策略：虽然用了图片懒加载，但检查路由级代码分割是否到位。用React.lazy配合Suspense拆分路由组件，避免初始加载时打包所有页面代码，减少开发服务器的编译压力。

二、开发环境配置调优 #

• 修复react-scripts 5.x的缓存问题：react-scripts 5.0.0基于webpack 5，开发模式下的缓存机制有时会异常。试试：
  • 删除node_modules、package-lock.json和.cache目录，重新执行npm install
  • 添加环境变量FAST_REFRESH=false关闭快速刷新，验证是否缓解卡顿
• 简化环境变量加载：你的启动脚本用了env-cmd，可能存在加载阻塞。试试直接在脚本中注入环境变量，比如REACT_APP_ENV=local react-scripts start，排除env-cmd的影响。
• 关闭source map生成：开发模式下默认生成的source map会大幅增加编译时间，在.env.local中添加GENERATE_SOURCEMAP=false，关闭source map。

三、依赖与工具链排查 #

• 运行slow-deps分析依赖：你已经安装了slow-deps，执行npx slow-deps查看哪些依赖加载/安装耗时最长。比如branch-sdk、react-dnd全家桶这类非核心依赖，考虑是否可以按需引入，或者替换为更轻量的方案。
• 优化TypeScript编译速度：检查tsconfig.json：
  • 开启skipLibCheck: true，跳过第三方库的类型检查
  • 暂时关闭strict模式，排查是否是严格类型检查拖慢编译
• 清理ESLint残留缓存：即使移除过ESLint依赖，缓存可能仍存在。执行npx eslint --cache-clear，或者在.eslintrc中关闭高耗时规则（比如import/no-cycle循环依赖检查）。

四、其他排查点 #

• 排除浏览器插件干扰：React DevTools、AdBlock等插件可能在开发模式下拖慢页面，试试在无痕窗口中运行应用。
• 检查本地资源占用：打开任务管理器，查看Node.js进程的CPU和内存占用，是否有其他进程占用过多资源导致编译/渲染卡顿。

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