初识vite

前言：最近项目要从vue2.x迁移到vue3，于是借此机会打算重构整个项目。在搭建项目的时候发现vue3更新了构建方式，放弃了webpack，使用了新的构建机制vite。再经过一番了解后发现vite借助了esbuild与rollup。
vite开发大致分两个阶段
1. 开发阶段： vite采用no-bundle的方式,借助现代浏览器支持了esmodule的能力，在开发阶段项目无需打包即可运行调试，这让开发编译速度得到很大提升。
2. 生产阶段：
  
  为了在生产环境中获得最佳的加载性能，不能完全 no-bundle，且由于rollup 对于代码的 tree-shaking 和 ES6 模块有着算法优势上的支持，项目只需要打包出一个简单的bundle包，于是vite打包借助了rollup来用来实现代码分割、tree-shaking等操作，并且vite的插件机制是借鉴rollup来实现的。
esbuild的作用

依赖预构建，esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
加速文件编译,如webpack等以往的编译工具需要借助babel,tsc等工具编译代码，速度相对较慢，在利用esbuild后避免了terser、babel重复解析的问题，可以大大加快快速编译速度
代码压缩,vite统一采用esbuild,共用ast树只进行一次解析，解决了terser 和 babel 单独使用了ast造成的重复编译问题。

rollup的作用：

现代浏览器基本支持了esmodule，考虑到要在生产环境获得最佳的加载性能，vite在生产环境使用rollup来进行打包构建，由于vite的插件机制是借鉴rollup来实现的，使得rollup大部分插件可以直接在vite中使用，可以说是双向奔赴了

vite基本配置

当以命令行方式运行 vite 时，vite 会自动解析项目根目录下名为 vite.config.js 的文件。以下是基础的配置文件：

1. IDE智能提示

通过 IDE 和 jsdoc 的配合来实现智能提示

// vite.config.js

/** @type {import('vite').UserConfig} */

export default {

  // 一些自定义基础配置

}

使用工具函数 defineConfig

import { defineConfig } from 'vite';

export default defineConfig({

    // 一些自定义基础配置

})

2. 开发/生产环境情景配置

使用defineConfig工具函数并以箭头函数作为callback函数接收command, mode, ssrBuild来获取一些基本参数，用于区分环境亦或者是一个 SSR 构建（ssrBuild）

// vite.config.js

export default defineConfig(({ command, mode, ssrBuild }) => {

        if (command === 'serve') {
            return {
                // dev 独有配置
            }
        } else {
            // command === 'build' 
            return {
                // build 独有配置
            }
    }
})

3. 引入路径配置

路径配置可以自定义配置或者借助插件

自定义配置

// vite.config.js

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

假如你的项目使用 typescript 进行开发,则需要在 tsconfig.json 文件中配置paths，否则IDE引入路径飘红

// tsconfig.json

{
    "paths": {
       "@src/*": ["./src/*"],
       "@xxx/*": ["./xxx/*"], // 根据个人需要，配置其他路径
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"] // 编译对以下文件进行ts检测
    "exclude": ["dist", "node_modules"] // 编译排除以下文件ts检测
}

使用 vite-aliases 插件

默认别名示例：src -> @src; hooks -> @hooks,即使用@符号作为前缀

import { defineConfig } from 'vite';

import { ViteAliases } from 'vite-aliases';

export default defineConfig({
    plugins: [
       ViteAliases()
    ]
})

使用/引入路径示例：

import xxx from '@src/xxxx';

import xxx from '@hooks/xxxx';

4. CSS样式预处理

vite虽然内置了css预处理器,如需要按需引入则需要手动引入css工具

import { defineConfig } from 'vite';
export default defineConfig({
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import '/xxx/xx.scss;` // 引入全局变量文件
            }
        },
    }
})

5. 本地调试代理流量转发

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/, '')

            },
        }
    }
})

vite服务入口模版

vite默认引用外部index.html,在里面通过type="module"实现ES Module注入模版，如果需要调整则需要在 vite.config.js 添加root属性，也可以配置 build 属性（支持多入口）。

修改root

import { defineConfig } from 'vite';

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

多入口配置尝试

rollup打包并不允许相对路径的存在，多入口需要配置不同的npm scripts命令来进入不同的入口（即使这么做是没意义的），试着探索一下可行性，于是有了以下操作：

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. 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",
}

静态资源管理

vite对大多数静态资源类型进行了内置处理,也可以通过assetsInclude添加支持
静态资源体积 >= 4KB时会提取成单独的文件, < 4KB时则作为 base64 格式的字符串内联
通过build.assetsInlineLimit自定义配置
svg属于html类型文件，始终打包成文件
图片压缩,可借助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
                    }
                ]
            }
        })
   ],
})

后记

这是我第一次写关于vite的文章，由于个人水平有限，也是刚接触到vite，而且每个人的观点和方法可能都存在差异。因此文章中难免会有不严谨甚至不正确的地方，并且每个人的开发环境略有差别，可能会导致代码表现差异，如有发现，欢迎大家指出来并多多交流。

vite理解与配置