Ускорьте E2E-тесты для приложений на базе Vite

До появления Vite мы использовали длительное ожидание пакетов, а приложения загружались в браузере мгновенно. Теперь ожидание упаковки закончилось, а приложения загружаются медленнее. Вы можете получить представление о том, что изменилось, на следующем изображении.

Общий опыт разработчика превосходен (вы можете найти несколько примеров в моей статье Миграция 150K LOC кодовой базы на Vite и ESBuild: стоит ли?), потому что приложения и HMR намного быстрее, но как быть тем, кому нужно загрузить приложение более одного раза? Например, как в E2E тестах Cypress. Cypress перезагружает приложение перед каждым тестом. Следовательно, за многократную загрузку приложения придется платить, как на картинке.

Есть ли способ исправить это? Можем ли мы получить максимум от использования Vite и от использования Rollup одновременно? Ответ — да, и мы можем сделать это бесплатно!

Включение Rollup watcher внутри Vite

Vite использует Rollup для производственной сборки и позволяет включить Rollup watcher. Цель состоит в следующем

1. Создание пользовательской конфигурации Vite для использования Rollup watcher
2. Запуск веб-сервера для обслуживания приложения, поставляемого в комплекте с Rollup
3. Избегать вмешательства в работу обслуживаемого Vite приложения (чтобы оба приложения могли работать одновременно).

1. Создание пользовательской конфигурации Vite для использования Rollup watcher

Ниже приведены минимальные настройки, позволяющие включить Rollup watcher, а также максимально ускорить его работу (благодаря этому посту на Reddit от @securisec).

// rollup.config.ts

export default defineConfig(config => {
  const { mode } = config

  return {
    // ... Rest of the configuration...

    build: {
      // Enable Rollup watcher @see https://vitejs.dev/config/#build-watch
      watch: {},

      // Opt for the fastest build
      target: 'esnext',
      minify: false,
      rollupOptions: { ...config.build.rollupOptions, treeshake: false },

      outDir: './dist-rollup/',
    },
  }
})

Обратите внимание, что поскольку конфигурация, специфичная для Rollup, находится внутри объекта build, мы должны запустить vite build для запуска Rollup. Ниже приведен сценарий, который я создал в нашем package.json

{
  "rollup:dev": "yarn vite build --config rollup.config.ts",
}

2. Запуск веб-сервера для обслуживания приложения из комплекта Rollup

Пожалуйста, помните, что включение Rollup watcher не означает запуск we-сервера, обслуживающего сгенерированные активы.

Здесь на помощь приходит Vite с его командой предварительного просмотра. По сути, нам нужно одновременно запустить vite build и vite preview.

Вот скрипты, которые я создал в нашем package.json

{
  "rollup:start": "yarn rollup:dev & yarn rollup:preview",
  "rollup:dev": "yarn vite build --config rollup.config.ts",
  "rollup:preview": "yarn vite preview --config rollup.config.ts",
}

rollup:start теперь является эталонным скриптом для запуска Rollup.

3. Избегание вмешательства в работу приложения served-by-Vite (чтобы оба приложения могли работать одновременно).

Чтобы достичь этого, мне нужно

1. Загрузить конфигурацию Vite и изменить минимальные настройки
2. Использовать другой порт предварительного просмотра

Затем я преобразовал файл vite.config.js, чтобы открыть генератор конфигурации

-export default defineConfig(config => {
+export default defineConfig(generateConfig)
+export function generateConfig(config) {

и rollup.config.ts теперь делает только следующее

import { generateConfig } from './vite.config'

export default defineConfig(({ mode }) => {
  const config: UserConfig = generateConfig({ mode })

  config.preview = {
    port: 5004,
  }

  config.build = {
    // Enable Rollup watcher @see https://vitejs.dev/config/#build-watch
    watch: {},

    // Opt for the fastest build
    target: 'esnext',
    minify: false,
    rollupOptions: { ...config.build.rollupOptions, treeshake: false },

    outDir: './dist-rollup/',
  }

  return config
})

Вот и все, теперь вы можете выбирать между Vite и Rollup в качестве инструмента разработки (или использовать оба одновременно). Наш файл package.json (мы используем одновременно и TSC) теперь имеет следующий вид

{
  "vite:start": "concurrently --names "VITE,TSC" -c "bgMagenta.bold,bgBlue.bold" "yarn vite:dev" "yarn ts:watch"",
  "vite:dev": "yarn vite",
  "vite:build": "vite build",
  "vite:build:preview": "vite preview",
  "vite:clearcache": "rimraf ./node_modules/.vite",
  "________________________________________________________________________________________": "",
  "rollup:start": "yarn rollup:dev & yarn rollup:preview",
  "rollup:dev": "yarn vite build --config rollup.config.ts",
  "rollup:preview": "yarn vite preview --config rollup.config.ts",
}

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Что такое порог? Когда вы начинаете получать преимущества от использования Rollup вместо Vite?
По моим эмпирическим наблюдениям, если вы перезагружаете одно и то же приложение более трех раз, Rollup начинает экономить ваше время.

Могу ли я одновременно использовать Vite и Rollup?
Да, они не являются взаимоисключающими, и, используя другой порт, вы можете получить доступ к обоим веб-приложениям.

Отключение Rollup sourcemap увеличит скорость?
Судя по моим бенчмаркам, нет. В любом случае, я отключил его в нашем основном приложении из-за ошибки «JS heap out of memory».

Как я могу перенести свое приложение на Vite?
Я поделился нашим опытом миграции в статье «Migrating a 150K LOC codebase to Vite and ESBuild».

Если вы следуете аналогичной схеме или у вас есть похожие решения, пожалуйста, напишите в комментариях свой отзыв.

p.s. вот ссылка на файл Excalidraw, использованный выше.