Параметры сборки

Если не указано иное, параметры, описанные в этом разделе, применяются только к сборке.

build.target

• Тип: string | string[]
• По умолчанию: 'modules'
• Связано: Совместимость с браузерами

Цель совместимости браузера для финального пакета. Значение по умолчанию — специальное значение Vite, 'modules', которое нацелено на браузеры с поддержкой встроенных ES-модулей, нативного динамического импорта ESM и поддержки import.meta. Vite заменит 'modules' на ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14'].

Другим специальным значением является 'esnext', которое предполагает встроенную поддержку динамического импорта и будет выполнять только минимальную транспиляцию.

Преобразование выполняется с помощью esbuild, и значение должно быть допустимой опцией цели esbuild. Пользовательские цели могут быть либо версией ES (например, es2015), браузером с версией (например, chrome58), либо массивом нескольких целевых строк.

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

build.modulePreload

• Тип: boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn }
• По умолчанию: { polyfill: true }

По умолчанию встраивается полифилл для предварительной загрузки модулей. Полифилл автоматически встраивается в прокси-модуль каждого входа index.html. Если сборка настроена на использование нестандартного HTML-входа через build.rollupOptions.input, то необходимо вручную импортировать полифилл в вашем пользовательском входе:

import 'vite/modulepreload-polyfill'

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

Полифилл можно отключить, установив { polyfill: false }.

Список чанков для предварительной загрузки для каждого динамического импорта вычисляется Vite. По умолчанию будет использоваться абсолютный путь, включая base, при загрузке этих зависимостей. Если base относительный ('' или './'), то в процессе выполнения используется import.meta.url, чтобы избежать абсолютных путей, зависящих от окончательной развёрнутой базы.

Существует экспериментальная поддержка тонкой настройки списка зависимостей и их путей с использованием функции resolveDependencies. Оставить отзыв. Ожидается, что это будет функция типа ResolveModulePreloadDependenciesFn:

type ResolveModulePreloadDependenciesFn = (
  url: string,
  deps: string[],
  context: {
    hostId: string
    hostType: 'html' | 'js'
  }
) => string[]

Функция resolveDependencies будет вызываться для каждого динамического импорта с списком чанков, от которых он зависит, а также будет вызываться для каждого чанка, импортированного в HTML-файлы входа. Можно вернуть новый массив зависимостей с отфильтрованными или добавленными зависимостями и изменёнными их путями. Пути deps относительны к build.outDir. Возвращаемое значение должно быть относительным путём к build.outDir.

/** @type {import('vite').UserConfig} */
const config = {
  // prettier-ignore
  build: {
// ---cut-before---
modulePreload: {
  resolveDependencies: (filename, deps, { hostId, hostType }) => {
    return deps.filter(condition)
  },
},
// ---cut-after---
  }
}

Пути разрешённых зависимостей можно дополнительно изменить с помощью experimental.renderBuiltUrl.

build.polyfillModulePreload

• Тип: boolean
• По умолчанию: true
• Устарело: используйте build.modulePreload.polyfill вместо этого

Определяет, следует ли автоматически встраивать полифилл для предварительной загрузки модулей.

build.outDir

• Тип: string
• По умолчанию: dist

Укажите выходной каталог (относительно корня проекта).

build.assetsDir

• Тип: string
• По умолчанию: assets

Укажите каталог для вложения сгенерированных ресурсов (относительно build.outDir). Это не используется в режиме библиотеки.

build.assetsInlineLimit

• Тип: number | ((filePath: string, content: Buffer) => boolean | undefined)
• По умолчанию: 4096 (4 КБ)

Импортированные или упомянутые ресурсы, которые меньше этого порога, будут встроены как base64 URL, чтобы избежать дополнительных HTTP-запросов. Установите значение 0, чтобы полностью отключить встраивание.

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

Заполнители Git LFS автоматически исключаются из встраивания, поскольку они не содержат содержимого файла, который они представляют.

Примечание

