it-roy-ru.com

Что такое "npm run build" в приложении create-реагировать?

Я не смог найти никакого объяснения относительно работы "npm run build",

Он прост и удобен в использовании, и я получаю папку "build", которая прекрасно работает,

Но что происходит в приложении create-реагировать на приложение?

Это совершенно другое использование инструмента сборки?

Если нет, то использует ли он другие инструменты сборки?

8
Ben Porat

Разработчики часто разбивают JavaScript и CSS на отдельные файлы. Отдельные файлы позволяют вам сосредоточиться на написании более модульных кусков кода, которые выполняют одну вещь. Файлы, которые делают что-то одно, уменьшают вашу когнитивную нагрузку, так как поддержание их - довольно громоздкая задача.

Что происходит именно за сценой? 

Когда пришло время перевести ваше приложение в производство, использование нескольких файлов JavaScript или CSS не является идеальным. Когда пользователь посещает ваш сайт, каждый из ваших файлов потребует дополнительный HTTP-запрос , что замедляет загрузку вашего сайта . Поэтому, чтобы исправить это, вы можете создать «build» нашего приложение, которое объединяет все ваши файлы CSS в один файл, и делает то же самое с вашим JavaScript. Таким образом, вы минимизируете количество и размер файлов, которые получает пользователь. Чтобы создать это «построить» , вы используете «инструмент сборки» . Отсюда и использование npm run build.

Как вы правильно заметили, выполнение команды (npm run build) создает каталог build. Теперь предположим, что в вашем приложении есть куча файлов CSS и JS:

css/
  mpp.css
  design.css
  visuals.css
  ...
js/
  service.js
  validator.js
  container.js
  ...

После запуска npm run build ваш каталог build будет:

build/
  static/
    css/
      main.css
    js/
      main.js

Теперь в вашем приложении очень мало файлов. Приложение остается прежним, но сжато в небольшой пакет под названием build.

Окончательный вердикт: Вы можете задаться вопросом, почему сборка того стоит, если все, что она делает, это экономит вашим пользователям несколько миллисекунд времени загрузки. Что ж, если вы делаете сайт только для себя или нескольких других людей, вам не нужно беспокоиться об этом. Создание сборки вашего проекта необходимо только для сайтов с высоким трафиком (или сайтов, которые, как вы надеетесь, скоро будут иметь большой трафик).

Если вы только изучаете разработку или создаете сайты с очень низким трафиком, создание сборки может не стоить вашего времени.

11
patrick.1729

Это кратко объяснено здесь: https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build .

Он корректно объединяет React в производственном режиме и оптимизирует сборку для лучшей производительности.

Сборка минимизирована, а имена файлов содержат хэши.

За кулисами он использует babel для переноса вашего кода и веб-пакет в качестве инструмента сборки для объединения вашего приложения.

2
rgommezz