ReactJS中的生产和开发构建之间的差异

Question

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

Answer 1

出于开发原因，使用开发构建 - 顾名思义。您有源映射，调试并且通常在这些构建中具有热重新加载功能。

另一方面，生产构建在生产模式下运行，这意味着这是在客户机器上运行的代码。生产构建运行uglify并将源文件构建为一个或多个最小化文件。它还提取CSS和图像，当然还有你在Webpack上加载的任何其他资源。还没有包含源地图或热重新加载。

具体区分生产和开发取决于您的偏好和要求，这意味着它几乎取决于您在Webpack配置中编写的内容。

webpack-production documentation 非常简单。 此外，文章Webpack 3 + React — Production build tips描述了使用Webpack为React创建生产版本的过程非常好。

Answer 2

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

您还可以通过应用google plugin extension来验证网站是否正在使用生产版本，会在您的浏览器上激活时始终告诉您网站是否在前端使用了反应js并且还告诉您构建类型是生产还是开发。

当反应是开发构建时，

CLICK HERE

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

n C m = n!/(n-m)!m!

  

注意：请注意，只有以<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> 结尾的React文件才适合制作。

生产和开发构建仅仅是因为在现实生活中部署应用程序的性能影响。此外，发生应用程序部署的位置完全是另一个大陆，因此，与生产版本相比，在UI上呈现开发构建js文件将花费一些时间，生产版本非常清晰，紧凑，压缩，可以更好地用户使用在UI上体验和加载。获取信息offical command