Разница между производством и разработкой сборки в ReactJS

Недавно я начал изучать реакцию и увидел учебник, в котором они использовали Webpack для создания сборок для производства и разработки. Но не было никакого объяснения того, в чем разница между этими двумя сборками, и какую вы должны использовать когда. Я искал в интернете, но не нашел ничего, что помогло бы мне. У кого-нибудь есть учебник или объяснение, которое я пропустил/не прочитал?

Ответ 1

Сборка разработки используется - как следует из названия - по причинам разработки. В этих сборках у вас есть Source Maps, отладка и возможность горячей перезагрузки.

Производственная сборка, с другой стороны, работает в производственном режиме, что означает, что это код, выполняющийся на вашем клиентском компьютере. Производственная сборка запускает uglify и собирает ваши исходные файлы в один или несколько свернутых файлов. Он также извлекает CSS и изображения и, конечно, любые другие источники, которые вы загружаете с Webpack. Там также нет исходных карт или горячей перезагрузки.

То, что конкретно отделяет производство от разработки, зависит от ваших предпочтений и требований, что означает, что это в значительной степени зависит от того, что вы пишете в своей конфигурации Webpack.

Документация по производству веб-пакетов очень проста. Кроме того, в статье Webpack 3 + React - Советы по производственной сборке довольно неплохо описан процесс создания производственных сборок для React с Webpack.

Ответ 2

Основное различие заключается в том, что Production Build имеет некрасивую уменьшенную (сжатую) версию вашего кода JavaScript, что делает рендеринг файла в браузере конечного пользователя очень быстрым и повышает производительность.

Вы также можете проверить, используется ли производственная сборка на веб-сайте, применив расширение плагина Google, которое при активации в вашем браузере всегда сообщит вам, использует ли веб-сайт response js на внешнем интерфейсе, а также сообщит, является ли тип сборки производство или разработка.

enter image description here

когда реагирует на разработку,

enter image description here

готовые к использованию версии React и React DOM в виде отдельных файлов,

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

ПРИМЕЧАНИЕ. Помните, что только файлы React, заканчивающиеся на .production.min.js, подходят для производства.

Сборка для производства и разработки вошла в картину только из-за влияния на производительность при развертывании приложения в реальной жизни. Кроме того, бывает, что место, где разворачивается приложение, - это еще один континент, поэтому рендеринг js файлов для разработки сборки в пользовательском интерфейсе займет уйму времени по сравнению с рабочей версией, которая очень четкая, компактная, сжатая, улучшенная для лучшего пользователя. опыт и загрузка по интерфейсу. для информации НАЖМИТЕ ЗДЕСЬ