Opções de Construção

build.target

• Tipo: string | string[]
• Predefinida como: 'modules'
• Relacionado ao: Compatibilidade de Navegador

Alvo da compatibilidade de navegador para o pacote final. O valor padrão é um valor especial de Vite, 'modules', que aponta navegadores com Módulos de ECMAScript nativo, importação dinâmica de Módulo de ECMAScript nativo, e suporte ao import.meta. A Vite substituirá 'modules' por ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']

Um outro valor especial é 'esnext' - que presume o suporte de importações dinâmicas nativa e traduzirá o código o menos possível:

• Se a opção build.minify for 'terser' e a versão de Terser instalada estiver abaixo de 5.16.0, 'esnext' será forçada até 'es2021'.
• Em outros casos, ele não realizará nenhuma tradução de código.

A transformação é realizada com esbuild e o valor deve ser uma opção target da esbuild válida. Os alvos personalizados pode ser tanto uma versão de ECMAScript (por exemplo, es2015), um navegador com aversão (por exemplo, chrome58), ou um vetor de várias sequências de caracteres de alvos.

Nota que a construção falhará se o código conter funcionalidades que não podem ser traduzidas com segurança pelo esbuild. Consulte a documentação do esbuild por mais detalhes.

build.modulePreload

• Tipo: boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn }
• Predefinida como: { polyfill: true }

Por padrão, um "polyfill" de pré-carregamento de módulo é automaticamente injetado. O "polyfill" é injetado automaticamente no módulo de delegação de cada entrada index.html. Se a construção for configurada para usar uma entrada personalizada de não HTML através de build.rollupOptions.input, então é necessário importar manualmente o "polyfill" na tua entrada personalizada:

import 'vite/modulepreload-polyfill'

Nota: o "polyfill" não aplica-se ao Modo de Biblioteca. Se precisares suportar os navegadores sem importação dinâmica nativa, deves provavelmente evitar usá-lo na tua biblioteca.

O "polyfill" pode ser desativado usando { polyfill: false }.

A lista de pedaços de pré-carregamento para cada importação dinâmica é calculada pela Vite. Por padrão, um caminho absoluto incluindo a base será usado quando carregamos estas dependências. Se a base for relativa ('' ou './'), import.meta.url é usado em tempo de execução para evitar caminhos absolutos que dependem da base desdobrada final.

Existe suporte experimental para o controlo refinado sobre a lista de dependências e seus caminhos usando a função resolveDependencies. Comente. Espera-se uma função de tipo ResolveModulePreloadDependenciesFn:

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

A função resolveDependencies será chamada para cada importação dinâmica com uma lista dos pedaços sobre os quais ele depende, e será também chamado para cada pedaço importado nos ficheiros de HTML entrada. Um novo vetor de dependências pode ser retornado com estes filtrados ou mais dependências injetadas, e seus caminhos modificados. Os caminhos de deps são relativos a build.outDir. O valor de retorno deve ser um caminho relativo à build.outDir.

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

Os caminhos de dependência resolvida podem ser ainda modificados usando experimental.renderBuiltUrl.

build.polyfillModulePreload

• Tipo: boolean
• Predefinida como: true
• Depreciado use build.modulePreload.polyfill

Caso precisares injetar automaticamente um "polyfill" de pré-carregamento de módulo.

build.outDir

• Tipo: string
• Predefinida como: dist

Especifica o diretório de saída (relativo à raiz do projeto).

build.assetsDir

• Tipo: string
• Predefinida como: assets

Especifica o diretório para encaixar os recursos gerados sob (relativo ao build.outDir. Isto não é usado no Modo de Biblioteca).

build.assetsInlineLimit

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

Recursos importados ou referenciados que são menores do que este limiar serão embutidos como URLs de base64 para evitar requisições de http adicionais. Defina para 0 para desativar completamente este processo de embutir.

Se uma função de resposta for passada, um valor booleano pode ser retornado para ativar ou desativar a opção. Se nada for retornado, aplica-se a lógica padrão.

Os seguradores de lugares do Sistema de Ficheiro Grande de Git são automaticamente excluídos do processo de embutir porque eles não contém o conteúdo do ficheiro que eles representam.

