本地开发时浏览器如何解析React代码？构建速度差异答疑

本地开发的运作逻辑 #

本地开发依赖开发服务器工具（比如Vite、Create React App内置的webpack-dev-server），和生产构建完全是两套逻辑：

• 代码修改后不会触发全量构建，只会做增量编译：仅重新编译你改动的那部分代码，其余已编译模块会被缓存。
• 编译结果不会写入本地磁盘，而是直接存放在内存中，浏览器通过开发服务器加载内存里的代码，这也是修改后刷新快的核心原因之一。
• 开发模式会跳过大量生产级优化步骤，比如代码压缩、复杂的tree-shaking，同时生成轻量化的source map，进一步提升编译速度。

为什么本地修改能秒级响应 #

• 增量编译+内存缓存：只处理变更文件，避免重复编译整个项目。
• 跳过生产优化环节：开发模式下不做代码混淆、压缩、深度tree-shaking等耗时操作。
• 工具针对性优化：比如Vite利用浏览器原生ES模块支持，直接让浏览器加载未打包的模块，启动和更新速度远快于传统打包工具。

部署构建为什么耗时更久 #

生产构建的目标是生成适合生产环境的高性能代码包，需要完成大量本地开发不会做的工作：

• 全量编译：不管代码是否修改，都会重新编译整个项目的所有模块，避免缓存导致的代码遗漏。
• 深度代码优化：
  • Tree-shaking：移除所有未被使用的冗余代码，大幅减小包体积。
  • 代码压缩（minify）：混淆变量名、移除空格注释、合并重复逻辑。
  • 代码分割：将代码拆分为多个小模块，实现按需加载，提升首屏加载速度。
• 资源预处理：压缩图片、处理字体资源、生成带hash后缀的静态文件名（用于浏览器缓存控制）。
• 合规校验：运行TypeScript严格类型检查、代码lint、单元测试等，确保代码符合生产规范。
• 多环境适配：若需构建测试、预发布、生产等多个环境，还会重复部分编译流程。

本质上，本地开发追求快速反馈，一切以速度优先；生产构建追求最优性能与稳定性，因此要执行大量耗时的优化与校验步骤。

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