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

ilmyapht  于 2023-01-01  发布在  React
关注(0)|答案(3)|浏览(268)

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

slsn1g29

slsn1g291#

开发版本是用于开发的,正如其名称所暗示的那样,在这些版本中你有源代码Map,调试和经常的热重载能力。
另一方面,生产版本,运行在生产模式,这意味着这是运行在您的客户端机器上的代码。生产构建运行uglify并将您的源文件构建成一个或多个最小化的文件。它还提取CSS和图像,当然还有您使用Webpack加载的任何其他源文件。也不包括热重载。源Map可能作为单独的文件包含,具体取决于您的webpack devtoolsettings
生产和开发的具体区别取决于您的偏好和需求,这意味着它在很大程度上取决于您在Webpack配置中编写的内容。
webpack-production documentation非常简单明了,另外,文章Webpack 3 + React — Production build tips很好地描述了为React with Webpack创建生产构建的过程。

vd2z7a6w

vd2z7a6w2#

最基本的区别是,生产构建有丑陋的,缩小(压缩)版本的javascript代码,所以这使得渲染文件在最终用户的浏览器非常快,性能增强。
您还可以通过应用google plugin extension来验证网站中是否正在使用生产构建,当在浏览器上激活google plugin extension时,它将始终告诉您网站是否在前端使用react js,并告诉您构建类型是生产还是开发。

当react是开发版本时,

React和ReactDOM作为单个文件的生产就绪版本也是可用的,

<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

mwkjh3gx

mwkjh3gx3#

development.js为我们提供了一些额外的特性,比如调试、hmr(热模块重载)和很多其他的东西,你可以在webpack、parcel、vite等捆绑包的帮助下开发应用程序。
这些缩小的文件将部署在生产中,删除大量不必要的文件,这些文件将不会被我们的应用程序使用,为此,我们有react.production.js,使我们的速度快得多(作为捆绑包和许多其他文件已经完成了那里的工作,现在不需要)

相关问题