Opciones para build

build.target

• Tipo: string | string[]
• Por defecto: 'modules'
• Relacionado: Compatibilidad de navegadores

El objetivo de compatibilidad del navegador para el paquete final. El valor predeterminado es un valor especial de Vite, 'modules', que apunta a navegadores con soporte de módulos ES nativo, soporte de importación ESM nativo y soporte para import.meta. Vite reemplazará 'modules' con ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']

Otro valor especial es 'esnext', el cual asume el soporte nativo de importaciones dinámicas y transpilará lo menos posible:

• Si la opción build.minify es 'terser' y la versión de Terser instalada es inferior a la 5.16.0, 'esnext' se verá obligado a bajar a 'es2021'.
• En otros casos, no realizará ninguna transpilación.

La transformación se realiza con esbuild y el valor debe ser una opción de destino de esbuild válida. Los objetivos personalizados pueden ser una versión ES (por ejemplo, es2015), un navegador con versión (por ejemplo, chrome58) o un array de varias cadenas de destino.

Ten en cuenta que la compilación fallará si el código contiene funciones que esbuild no puede transpilar de manera segura. Consulta la documentación de esbuild para obtener más detalles.

build.modulePreload

• Tipo: boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn }
• Por defecto: { polyfill: true }

Por defecto, se inyecta automáticamente un polyfill de precarga de módulo. El polyfill se inyecta automáticamente en el módulo proxy de cada archivo de entrada index.html. Si la compilación está configurada para usar una entrada personalizada que no sea HTML a través de build.rollupOptions.input, entonces es necesario importar manualmente el polyfill en la entrada personalizada:

import 'vite/modulepreload-polyfill'

Nota: el polyfill no se aplica al Modo Librería. Si necesitas que se soporten navegadores sin importación dinámica nativa, probablemente deberías evitar usarlo en tu librería.

El polyfill se puede deshabilitar usando { polyfill: false }.

