Это не так просто для больших кодовых баз
Vite наделал шума в фронтенд-сообществе. Количество загрузок npm увеличилось в четыре раза за последний год, и он продолжает набирать популярность.
Первое, что вы читаете о Vite на их веб-сайте, это то, что их имя означает «быстрый» на французском языке. Vite обещает значительное увеличение производительности, так как же Vite этого достигает?
Webpack и другие традиционные сборщики работают по старому методу чтения всего вашего исходного кода и компиляции его в пару файлов JS.
Прошло несколько лет с тех пор, как поддержка ESM стала доступна во всех основных браузерах, поэтому Vite применил другой подход. Он передает ваш исходный код как есть в ваш браузер и позволяет ему самостоятельно обрабатывать импорт модулей. Это значительно ускоряет процесс сборки, поскольку для разработки больше не требуется связывание.
Но, как всегда, есть подвох.
Браузерам требуется время для разрешения нативных модулей. Открытие одного пакета намного быстрее, чем открытие сотен зависимостей. Так насколько отличается производительность на самом деле? Я сделал несколько фиктивных проектов с разным количеством файлов, чтобы проиллюстрировать разницу в производительности.
Бенчмаркинг
Я сделал скрипт, который автоматически генерирует готовый к сборке проект с помощью Vite и Webpack, а также создает предустановленное количество фиктивных компонентов, которые отображаются на одной странице. Вы можете найти ссылку на GitHub здесь.
Я запускаю автоматически сгенерированный проект с npm start и записываю две метрики:
- Время сборки, как сообщает упаковщик.
- Время загрузки согласно данным инструментов разработчика Chrome.
Vite выигрывает у Webpack из-за меньших размеров пакетов, но с 500 файлами и более Webpack удается быстрее скомпилировать пакет. Чем больше у вас файлов, тем больше разница. А когда ваш бандл неоправданно большой, Vite замедлит вас на десятки секунд.
Неудивительно, что браузеры не предназначены для эффективной загрузки тысяч файлов за секунды. Потому что на самом деле у вас не должно быть 5000 файлов в одном пакете JS.
Разделение кода на помощь!
На самом деле вы должны загружать JS-код по мере необходимости, когда он вам нужен. Ваш начальный кусок должен быть как можно меньше. Это часто делается с помощью маршрутизации, когда маршрутизатор обрабатывает лениво загруженные модули, когда вы переходите к маршруту, который в них нуждается. Подробнее читайте в документации React.
С Vite и разделением кода ваш браузер будет получать файлы JS только небольшими партиями, что значительно повышает производительность.
Но Webpack не так сильно отстает, как можно подумать. Доступный с версии 5.20, Webpack может откладывать компиляцию динамически импортируемых модулей. С опцией конфигурации experiments.lazyCompilation производительность вашей сборки может значительно повыситься за счет разделения кода.
Тогда давайте сравним!
На этот раз я использую те же автоматически сгенерированные проекты, но эти сотни компонентов теперь загружаются лениво, так что начальный фрагмент представляет собой почти пустой проект.
Вот результаты:
Такая же картина у нас была с 10 файлами в проекте. Разница меньше секунды, но Вите здесь выигрывает. Что никого не должно удивлять! Когда вы лениво загружаете почти все, ваше начальное время сборки будет минимальным. И если вы сможете сохранить все свои фрагменты достаточно маленькими, Vite продолжит давать вам преимущества быстрой сборки.
Заключение
Если вы можете разделить код своего приложения и сохранить небольшие фрагменты, Vite сэкономит вам полсекунды здесь и там.
Но Webpack не так сильно отстает, как можно подумать, особенно благодаря таким инновациям, как lazyCompilation и swc-loader. Если ваша сборка Webpack занимает более 30 секунд, вы можете сначала попытаться оптимизировать свою конфигурацию с помощью этих новых параметров.
Webpack по-прежнему является хорошим вариантом, если вы хотите иметь более широкую поддержку непонятных вариантов использования или если ваш первоначальный фрагмент пакета огромен, и вы не можете его разделить.
Vite — это более современный подход, с гораздо более простой установкой и настройкой, а также с отличной производительностью.
В конце концов, это всегда зависит от вас и ваших потребностей!
