最近我开始学习 react,我看到了一个教程,他们用来Webpack
创建生产和开发版本。但是没有解释这两种构建之间的区别以及您必须在何时使用哪一种。我搜索了互联网,但没有找到任何对我有帮助的东西。有没有人有我错过/没有阅读的教程或解释?
ReactJS 中生产和开发构建之间的区别
出于开发原因,使用开发版本 - 顾名思义。在这些构建中,你有源映射、调试和热重载能力。
另一方面,生产版本在生产模式下运行,这意味着这是在您的客户端机器上运行的代码。生产构建运行 uglify 并将您的源文件构建到一个或多个最小化文件中。它还提取 CSS 和图像,当然还有您使用 Webpack 加载的任何其他来源。也不包括热重载。根据您的 webpackdevtool
设置, Source Maps 可能作为单独的文件包含在内。
具体将生产与开发区分开来取决于您的偏好和要求,这意味着它在很大程度上取决于您在 Webpack 配置中编写的内容。
该的WebPack制作的文档是非常直接的。此外,文章Webpack 3 + React — Production build tips描述了使用 Webpack 为 React 创建生产构建的过程。
最基本的区别在于,Production Build 具有丑陋的、缩小(压缩)版本的 javascript 代码,因此这使得最终用户浏览器上的文件渲染速度非常快并提高了性能。
您还可以通过应用google 插件扩展来验证网站中是否正在使用生产版本,当在浏览器上激活时,它会始终告诉您网站是否在前端使用 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>
注意:请记住,只有以 结尾的 React 文件
.production.min.js
才适合生产。
生产和开发版本出现只是因为在现实生活中部署的应用程序的性能影响。此外,碰巧部署应用程序的位置完全是另一个大陆,因此与生产版本相比,在 UI 上渲染开发构建 js 文件将花费大量时间,生产版本非常清晰,紧凑,压缩,丑陋以提供更好的用户UI 上的体验和加载。有关信息,请单击此处