react-scripts build的作用是什么？如何使用生成的build文件夹？

一、npm run build的核心作用 #

你已知的npm run start是面向开发场景的命令，启动的本地服务内置热更新、错误提示等调试能力，但产出的代码包含大量调试冗余信息，体积大、运行性能低，无法直接用于线上环境。
npm run build是专门为生产环境打包代码的命令，除了缩小应用体积外，还会完成一系列生产环境适配工作：

• 压缩、混淆所有JS、CSS代码，删除注释、调试逻辑、未使用的冗余代码（Tree Shaking），大幅降低资源体积，提升加载速度
• 给静态资源文件名添加哈希值，解决线上版本更新时的浏览器缓存旧资源问题
• 做代码兼容性处理，保证打包后的代码可以在目标兼容范围内的浏览器正常运行

二、build/文件夹的使用方法 #

执行命令后生成的build/文件夹，包含了完整的可直接部署的静态站点资源，所有HTML、CSS、JS、图片等静态资源都在该目录下，它本质是纯静态文件集合，所有支持静态资源托管的服务都可以直接使用：

• 本地验证打包效果：可以全局安装serve工具后，在项目根目录执行serve -s build，即可本地预览生产环境的运行效果
• 部署到自有服务器：如果用Nginx、Apache等Web服务，直接把build/目录下的所有文件拷贝到服务的静态资源托管目录即可，如果是React单页应用，需要额外配置路由重定向到index.html，解决页面刷新404的问题
• 部署到云静态托管平台：如果用Vercel、Netlify、阿里云OSS、腾讯云COS这类静态站点托管服务，直接将build/目录打包上传，按照平台指引完成基础配置即可上线

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