生产和发展之间的差异建立反应

Question

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

Answer 1

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

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

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

该的WebPack制作的文档是非常直接的.此外,文章Webpack 3 + React - Production构建技巧描述了使用Webpack为React创建生产构建的过程非常好.

Answer 2

最基本的区别在于,Production Build具有javascript代码的丑陋,缩小(压缩)版本,因此这使得在最终用户的浏览器上呈现文件非常快速且性能增强.

您还可以通过应用Google插件扩展来验证网站是否正在使用生产版本,该扩展程序在您的浏览器上激活后,将始终告诉您网站是否在前端使用了反应js,并且还告诉您构建类型是否为生产或开发.

当反应是开发构建时,

生产就绪版本的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>

注意:请记住,只有以其结尾的React文件.production.min.js才适合生产.

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