Шаг 0: Осознание философии. Vite в продакшене полагается на нативный ES Modules и предварительную сборку зависимостей через esbuild (для dev) и Rollup (для build). Это означает, что ваш продакшен-бандл по умолчанию уже оптимизирован благодаря tree-shaking и разделению кода на уровне ESM. Ваша задача — усилить эти преимущества.
Шаг 1: Базовая конфигурация `vite.config.js`. Начните с явного указания режима и базового пути. Используйте переменные окружения. Важная настройка — `base`. Если ваше приложение деплоится не в корень домена (например, на `https://site.com/app/`), установите `base: '/app/'`. Это критически важно для корректного разрешения путей к ресурсам.
Шаг 2: Оптимизация зависимостей. Vite автоматически предварительно собирает зависимости в `node_modules/.vite`. Но вы можете управлять этим процессом. В конфигурации используйте `optimizeDeps`. Включите туда тяжелые библиотеки, которые не обнаруживаются автоматически (например, некоторые CommonJS-пакеты). Укажите `exclude`, чтобы исключить из предварительной сборки те зависимости, которые не должны быть там (редкие случаи). Это ускорит как холодный старт dev-сервера, так и продакшен-сборку.
Шаг 3: Конфигурация сборки (`build`). Это ядро продакшен-настройки.
- `outDir`: Укажите явно директорию вывода (например, `dist`).
- `sourcemap`: Для продакшена рекомендуется `sourcemap: true` или `'hidden'`. Скрытые source maps позволяют инструментам мониторинга ошибок (Sentry, LogRocket) сопоставлять минифицированный код с исходным, не раскрывая его конечным пользователям.
- `minify`: По умолчанию используется esbuild, который очень быстр. Для максимального сжатия переключитесь на `'terser'` (нужно установить пакет) и настройте его опции для удаления console.log и отладочных операторов.
- `rollupOptions`: Здесь происходит магия. Настройте выходные форматы. Для современных браузеров используйте `es` формат. Для совместимости добавьте `umd` или `iife`. Ключевой пункт — разделение кода (`manualChunks`). Создайте стратегию для выноса больших библиотек (react, vue, lodash) в отдельные чанки. Это позволит браузеру кэшировать их отдельно от вашего бизнес-кода.
Шаг 5: Оптимизация статических ресурсов. Vite по умолчанию обрабатывает изображения, шрифты и другие ассеты, копируя их в выходную директорию. Используйте плагины для дальнейшей оптимизации:
- `vite-plugin-imagemin` для сжатия PNG, JPEG, SVG.
- Настройте `build.assetsInlineLimit` для инлайна маленьких ассетов (например, SVG-иконок) прямо в JS/CSS, чтобы уменьшить количество HTTP-запросов. Для больших файлов это значение (по умолчанию 4кб) должно быть увеличено.
Шаг 7: Работа с переменными окружения. Никогда не хардкодьте API-ключи или URL. Используйте `.env` файлы. Vite загружает переменные из `.env.production` в продакшен-режиме. Доступ к ним осуществляется через `import.meta.env.VITE_API_URL`. Убедитесь, что все чувствительные данные защищены, и в репозиторий попадает только `.env.example`.
Шаг 8: Деплой и настройка сервера. Собранная папка `dist` — это статические файлы. Вы можете деплоить их на любой хостинг: Vercel, Netlify, Cloudflare Pages, или обычный Nginx. Критически важный шаг — конфигурация сервера. Для SPA (Single Page Application) необходимо настроить fallback на `index.html` для всех маршрутов, чтобы клиентский роутинг работал. Пример для Nginx: `try_files $uri $uri/ /index.html;`. Также настройте правильные заголовки кэширования для статических активов (js, css, изображения) на длительный срок.
Шаг 9: Мониторинг и обратная связь. После деплоя добавьте в приложение скрипты для мониторинга ошибок (например, Sentry). Благодаря source maps вы будете видеть стектрейсы в исходном коде. Настройте аналитику загрузки чанков, чтобы понимать, какие части приложения загружаются медленнее всего у реальных пользователей.
Следование этим шагам превратит ваш быстрый прототип на Vite в надежное, оптимизированное и готовое к высоким нагрузкам продакшен-приложение. Главное — помнить, что скорость Vite в разработке должна быть дополнена продуманностью и тщательностью на этапе сборки для продакшена.
Комментарии (5)