ReactJS 中生产和开发构建的区别答案

【问题标题】：Difference between production and development build in ReactJSReactJS 中生产和开发构建的区别
【发布时间】：2018-06-17 11:32:41
【问题描述】：

最近我开始学习 React，我看到一个教程，他们使用 Webpack 创建生产和开发版本。但是没有解释这两个版本之间的区别是什么，以及您何时必须使用哪一个。我搜索了互联网，但没有找到任何对我有帮助的东西。有没有人有我错过/没有阅读的教程或解释？

【问题讨论】：

标签： reactjs webpack webpack-dev-server

【解决方案1】：

顾名思义，使用开发版本是出于开发原因。在这些构建中，您拥有 Source Maps、调试和经常热重载的能力。

另一方面，生产版本在生产模式下运行，这意味着这是在您的客户端计算机上运行的代码。生产构建运行 uglify 并将您的源文件构建为一个或多个最小化文件。它还提取 CSS 和图像，当然还有您使用 Webpack 加载的任何其他资源。也不包括热重载。根据您的 webpack devtool settings，Source Maps 可能包含在单独的文件中。

生产与开发的具体区别取决于您的偏好和要求，这意味着它在很大程度上取决于您在 Webpack 配置中编写的内容。

webpack-production documentation 非常直接。另外，Webpack 3 + React — Production build tips 文章很好地描述了使用 Webpack 为 React 创建生产构建的过程。

【讨论】：

生产版本仍然包含源映射，请参阅 here 和 here

【解决方案2】：

最根本的区别在于，Production Build 具有丑陋、缩小（压缩）的 javascript 代码版本，因此这使得最终用户浏览器上的文件呈现非常快速并提高了性能。

您还可以通过应用google plugin extension 来验证网站中是否正在使用生产构建，当在您的浏览器上激活它时，将始终告诉您网站是否在前端使用 react js，并告诉您是否构建类型是生产或开发。

当 react 是开发构建时，

生产就绪版本的 React 和 React DOM 作为单个文件也可用，

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

注意：请记住，只有以 .production.min.js 结尾的 React 文件才适用于生产环境。

生产和开发构建只是因为实际部署应用程序的性能影响而出现。此外，应用程序的部署位置恰好是另一个大陆，因此在 UI 上渲染开发构建 js 文件将花费大量时间，而生产版本非常清晰、紧凑、压缩、丑化以便更好的用户使用体验和加载 UI。求资料CLICK HERE

【讨论】：

你好 Ankur，只是想问你，甚至一些官方网站仍处于开发模式而不是生产模式的原因是什么。如果有处于开发模式，是不是还没有完全开发？
可能也是这个意思。