Vite.js: собираем приложение для production безопасно
Tags: vite, tooling
Published: 2024-07-17 16:49:40

В мире веб-разработки инструменты для сборки приложений играют ключевую роль, помогая разработчикам оптимизировать и упрощать процесс разработки. Одним из таких современных инструментов является 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`

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

```js
// vite.config.js

import { defineConfig } from "vite";
import { devDependencies } from "./package.json";

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

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

```

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

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