Vite.js: собираем приложение для production безопасно

В мире веб-разработки инструменты для сборки приложений играют ключевую роль, помогая разработчикам оптимизировать и упрощать процесс разработки. Одним из таких современных инструментов является Vite.js, который стремительно завоевывает популярность среди фронтенд-разработчиков. В этой статье мы рассмотрим, почему Vite.js стал отличной альтернативой Webpack и как он может упростить жизнь как новичкам, так и опытным разработчикам.

Vite.js: Новый инструмент для сборки приложений

Vite.js — это современный инструмент для разработки фронтенд-приложений, созданный Эваном Ю, автором Vue.js. В отличие от традиционных инструментов сборки, таких как Webpack, Vite предлагает совершенно иной подход, основанный на современных браузерных возможностях и быстрых сборках благодаря использованию ES-модулей и мощного компилятора esbuild.

Быстрее благодаря ES-модулям

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

Использование esbuild

Для более быстрой трансформации и минификации кода Vite использует esbuild — невероятно быстрый компилятор, написанный на Go. Благодаря esbuild, Vite обеспечивает молниеносную сборку даже для крупных проектов, что особенно заметно при переходе от разработки к production-сборке.

Почему Vite

Хотя Webpack долгое время был стандартом в мире сборщиков JavaScript, но Vite предлагает ряд преимуществ, которые делают его привлекательным выбором для многих проектов:

Скорость: Благодаря своей архитектуре, Vite обеспечивает более быстрый запуск и перезагрузку проекта.
Простота настройки: Vite предлагает "из коробки" поддержку многих популярных фреймворков, таких как Vue.js, React и Preact, минимизируя количество необходимой настройки.
Модульная архитектура: В Vite легко добавлять и настраивать плагины благодаря использованию Rollup под капотом для production-сборки.
Идеально для новичков

Одним из главных преимуществ Vite является его простота в использовании. Для начинающих разработчиков Vite предлагает минимальную конфигурацию и готовность к работе практически сразу после установки. Вам не нужно беспокоиться о сложных конфигурационных файлах или тонкой настройке различных плагинов — все работает "из коробки".

Шаг влево, шаг вправо ...

Однако, как и любой инструмент, Vite не является универсальным решением для всех сценариев. Когда ваши требования выходят за рамки стандартной конфигурации, вам может понадобиться более глубокое понимание Vite и связанных с ним технологий, таких как esbuild и Rollup.

По-умолчанию из коробки Vite предлагает вам собирать приложение для production не учитывая изменения в JavaScript в разных версиях браузеров и считать, что код собирается для браузеров, которые поддерживают модули:

• Chrome >=87
• Firefox >=78
• Safari >=14
• Edge >=88

В документации сказано:

Note that by default, Vite only handles syntax transforms and does not cover polyfills. You can check out https://cdnjs.cloudflare.com/polyfill/ which automatically generates polyfill bundles based on the user's browser UserAgent string.

Vite прямо указывает, что он просто преобразует модули в формат, понимаемый браузером, но он ничего не знает и ничего не делает для его поддержки. Те, кто хочет, чтобы его код выполнялся во всех браузерах, даже если его поддержка реализована не во всех из них - идите за полифилами на CDN одного из провайдеров "добра"!
И это после того, как только недавно отгремел скандал с покупкой сервиса для раздачи полифилов китайцами, которые стали вместе с полифилами вам в код вставлять рекламу! И слава Богу что только рекламу вставляли!

В общем стандартная сборка кода для приложения в Vite никуда не годиться и нам нужно ее исправить!
Нам нужно, что бы все необходимые полифилы были применены на этапе сборки приложения без необходимости инжектировать на сайт сторонний код!

Данная проблема решается при помощи @babel/preset-env. Этот пресет во время сборки анализирует исходный код и если обнаруживает, что используется функциональность которая еще не реализована в конкретной версии браузеров из вашего списка - он добавляет в результирующий код полифил для реализации данной функциональности.

Для начала нужно добавить в проект пакеты:

npm add -D @babel/preset-env core-js @rollup/plugin-babel

и затем создать конфиг Vite (если он не был создан) или модифицировать секцию plugins следующим образом:

// vite.config.js

import { defineConfig } from "vite";
import { getBabelOutputPlugin } from '@rollup/plugin-babel';
import { devDependencies } from "./package.json";

return defineConfig(({ mode }) => {
  const isDev = mode === "development";

  return {
    plugins: isDev
      ? [ react() ]
      : [
          react(),
          getBabelOutputPlugin({
              babelrc: false,
              configFile: false,
              presets: [
                [
                  "@babel/preset-env",
                  {
                    modules: false,
                    useBuiltIns: "entry",
                    corejs: {
                      version: devDependencies["core-js"],
                    },
                  },
                ],
              ],
          }),
        ],
  };
});

Теперь после выполнения команды vite build ваша сборка будет содержать полный код для выполнения в любом целевом браузере и без уязвимостей, связанных с инъекцией кода 3-й стороны!

Примечание: в статье рассматривается сборка кода только для браузеров, которые поддерживают модули. Для сборки кода, для браузеров не поддерживающих модули, используйте плагин legacy (там уже используется @babel/preset-env)