Как упростить себе жизнь с помощью Vite ?
Обычно любое FrontEnd приложение мы начинали с настройки Webpack, так как это немного лучше чем использовать CLI для любого из фреймворков/библиотек. Таким образом мы можем настроить конкретно то что нам надо и не раздувать бандл. Все было хорошо пока я не наткнулся на такую интересную вещь как Vite и то как он подошел к тому чтобы собирать приложения.
Важно сказать что Vite это сборщик агностик, то есть подоходит абсолютно к любому фреймворку. Разберемся изнутри в чем вообще отличие подхода Vite от Webpack.
Начнем с того что Webpack тупо собирает ваше приложение, а при изменении файла он просто его пересобирает. Vite понял что ваши зависимости не так часто меняются во время разработки, поэтому он один раз связывает их с помощью esbuild, который быстрее Webpack или Parcel. Дальше же Vite запрашивает ваши модули как ES или ESM, что позволяет браузеру обрабатывать фактический бандл. Ну и как вишенка на торте, Vite поддерживает Hot Module Replacment и так как он запрашивает ваши модули как ES, он пересобирает только конкретно взятый кусок, а не все в целом.
Именно поэтому использовать сейчас Webpack на новых проектах я стал в разы реже
Если хотите полный курс по Vite, накидайте огней
Обычно любое FrontEnd приложение мы начинали с настройки Webpack, так как это немного лучше чем использовать CLI для любого из фреймворков/библиотек. Таким образом мы можем настроить конкретно то что нам надо и не раздувать бандл. Все было хорошо пока я не наткнулся на такую интересную вещь как Vite и то как он подошел к тому чтобы собирать приложения.
Важно сказать что Vite это сборщик агностик, то есть подоходит абсолютно к любому фреймворку. Разберемся изнутри в чем вообще отличие подхода Vite от Webpack.
Начнем с того что Webpack тупо собирает ваше приложение, а при изменении файла он просто его пересобирает. Vite понял что ваши зависимости не так часто меняются во время разработки, поэтому он один раз связывает их с помощью esbuild, который быстрее Webpack или Parcel. Дальше же Vite запрашивает ваши модули как ES или ESM, что позволяет браузеру обрабатывать фактический бандл. Ну и как вишенка на торте, Vite поддерживает Hot Module Replacment и так как он запрашивает ваши модули как ES, он пересобирает только конкретно взятый кусок, а не все в целом.
Именно поэтому использовать сейчас Webpack на новых проектах я стал в разы реже
Если хотите полный курс по Vite, накидайте огней