如何在React开发阶段避免实时打包，仅部署时打包？

首先明确：Create React App（CRA）默认的开发命令npm start（或yarn start）不会生成磁盘上的打包文件，它用的是webpack-dev-server，所有编译产物都存在内存里，修改代码后通过热模块替换（HMR）实时更新浏览器，本来就是为了开发时快速预览设计的。如果你的项目现在保存修改时还在生成物理打包文件，大概率是用错了命令或者修改了默认配置。

下面是具体的解决和优化方案：

• 用对开发命令：日常开发只需要运行npm start/yarn start，别碰npm run build（这个是部署前才用的打包命令）。启动后终端会提示“Compiled successfully”，此时浏览器会自动打开预览页，修改代码后几秒内就能看到更新，不会在项目目录下生成dist或build文件夹。

• 确保Fast Refresh生效：CRA从v4版本开始默认支持Fast Refresh，它比传统热更新更快，还能保留组件状态。如果热更新速度慢，检查一下：

  • 不要在组件里写console.log之外的顶层副作用代码
  • 函数组件尽量避免用匿名函数作为props传递（会影响热更新效率）

• 优化编译速度（如果还是慢）：

  • 清理缓存：删除node_modules/.cache目录，重新启动开发服务，CRA会重新生成缓存，后续启动和编译会更快
  • 精简依赖：卸载项目里用不到的第三方包，减少webpack需要处理的文件数量
  • 用工具修改配置提速：如果不想 eject 项目，可以用craco或react-app-rewired，添加hard-source-webpack-plugin插件，它会给webpack的模块编译结果做持久化缓存，大幅减少重复编译时间。安装后在配置文件里引入即可：

    // craco.config.js
    const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
    
    module.exports = {
      plugins: [new HardSourceWebpackPlugin()]
    };
    

• 排查是否强制写入磁盘：如果你之前修改过webpack配置（比如eject之后），检查是否开启了writeToDisk选项，或者把output.path指向了本地目录，把这些配置关掉，回到内存编译模式。

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