Nota

Se especificares build.lib, build.assetsInlineLimit será ignorado e os recursos serão sempre embutidos, independentemente do tamanho de ficheiro ou de ser um segurador de lugar de Sistema de Ficheiro Grande de Git (Git LFS, em Inglês).

build.cssCodeSplit

• Tipo: boolean
• Predefinida como: true

Ativa ou desativa a separação de código de CSS. Quando ativada, a CSS importada nos pedaços assíncronos serão preservados como pedaços e trazidos juntos quando o pedaço for requisitado.

Se desativada, todas CSS no projeto inteiro serão extraídas em um único ficheiro de CSS.

Nota

Se especificares build.lib, build.cssCodeSplit será false como padrão.

build.cssTarget

• Tipo: string | string[]
• Predefinida como: o mesmo que build.target

Esta opção permite os utilizadores definir um alvo de navegador diferente para a minificação de CSS daquela usada para a tradução de código de JavaScript.

Ela deve apenas ser usada quando estiveres mirando um navegador fora dos padrão. Um exemplo é o Android WeChat WebView, que suporta a maior parte das funcionalidades de JavaScript moderno mais não a notação de cor hexadecimal #RGBA em CSS. Nestes casos, precisas definir build.cssTarget para chrome61 para impedir a Vite de transformar as cores rgba() em notações hexadecimal #RGBA.

build.cssMinify

• Tipo:
• Predefinida como: o mesmo que build.minify para o cliente, 'esbuild' para interpretação do lado do servidor.

Esta opção permite os utilizadores sobrepor a especificamente a minificação de CSS no lugar de padronizar para build.minify, assim podes configurar a minificação para código de JavaScript e CSS separadamente. A Vite usa a esbuild por padrão para minificar a CSS. Defina a opção para 'lightningcss' para usar a CSS relâmpago. Caso selecionada, pode ser configurada usando css.lightningcss.

build.sourcemap

• Tipo: boolean | 'inline' | 'hidden'
• Predefinida como: false

Gera os mapas da fonte de produção. Se for true, um ficheiro de mapa de fonte separado será criado. Se for 'inline', o mapa de fonte será anexado ao ficheiro de saída resultante como uma URI de dados. O 'hidden' funciona de maneira parecida que true exceto que os comentários de mapa de fonte correspondente nos ficheiros empacotadas são suprimidos.

build.rollupOptions

• Tipo: RollupOptions

Personaliza diretamente o pacote de Rollup subjacente. Isto é o mesmo que as opções que podem ser exportadas a partir de um ficheiro de configuração de Rollup e serão combinados com as opções internas da Vite. Consulte a documentação das opções de Rollup para mais detalhes.

build.commonjsOptions

• Tipo: RollupCommonJSOptions

Opções para passar ao @rollup/plugin-commonjs.

build.dynamicImportVarsOptions

• Tipo: RollupDynamicImportVarsOptions
• Relacionado ao: Importação Dinâmica

Opções para passar ao @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 ao: Modo de Biblioteca

Constrói como uma biblioteca. entry é obrigatório visto que a biblioteca não pode usar a HTML como entrada. name é a variável global exposta e é obrigatória quando formats inclui 'umd' ou 'iife'. Os valores predefinidos de formats são ['es', 'umd']. fileName é o nome da saída de ficheiro do pacote, o valor predefinido de fileName é a opção de nome do package.json, ele também pode ser definido como função recebendo o format e entryName como argumentos.

build.manifest

• Tipo: boolean | string
• Predefinida como: false
• Relacionado ao: Integração de Backend

Quando definido para true, a construção também gerará um ficheiro .vite/manifest.json que contém um mapeamento de nomes de ficheiros de recurso não embaralhado para as suas versões embaralhadas, as quais podem então ser usadas por uma abstração de servidor para interpretar as ligações de recurso correta. Quando o valor é uma sequência de caracteres, será usada como nome do ficheiro de manifesto.

build.ssrManifest

• Tipo: boolean | string
• Predefinida como: false
• Relacionado ao: Interpretação no Lado do Servidor