Vite calcula la lista de fragmentos a precargar para cada importación dinámica. De forma predeterminada, se utilizará una ruta absoluta que incluya la base al cargar estas dependencias. Si la base es relativa ('' o './''), se usa import.meta.url en tiempo de ejecución para evitar rutas absolutas que dependen de la base final implementada.

Existe soporte experimental para un control detallado sobre la lista de dependencias y sus rutas usando la función resolveDependencies. Hacer Comentarios. Esto espera una función de tipo ResolveModulePreloadDependenciesFn:

type ResolveModulePreloadDependenciesFn = (
  url: string,
  deps: string[],
  context: {
    importer: string
  },
) => string[]

Se llamará a la función resolveDependencies para cada importación dinámica con una lista de los fragmentos de los que depende, y también se llamará para cada fragmento importado en los archivos de entrada HTML. Se puede devolver un nuevo array de dependencias con estas dependencias filtradas, u otras más inyectadas, y sus rutas modificadas. Las rutas de deps son relativas a build.outDir. Se permite tambien retornar una ruta relativa al hostId para hostType === 'js', en cuyo caso se usa new URL(dep, import.meta.url) para obtener una ruta absoluta al inyectar la precarga de este módulo en el encabezado HTML.

modulePreload: {
  resolveDependencies: (filename, deps, { hostId, hostType }) => {
    return deps.filter(condition)
  },
},

Las rutas de dependencia resueltas se pueden modificar aún más usando experimental.renderBuiltUrl

build.polyfillModulePreload

• Tipo: boolean
• Por defecto: true
• Obsoleto usa build.modulePreload.polyfill en su lugar

Permite inyectar automáticamente un polyfill de precarga de módulo.

build.outDir

• Tipo: string
• Por defecto: dist

Especifica el directorio de salida (relativo a raíz del proyecto).

build.assetsDir

• Tipo: string
• Por defecto: assets

Especifica el directorio en el que se alojarán los recursos generados (en relación con build.outDir). Esto no se usa en el modo librería.

build.assetsInlineLimit

• Tipo: number | ((filePath: string, content: Buffer) => boolean | undefined)
• Por defecto: 4096 (4KiB)

Los recursos importados o a los que se hace referencia que son más pequeños que este umbral se insertarán como URL base64 para evitar solicitudes http adicionales. Configurar en 0 para deshabilitar la inserción por completo.

Si se pasa un callback, se puede devolver un valor booleano para optar por usarlo o no. Si no se devuelve nada, se aplica la lógica predeterminada.

Los marcadores de posición de Git LFS se excluyen automáticamente de la inserción porque no contienen el contenido del archivo que representan.

Nota

Si especificas build.lib, build.assetsInlineLimit se ignorará y los recursos siempre serán insertados, independientemente del tamaño del archivo o de ser un marcador de posición Git LFS.

build.cssCodeSplit

• Tipo: boolean
• Por defecto: true

Habilita/deshabilita la división de código CSS. Cuando está habilitado, el CSS importado en fragmentos de Javascript asíncronos se incluirá en el fragmento asíncrono mismo y se insertará cuando se haya cargado.

Si está deshabilitado, todo el CSS de todo el proyecto se extraerá en un único archivo CSS.

Nota

Si especificas build.lib, build.cssCodeSplit será false por defecto.

build.cssTarget

• Tipo: string | string[]
• Por defecto: Igual que build.target

Esta opción permite a los usuarios configurar un destino de navegador diferente para la minificación de CSS del que se usa normalmente para la transpilación de JavaScript.

Solo debe usarse cuando se dirige a un navegador no convencional. Un ejemplo es WeChat WebView de Android, que es compatible con la mayoría de las funciones modernas de JavaScript, pero no con la notación de color hexadecimal #RGBA en CSS. En este caso, debes configurar build.cssTarget en chrome61 para evitar que vite transforme los colores rgba() en notaciones hexadecimales #RGBA.

build.cssMinify

• Tipo: boolean | 'esbuild' | 'lightningcss'
• Por defecto: lo mismo que build.minify

Esta opción permite a los usuarios configurar la minificación de CSS específicamente en vez de usar por defecto build.minify, así se podrá trabajar la minificación para JS y CSS por separado. Vite usa esbuild por defecto para minimizar CSS. Establece la opción ' 'lightningcss' para usar Lightning CSS en su lugar. Si se selecciona, se puede configurar utilizando css.lightningcss.

build.sourcemap

• Tipo: boolean | 'inline' | 'hidden'
• Por defecto: false

Genera mapas de fuentes de producción. Si es true, se creará un archivo de mapa fuente independiente. Si es 'inline', el mapa fuente se agregará al archivo de salida resultante como un URI de datos. 'hidden' funciona como true excepto que se suprimen los comentarios del mapa fuente correspondiente en los archivos incluidos.

build.rollupOptions

• Tipo: RollupOptions

Personaliza directamente el paquete Rollup relacionado. Esto es lo mismo que las opciones que se pueden exportar desde un archivo de configuración de Rollup y se fusionarán con las opciones de Rollup internas de Vite. Consulta la documentación de opciones de Rollup para obtener más detalles.

build.commonjsOptions

• Tipo: RollupCommonJSOptions

Opciones para @rollup/plugin-commonjs.

build.dynamicImportVarsOptions

• Tipo: RollupDynamicImportVarsOptions
• Relacionado: Importado dinámico

Opciones para @rollup/plugin-dynamic-import-vars.

build.lib

• Tipo: { entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string) }
• Relacionado: Modo Librería

Compilar como una librería. Se requiere entry ya que la librería no puede usar HTML como archivo de entrada. name es la variable global expuesta y se requiere cuando formats incluye 'umd' o 'iife'. Por defecto formats es ['es', 'umd'], o ['es', 'cjs'], si se usan multiples archivos de entrada. fileName es el nombre de la salida del archivo del paquete, por defecto fileName es la opción de nombre del package.json, también se puede definir como una función que toma el format y entryAlias como argumentos.

build.manifest

• Tipo: boolean
• Por defecto: false
• Relacionado: Integración del backend