Если вы укажете build.lib, build.assetsInlineLimit будет проигнорирован, и ресурсы всегда будут встроены, независимо от размера файла или того, являются ли они заполнителем Git LFS.

build.cssCodeSplit

• Тип: boolean
• По умолчанию: true

Включить/отключить разделение кода CSS. При включении CSS, импортированный в асинхронные JS-чанки, будет сохранён как чанки и загружен вместе с загружаемым чанком.

Если отключено, весь CSS в проекте будет извлечён в один файл CSS.

Примечание

Если вы укажете build.lib, build.cssCodeSplit будет false по умолчанию.

build.cssTarget

• Тип: string | string[]
• По умолчанию: такой же, как и build.target

Эта опция позволяет пользователям установить другую целевую версию браузера для минификации CSS, отличную от той, которая используется для транспиляции JavaScript.

Её следует использовать только в случае, если вы нацеливаетесь на нестандартный браузер. Например, Android WeChat WebView поддерживает большинство современных функций JavaScript, но не поддерживает #RGBA шестнадцатеричную нотацию цвета в CSS. В этом случае вам нужно установить build.cssTarget на chrome61, чтобы предотвратить преобразование Vite цветов rgba() в шестнадцатеричные нотации #RGBA.

build.cssMinify

• Тип: boolean | 'esbuild' | 'lightningcss'
• По умолчанию: такой же, как и build.minify для клиента, 'esbuild' для SSR

Эта опция позволяет пользователям переопределить минификацию CSS, вместо того чтобы использовать значение по умолчанию build.minify, так что вы можете настраивать минификацию для JS и CSS отдельно. Vite по умолчанию использует esbuild для минификации CSS. Установите опцию в 'lightningcss', чтобы использовать Lightning CSS вместо этого. Если выбрано, это можно настроить с помощью css.lightningcss.

build.sourcemap

• Тип: boolean | 'inline' | 'hidden'
• По умолчанию: false

Генерировать исходные карты для продакшен-сборки. Если true, будет создан отдельный файл sourcemap. Если 'inline', sourcemap будет добавлен к результирующему выходному файлу в виде data URI. 'hidden' работает как true, за исключением того, что соответствующие комментарии sourcemap в собранных файлах подавляются.

build.rollupOptions

• Тип: RollupOptions

Напрямую настраивайте базовую сборку Rollup. Это то же самое, что и параметры, которые могут быть экспортированы из файла конфигурации Rollup, и они будут объединены с внутренними параметрами Rollup Vite. См. документацию по параметрам Rollup для получения дополнительных сведений.

build.commonjsOptions

• Тип: RollupCommonJSOptions

Опции, которые передаются в @rollup/plugin-commonjs.

build.dynamicImportVarsOptions

• Тип: RollupDynamicImportVarsOptions
• Связано: Динамический импорт

Опции, которые передаются в @rollup/plugin-dynamic-import-vars.

build.lib

• Тип: { entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string), cssFileName?: string }
• Связано: Режим библиотеки

Сборка в виде библиотеки. entry является обязательным, так как библиотека не может использовать HTML в качестве входа. name — это открытая глобальная переменная и обязательна, когда formats включает 'umd' или 'iife'. Значения по умолчанию для formats — ['es', 'umd'], или ['es', 'cjs'], если используются несколько входов.

fileName — это имя выходного файла пакета, значение по умолчанию для fileName — это опция name из package.json, его также можно определить как функцию, принимающую format и entryAlias в качестве аргументов, и возвращающая имя файла.

Если ваш пакет импортирует CSS, для указания имени выходного файла CSS можно использовать cssFileName. По умолчанию используется то же значение, что и fileName , если оно задано в виде строки, в противном случае оно также возвращается к "name" в package.json.

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: ['src/main.js'],
      fileName: (format, entryName) => `my-lib-${entryName}.${format}.js`,
      cssFileName: 'my-lib-style'
    }
  }
})

build.manifest