Quando definido para true, a construção também gerará um manifesto de SSR para a determinação de ligações de estilo e diretivas de pré-carregamento de recurso em produção. Quando o valor for uma sequência de caracteres, será usada como nome do ficheiro de manifesto.

build.ssr

• Tipo: boolean | string
• Predefinida como: false
• Relacionado ao: Interpretação no Lado do Servidor

Produz a construção orientada pela SSR. O valor pode ser uma sequência de caracteres para diretamente especificar a entrada da SSR, ou true, o qual exige a especificação da entrada de SSR através de rollupOptions.input.

build.emitAssets

• Tipo: boolean
• Predefinida como: false

Durante as construções sem cliente, os recursos ou ativos estáticos não são emitidos, uma vez que se assume que seriam emitidos como parte da construção do cliente. Esta opção permite que as abstrações forcem a sua emissão noutros ambientes de construção. É da responsabilidade da abstração fundir os recursos estáticos com uma etapa pós-construção.

build.ssrEmitAssets

• Tipo: boolean
• Predefinida como: false

Durante a construção do lado do servidor, os recursos estáticos não são emitidos, uma vez que se assume que seriam emitidos como parte da construção do cliente. Esta opção permite a abstração forçar a emissão deles em ambas construções do cliente e do servidor. É responsabilidade da abstração combinar os recursos com uma etapa pós-construção. Esta opção será substituída por build.emitAssets quando a interface de programação de aplicação de ambiente estiver estável.

build.minify

• Tipo: boolean | 'terser' | 'esbuild'
• Predefinida como: 'esbuild' para construção do cliente, false para construção da interpretação do lado do servidor

Define para false para desativar a minificação, ou especifique o minificador a usar. O padrão é esbuild o qual é 20 ~ 40x mais rápido do que o terser e apenas 1 ~ 2% pior em compressão. Pontos de Referências.

Nota que a opção build.minify não minifica espaços em branco quando usamos o formato 'es' no modo de biblioteca, porque remove as anotações puras e quebra a sacudidura de árvore.

Terser deve ser instalado quando estiver definido para 'terser'.

npm add -D terser

build.terserOptions

• Tipo: TerserOptions

Opções de minificação adicionais para passar ao Terser.

Além disto, também podemos passar uma opção maxWorkers: number para especificar o número máximo de operários à gerar. Predefine para o número de CPUs menos 1.

build.write

• Tipo: boolean
• Predefinida como: true

Defina para false para desativar a escrita do pacote no disco. Isto é na maior parte das vezes usada nas chamadas de build() programáticas onde mais adiante o processamento posterior do pacote é necessário antes da escrita em disco.

build.emptyOutDir

• Tipo: boolean
• Predefinida como: true se outDir estiver dentro do root

Por padrão, a Vite esvaziará o outDir na construção se estiver dentro da raiz do projeto. Ele emitirá um aviso se outDir está fora da raiz para evitar remover acidentalmente ficheiros importantes. Tu podes definir explicitamente esta opção para suprimir o aviso. Isto também está disponível através da linha de comando como --emptyOutDir.

build.copyPublicDir

• Tipo: boolean
• Predefinida como: true

Por padrão, Vite copiará os ficheiros da publicDir para a outDir na construção. Defina para false para desativar isto.

build.reportCompressedSize

• Tipo: boolean
• Predefinida como: true

Ativa e desativa a reportagem do tamanho compactado em GZip. A compactação de ficheiros de saída grande pode ser lento, assim a desativação disto pode aumentar o desempenho da construção para projetos grandes.

build.chunkSizeWarningLimit

• Tipo: number
• Predefinida como: 500

Limite para avisos do tamanho do pedaço (em kB). É comparada contra o tamanho do pedaço não compactado visto que o próprio tamanho da JavaScript está relacionado ao tempo de execução.

build.watch

• Tipo: WatcherOptions| null
• Predefinida como: null

Defina para {} para ativar o observador de Rollup. Isto é na maior parte das vezes usado nos casos que envolve extensões de apenas construção ou processos de integrações.

Usando a Vite no Subsistema de Windows para Linux (WSL, sigla em Inglês) 2

Há casos que o sistema de ficheiro observando não funciona com WSL2. Consulte server.watch para mais detalhes.