Vite pela primeira vez

Prefácio: Recentemente, o projeto será migrado de vue2.x para vue3, então aproveitarei esta oportunidade para refatorar todo o projeto. Ao construir o projeto, descobri que o vue3 atualizou o método de construção, abandonou o webpack e usou o novo mecanismo de construção vite. Após algum entendimento, descobri que o vite usa esbuild e rollup.
O desenvolvimento do vite é dividido em duas etapas
1. Estágio de desenvolvimento:
  o vite adota o método no-bundle. Com a ajuda de navegadores modernos, suporta a capacidade do esmodule. No estágio de desenvolvimento, o projeto pode ser executado e depurado sem empacotamento, o que melhora muito a velocidade de desenvolvimento e compilação.
2. Fase de produção:
  Para obter o melhor desempenho de carregamento no ambiente de produção, não pode ser completamente sem pacote e, como o rollup possui suporte algorítmico para trepidação de árvores e módulos ES6 do código, o projeto precisa apenas empacotar um pacote simples package , então o empacotamento do vite usa rollup para implementar divisão de código, tree-shaking e outras operações, e o mecanismo de plug-in do vite é implementado referindo-se ao rollup.
O papel de esbuild
1. Pré-compilação de dependência, o esbuild é escrito em Go e é 10-100x mais rápido do que as dependências de pré-compilação do bundler escritas em JavaScript.
2. Acelerar a compilação de arquivos, como webpack e outras ferramentas de compilação anteriores, precisam usar babel, tsc e outras ferramentas para compilar código, a velocidade é relativamente lenta, depois de usar esbuild, o problema de análise repetida por terser e babel pode ser evitado e o velocidade de compilação rápida pode ser bastante acelerada
3. Compressão de código, vite usa uniformemente esbuild, e a árvore ast compartilhada é analisada apenas uma vez, o que resolve o problema de compilação repetida causada por terser e babel usando apenas ast.
O papel do rollup:

Os navegadores modernos suportam basicamente o esmodule. Para obter o melhor desempenho de carregamento no ambiente de produção, o vite usa rollup para empacotamento e construção no ambiente de produção. Como o mecanismo de plug-in do vite é implementado referindo-se ao rollup, a maioria dos -ins de rollup pode ser usado diretamente no convite pode ser considerado uma viagem de ida e volta

configuração vitebasic

Ao executar o vite no modo de linha de comando, o vite analisará automaticamente o arquivo chamado vite.config.js no diretório raiz do projeto. O seguinte é o arquivo de configuração básica:

1. Prompt inteligente de IDE

Através da cooperação de IDE e jsdoc para realizar prompt inteligente

// vite.config.js
/** @type {import('vite').UserConfig} */  
export default {  
    // 一些自定义基础配置  
}

Use a função utilitária defineConfig

import { defineConfig } from 'vite';  
export default defineConfig({
    // 一些自定义基础配置
})

2. Configuração do cenário do ambiente de desenvolvimento/produção

Use a função da ferramenta defineConfig e use a função de seta como a função de retorno de chamada para receber o comando, modo, ssrBuild para obter alguns parâmetros básicos, que são usados para distinguir o ambiente ou uma compilação SSR (ssrBuild)

// vite.config.js 

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

3. Importar configuração de caminho

A configuração do caminho pode ser personalizada ou com a ajuda de plug-ins

configuração personalizada

// vite.config.js

import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
    resolve: {
        alias: {
        '@': path.resolve(__dirname, './src') // 路径别名
        }
    }
})

Se o seu projeto usa typescript para desenvolvimento, você precisa configurar os caminhos no arquivo tsconfig.json, caso contrário, o caminho de importação do IDE ficará vermelho

// tsconfig.json
{
    "paths": {
        "@src/*": ["./src/*"],
        },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"] // 编译对以下文件进行ts检测
    "exclude": ["dist", "node_modules"] // 编译排除以下文件ts检测
}

Use o plugin vite-aliases
Exemplo de alias padrão: src -> @src; hooks -> @hooks, ou seja, use o símbolo @ como prefixo
```
import { defineConfig } from 'vite';
import { ViteAliases } from 'vite-aliases';

export default defineConfig({
    plugins: [
        ViteAliases()
    ]
})
```
Exemplo de uso/importação de caminhos:

importar xxx de '@src/xxxx';
importar xxx de '@hooks/xxxx';

4. Pré-processamento de estilo CSS

Embora o vite tenha um pré-processador css embutido, se você precisar importá-lo sob demanda, precisará importar manualmente as ferramentas css

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/xxx/xx.scss;` // 引入全局变量文件
      }
    },
  },

5. Encaminhamento de tráfego de proxy de depuração local

export default defineConfig({
    server: {
        host: true, // 对所有地址进行监听
        proxy: {
            // 字符串 
            '/foo': 'http://localhost:8080',  

            // 选项写法
            '/api': {
                target: 'http://xxxx.xxxx.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },  

            // 正则表达式写法  
            '^/fallback/.*': {
                target: 'http://xxxx.xxxx.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/fallback/, '')
            },
        }
    }，
  },
})

modelo de entrada de serviço vite

O Vite faz referência ao index.html externo por padrão e implementa o modelo de injeção do Módulo ES por meio de type="module". o atributo build (suporta várias entradas).

modificar raiz

import { defineConfig } from 'vite';
export default defineConfig({
    root: 'src/packages/index/', // 模版路径
})

Tentativa de configuração de várias entradas

O empacotamento cumulativo não permite a existência de caminhos relativos. Várias entradas precisam configurar diferentes comandos de scripts npm para inserir entradas diferentes (mesmo que seja sem sentido fazer isso), tente explorar a viabilidade, portanto, as seguintes operações:

1. vite.config.js

import { defineConfig } from 'vite';
export default defineConfig({
    build: {
        rollupOptions: {
            input: {
                mono1: path.resolve(__dirname, 'src/packages/template1/index.html'),
                mono2: path.resolve(__dirname, 'src/packages/template2/index.html'),
            },
        },
    },
})

2. configuração do script de inicialização package.json

// package.json

"scripts": {
    "mono1": "vite serve src/packages/template1/ --config ./vite.config.ts",
    "mono2": "vite serve src/packages/template2/ --config ./vite.config.ts",
}

gerenciamento de recursos estáticos

O Vite possui processamento integrado para a maioria dos tipos de recursos estáticos e, se houver algum sem suporte, adicione suporte por meio de assetsInclude.
Volume de recurso estático >= 4 KB será extraído em um arquivo separado e < 4 KB será embutido como uma string no formato base64
Configuração personalizada via build.assetsInlineLimit
svg é um arquivo do tipo html e é sempre empacotado em um arquivo
Compressão de imagem, você pode usar o plug-in vite-plugin-imagemin

import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
    plugins: [
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 20
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox'
            },
            {
              name: 'removeEmptyAttrs',
              active: false
            }
          ]
        }
      })
    ],
})

pós-escrito

Esta é a primeira vez que escrevo um artigo sobre o vite.Devido ao meu nível pessoal limitado, acabei de entrar em contato com o vite, e as opiniões e métodos de todos podem ser diferentes. Portanto, é inevitável que haja partes imprecisas ou mesmo incorretas no artigo, e o ambiente de desenvolvimento de todos seja um pouco diferente, o que pode levar a diferenças no desempenho do código. Se você encontrar algum, fique à vontade para apontar e comunicar mais .

Vite compreensão e configuração