Сборка Webpack против сборки сценариев реакции

Скажем, конфигурация веб-пакета выглядит следующим образом

{
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},

Теперь сборка из webpack

введите описание изображения здесь

и сборка из сборки сценариев реакции (static содержит css, js и медиа в отдельных папках)

введите описание изображения здесь

Вопрос: есть ли какое-то конкретное преимущество у webpack перед сборкой сценариев реакции? (включая, но не ограничиваясь, производительность)

ПРИМЕЧАНИЕ: для этого отредактирован package.json.


webpack reactjs react-scripts
person magpie    schedule 05.09.2018    source источник
comment
response-scripts абстрагирует сложную настройку веб-пакета, использует некоторые соглашения для решения общих сборок. Использование raw webpack даст вам наибольший контроль над вашими сборками, в то время как сценарии реакции скрывают большую часть сложности (хотя это было в значительной степени решено в webpack 4 с использованием подхода с нулевой конфигурацией).   -  person hazardous    schedule 05.09.2018
comment
Что ж, можно было бы ожидать, что структура сборки для обоих будет одинаковой. есть ли разница в производительности или другие факторы?   -  person magpie    schedule 05.09.2018
comment
Webpack оставляет структуру для управления конфигурацией, поскольку это инструмент общего назначения, у которого есть приложения помимо React. При новой установке он даже не будет настроен для транспиляции React, вы должны это сделать. Таким образом, для webpack нет стандартной структуры вывода, при нулевой конфигурации практически все выгружается в одну и ту же папку вывода. R-S следует другой настройке, которую они построили вокруг потребностей React spa, но не должно влиять на производительность в результате структуры.   -  person hazardous    schedule 05.09.2018
comment
в конечном итоге приложение create-react-app - это бесконечная головная боль. Я всегда спотыкался об этом, но никогда не пропускал в проекте.   -  person webduvet    schedule 05.05.2021

Ответы (2)


arrow_upward
51
arrow_downward

Webpack - это универсальный сборщик пакетов с приложениями, выходящими за рамки React. До create-react-app в Интернете было полно примеров создания нового проекта React, который использует webpack в качестве сборщика. Он чрезвычайно гибкий и может обрабатывать вещи, в том числе и сверх того, что потребуется приложению React. Он работает для Angular, Vue, NodeJS и даже для веб-сборки.

Но раньше для настройки требовалось время. Вам нужно будет понять его работу и настроить его так, чтобы вы могли перенести свой код React + ES6 в план-ванильный JS. Вам нужно будет выбрать структуру вывода, которая вам нравится, и настроить для нее webpack. А затем также добавьте поддержку горячей перезагрузки модулей и разделения кода. Во время этого вам также нужно будет добавить другие плагины, необходимые Webpack для поддержки всего вышеперечисленного :).

Это, естественно, вызвало некоторую усталость у людей, начинавших с React.

Итак, facebook создал cra, который внутренне использует webpack, предварительно настроенный для включения всех хороших инструментов, которые позаботятся об этих основах и помогут вам сосредоточиться на части вашего кода React. Он максимально скрывает веб-пакет от вас, иначе процесс сборки может прерваться, если конфигурация будет изменена пользователем.

Помимо этого, структурные соглашения, которые использует cra, не должны оказывать никакого влияния на производительность по сравнению с простой настройкой веб-пакета. Это просто условность.

Тогда у вас должен быть вопрос: когда я буду использовать create-response-app и когда я буду использовать Webpack?

Как новичок, вы, возможно, захотите придерживаться Cra, сосредоточившись на своем приложении React. В конце концов, наступит время, когда то, что вы хотите сделать, не будет поддерживаться конфигурацией веб-пакета, которой cra управляет под капотом. Очень распространенный пример - если вы хотите написать библиотеку компонентов для повторного использования в других приложениях. Cra сделать это не может (это касается всего приложения :)). Затем вы можете переключиться на webpack и начать его изучать.

person hazardous    schedule 05.09.2018
comment
Другой пример ситуации, когда используется только Webpack, - это когда вы хотите создать специфичные для браузера пакеты вашего JS, меньший пакет для новых браузеров без транспиляции и полифилов и более толстый пакет для старых браузеров, содержащий все это. Вам нужно будет катапультироваться из Cra и сделать это самому. В общем, придерживайтесь Cra до тех пор, пока не сможете. Преимущество состоит в том, что чистые сборки веб-пакетов требуют ручных изменений по мере добавления новых функций, которые вы хотите использовать, в то время как cra внутренне обновляет свои скрипты, чтобы прозрачно использовать новые соответствующие функции. - person hazardous; 05.09.2018
comment
Связываю свой предыдущий ответ со связанной темой о том, что происходит при катапультировании :). В нем есть более подробная информация и сравнение Cra с необработанной установкой. stackoverflow.com/questions/43129451/ - person hazardous; 07.09.2018

arrow_upward
19
arrow_downward

response-scripts скрывает все конфигурации веб-пакетов за кулисами. Преимущество этого состоит в том, что он становится чище, а поскольку create-react-app регулярно обновляется, легко оставаться в курсе с помощью React, Webpack и Babel. Сообщество автоматически исправляет проблемы за вас.

С точки зрения производительности он должен быть одинаковым независимо от сценариев реакции или веб-пакета.

Преимущества использования только веб-пакета:

  • Полный контроль над вашей средой

  • Может легко выполнять пользовательские операции, например рендеринг на стороне сервера (все еще возможно с create-react-app

  • Знание webpack как навыка

Недостатки только webpack

  • Полное обновление и обслуживание веб-пакета (некоторые версии веб-пакета не имеют обратной или будущей совместимости)

  • Может напугать и вызвать головную боль, если вы пытаетесь научиться быстро реагировать.

Если вы хотите настроить create-react-app, вот некоторая информация

https://auth0.com/blog/how-to-configure-create-react-app/

Вот рендеринг на стороне сервера с create-react-app

https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff

TL; DR: используйте create-react-app / react-scripts, если вы хотите перейти на 0–100 как можно быстрее по какой-либо причине.

Используйте только веб-пакет, если вам нравится возиться под капотом

person maxadorable    schedule 05.09.2018