• Тип: boolean | string
• По умолчанию: false
• Связано: Интеграция с бэкендом

При установке в true сборка также сгенерирует файл .vite/manifest.json, который содержит отображение имён ресурсов без хешей на их хешированные версии, которые затем могут быть использованы серверным фреймворком для рендеринга правильных ссылок на ресурсы. Когда значение является строкой, оно будет использоваться как имя файла манифеста.

build.ssrManifest

• Тип: boolean | string
• По умолчанию: false
• Связано: Серверный рендеринг

При установке в true сборка также сгенерирует манифест SSR для определения ссылок на стили и директив предварительной загрузки ресурсов в продакшен-сборке. Когда значение является строкой, оно будет использоваться как имя файла манифеста.

build.ssr

• Тип: boolean | string
• По умолчанию: false
• Связано: Серверный рендеринг

Создать сборку, ориентированную на SSR. Значение может быть строкой для прямого указания входа SSR или true, что требует указания входа SSR через rollupOptions.input.

build.emitAssets

• Тип: boolean
• По умолчанию: false

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

build.ssrEmitAssets

• Тип: boolean
• По умолчанию: false

Во время сборки SSR статические ресурсы не выводятся, так как предполагается, что они будут выведены как часть клиентской сборки. Эта опция позволяет фреймворкам принудительно выводить их как в клиентской, так и в SSR сборке. Ответственность за объединение ресурсов лежит на фреймворке в процессе постобработки сборки. Этот параметр будет заменен на build.emitAssets, как только Environment API станет стабильным.

build.minify

• Тип: boolean | 'terser' | 'esbuild'
• По умолчанию: 'esbuild' для клиентской сборки, false для сборки SSR

Установите значение false, чтобы отключить минификацию, или укажите используемый минификатор. Значение по умолчанию — esbuild, который в 20 ~ 40 раз быстрее, чем terser, и только на 1 ~ 2% хуже по сжатию. Бенчмарки

Обратите внимание, что опция build.minify не минифицирует пробелы при использовании формата 'es' в режиме библиотеки, так как это удаляет аннотации pure и нарушает tree-shaking («встряхивание дерева»).

Terser должен быть установлен, когда он установлен в 'terser'.

npm add -D terser

build.terserOptions

• Тип: TerserOptions

Дополнительные опции минификации, которые передаются в Terser.

Кроме того, вы также можете передать опцию maxWorkers: number, чтобы указать максимальное количество рабочих процессов для создания. По умолчанию это количество ЦПУ минус 1.

build.write

• Тип: boolean
• По умолчанию: true

Установите значение false, чтобы отключить запись пакета на диск. Это в основном используется в программных вызовах build(), когда требуется дальнейшая постобработка пакета перед записью на диск.

build.emptyOutDir

• Тип: boolean
• По умолчанию: true, если outDir находится внутри root

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

build.copyPublicDir

• Тип: boolean
• По умолчанию: true

По умолчанию Vite будет копировать файлы из publicDir в outDir при сборке. Установите значение false, чтобы отключить эту функцию.

build.reportCompressedSize

• Тип: boolean
• По умолчанию: true

Включить/отключить отчёт о размере, сжатом с помощью gzip. Сжатие больших выходных файлов может быть медленным, поэтому отключение этой функции может увеличить производительность сборки для крупных проектов.

build.chunkSizeWarningLimit

• Тип: number
• По умолчанию: 500

Порог для предупреждений о размере чанка (в кБ). Он сравнивается с несжатыми размерами чанков, так как размер JavaScript сам по себе связан со временем выполнения.

build.watch

• Тип: WatcherOptions | null
• По умолчанию: null

Установите значение {}, чтобы включить наблюдатель Rollup. Это в основном используется в случаях, связанных с плагинами только для сборки или процессами интеграции.

Использование Vite в Windows Subsystem for Linux (WSL) 2

Существуют случаи, когда наблюдение за файловой системой не работает с WSL2. См. server.watch для получения дополнительных сведений.