ReactJS 中生产和开发构建之间的区别

Difference between production and development build in ReactJS

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

顾名思义,开发版本用于开发目的。在这些构建中,你有源映射、调试和经常热重载的能力。

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

,Source Maps 可能会作为单独的文件包含在内

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

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

最基本的区别是 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>

NOTE: Remember that only React files ending with .production.min.js are suitable for production.

生产和开发版本的出现只是因为在现实生活中部署应用程序的性能影响。此外,碰巧部署应用程序的位置完全是另一个大陆,因此与非常清晰、紧凑、压缩的生产版本相比,在 UI 上渲染开发构建 js 文件将花费大量时间,丑化以获得更好的用户体验并在 UI 上加载。获取信息 CLICK HERE