миграция приложения create-response-app

Предисловие: эта миграция была выполнена для извлеченного приложения create-response-app, в котором мы добавили поддержку следующих элементов в конфигурацию Webpack: CSS-модули, Sass и SVG. Исходный код состоит из 27K LOC, 1762 модулей и использует Webpack v3.10.0. это внутренний инструмент, который мы сосредоточили на скорости доставки, но пожертвовали производительностью сборки и временем загрузки. Теперь он догнал нас, и мы стремились добиться максимального повышения производительности с наименьшими усилиями.

Мы все можем согласиться со всем, что мы считаем само собой разумеющимся в отношении того, что Webpack предоставляет современному веб-разработчику, и его легкая настройка становится большой головной болью. Это должно измениться со следующей основной версией Webpack v4, но до тех пор вам все еще нужно потратить свое время на настройку конфигурации и ее тонкую настройку, чтобы выполнить все возможные оптимизации.

Если вы начинаете новый проект или вам нужно быстро создать прототип, это может очень быстро стать проблемой. Один из самых популярных стартовых пакетов React, create-react-app, обнажает эту боль. Он идет на все (и делает это хорошо), чтобы абстрагироваться от всей конфигурации Webpack, чтобы пользователю никогда не приходилось ее видеть. Пока вам не понадобится eject из его сети безопасности, чтобы настроить конфигурацию.

Без конфигурации с посылкой

Parcel обещает упростить это еще больше, менее 3 месяцев и с более чем 17 000 звезд на GitHub (во время написания этого поста), это настолько близко к сборщику с нулевой конфигурацией, насколько вы можете получить. Он поставляется с поддержкой многоядерных процессоров и встроенным кэшированием для более быстрой сборки после начальной сборки. Нет необходимости в parcel.config файле, как в webpack.config. Все, что вам нужно для работы Parcel, - это точка входа, обычно index.html со ссылкой на ваш index.js файл.

$ parcel ./public/index.html

Затем Parcel соберет и будет обслуживать приложение через порт по умолчанию 1234.

Желая протестировать Parcel, я решил перейти на существующий
create-react-app из Webpack.

Конечные результаты, которых я хотел достичь, были:
• Более быстрое время сборки
• Меньший общий размер пакета
• Меньшее количество файлов конфигурации
• Поддержание npm start npm build и прокси, которые поставляются с < br /> create-react-app для удобства.

.rc файлы

Хотя вам не нужен отдельный parcel.config файл. Вам по-прежнему необходимо настроить babel (для синтаксиса JSX и ES6), postcss (для модулей CSS и автопрефиксатора), а поскольку мы используем sass, нам нужно включить node-sass и настроить его.

Вместо объединения всей этой конфигурации в один файл вроде weback.config Parcel просто зависит от их отдельных файлов
.bablerc .postcssrc .sassrc. После того, как я включил эти три файла и запустил команду Parcel CLI, собранный и миниатюрный пакет изменился с 16 МБ до 10 МБ, а время сборки уменьшилось с 59 секунд до 30,72 секунды.

✔ Ускорение сборки
✔ Меньший общий размер пакета
✔ Меньше конфигурационных файлов
(мне удалось удалить webpack.config.[dev|prod].js файлов)

Кроме того, эти 30,72 секунды превратились в 16,74 секунды при втором запуске команды. Уменьшение времени сборки связано с кешем Parcel, который создается при начальной сборке. Каждая последующая сборка использует его и работает значительно быстрее. Если вы когда-нибудь захотите построить его без кеша, вы можете передать ему — no-cache arg.

Сценарии

Одним из недостатков Parcel младше 3 месяцев является отсутствие документации. Веб-сайт дает вам ровно столько, чтобы встать и начать создавать сборки с его помощью. Чтобы поддерживать удобство create-react-app npm start, npm build и его прокси, мне нужно было знать, как написать сценарий с помощью Parcel. К счастью, исходный код очень прост в навигации и понимании.

По сути, это то, чем стал мой scripts/build.js файл. Есть гораздо больше кода, который просто использует chalk для вывода цветных изображений на терминал, но это не обязательно, чтобы донести суть. Ключ здесь new Bundler - он принимает путь к точке входа в качестве первого аргумента и объект options в качестве второго. Этот сценарий соберет пакет и выведет его на paths.appBuild, а кэш сборки будет на .parcelCache для использования следующей сборкой.

Мой scripts/start.js немного сложнее, так как я хотел, чтобы он имел те же функции, что и create-react-app (например, открывает браузер, использует прокси из package.json).

Мне пришлось включить express, чтобы получить желаемую функциональность прокси. Я использовал openBrowser из пакета react-dev-utils. После того, как я их настроил, единственное, что мне нужно было сделать, чтобы express и его прокси работали с Parcel, - это передать посылку в качестве промежуточного программного обеспечения.

Последний скрипт берет прокси из package.json, устанавливает с ним промежуточное ПО прокси в экспрессе, связывает сборку без кеша (поскольку мы находимся в режиме разработки, кеш на самом деле не нужен) и открывает браузер на желаемый порт. . В этом примере порт жестко запрограммирован на 3000.

✔ Для удобства используйте npm start npm build и прокси, которые поставляются с
create-react-app.

Контрольные показатели и сравнения

Посылка еще очень новая

Проблемы создаются и закрываются каждый день. Легкость развертывания и интеграции заставила меня продолжить его использование и, в конечном итоге, провести сравнение с Webpack v4, когда он выйдет из бета-версии. Если вы начинаете новый проект, у вас много времени на сборку или вы просто не хотите больше иметь дело с конфигурациями сборщика, то я настоятельно рекомендую попробовать parcel. Функциональность plug and play с незначительной .rc конфигурацией файла чрезвычайно освежает среди других сборщиков веб-приложений.

Правка (05.02.2018):
В первоначальном черновике этой публикации эталонный тест, ссылающийся на размер сборки Parcel, не учитывал исходные карты. После включения разница в сборке теперь составляет от 16 МБ до 10 МБ. Разница не такая разительная, но все же значительная. Чтобы отразить это, в статью были внесены изменения.

В Pandera Labs мы всегда изучаем новые способы создания продуктов и совершенствования наших инженерных процессов, и мы ценим возможность делиться своими выводами с более широким сообществом по мере того, как наша компания и наши технологии развиваются вместе. Чтобы напрямую обсудить тему этой статьи или обсудить наши предложения, посетите нас на panderalabs.com.