Cuando se coloca en true, la compilación también generará un archivo .vite/manifest.json que contiene una asignación de nombres de archivo de recursos sin hash a sus versiones hash, que luego puede ser utilizado por un marco de trabajo orientado a servidor para representar los enlaces de recursos correctos.

build.ssrManifest

• Tipo: boolean
• Por defecto: false
• Relacionado: Server-Side Rendering

Cuando se coloca en true, la compilación también generará un manifiesto SSR para determinar los enlaces de estilo y las directivas de precarga de recursos en producción.

build.ssr

• Tipo: boolean | string
• Por defecto: false
• Relacionado: Server-Side Rendering

Produce la compilación orientada a SSR. El valor puede ser una cadena para especificar directamente la entrada SSR, o true, que requiere especificar la entrada SSR a través de rollupOptions.input.

build.ssrEmitAssets

• Tipo: boolean
• Por defecto: false

Durante la compilación de SSR, los recursos estáticos no se emiten, ya que se supone que se emitirán como parte de la compilación del cliente. Esta opción permite que los frameworks fuercen su emisión tanto en el cliente como en la compilación SSR. Es responsabilidad del framework fusionar los recursos con un paso posterior a la compilación.

build.minify

• Tipo: boolean | 'terser' | 'esbuild'
• Por defecto: 'esbuild' para la compilación del cliente, false para el servidor de compilación SSR.

Configurar en false para deshabilitar la minificación, o especificar el minificador que se usará. El valor predeterminado es esbuild, que es 20 ~ 40 veces más rápido que terser y solo 1 ~ 2 % peor en compresión. Pruebas de rendimiento

Ten en cuenta que la opción build.minify no minimiza los espacios en blanco cuando se usa el formato 'es' en el modo librería, ya que elimina las anotaciones puras y rompe el tree-shaking.

Se debe instalar Terser cuando se configura como 'terser'.

npm add -D terser

build.terserOptions

• Tipo: TerserOptions

Opciones de minimización adicionales para pasar a Terser.

Además, también puedes pasar una opción maxWorkers: number para especificar el número máximo de workers que se generarán. El valor predeterminado es el número de CPU menos 1.

build.write

• Tipo: boolean
• Por defecto: true

Configurar en false para deshabilitar la escritura del paquete en el disco. Esto se usa principalmente en llamadas build() programáticas donde se necesita más procesamiento posterior del paquete antes de escribir en el disco.

build.emptyOutDir

• Tipo: boolean
• Por defecto: true si outDir está en root

De forma predeterminada, Vite vaciará outDir en la compilación si está dentro de la raíz del proyecto. Emitirá una advertencia si outDir está fuera de la raíz para evitar la eliminación accidental de archivos importantes. Puedes establecer explícitamente esta opción para suprimir la advertencia. Esto también está disponible a través de la línea de comandos como --emptyOutDir.

build.copyPublicDir

• Experimental Hacer Comentarios
• Tipo: boolean
• Por defecto: true

Por defecto, Vite copiará los archivos que están en publicDir dentro de outDir en la compilación. Configurar false para deshabilitar este comportamiento.

build.reportCompressedSize

• Tipo: boolean
• Por defecto: true

Habilita/deshabilita los informes de tamaño comprimido con gzip. La compresión de archivos de salida grandes puede ser lenta, por lo que deshabilitarla puede aumentar el rendimiento de la compilación para proyectos grandes.

build.chunkSizeWarningLimit

• Tipo: number
• Por defecto: 500

Límite para advertencias de tamaño de fragmento (en kB). Se compara con el tamaño del fragmento sin comprimir, ya que el tamaño de JavaScript en sí está relacionado con el tiempo de ejecución.

build.watch

• Tipo: WatcherOptions| null
• Por defecto: null

Configurar en {} para habilitar el observador de Rollup. Esto se usa principalmente en casos que involucran complementos de solo compilación o procesos de integración.

Uso de Vite en el Subsistema de Windows para Linux (WSL) 2

Hay casos en los que la observación del sistema de archivos no funciona con WSL2. Ver server.watch para más detalles.