初识vite

前言：最近项目要从vue2.x迁移到vue3  
    
    
，于是借此机会打算重构整个项目    
    
   。在搭建项目的时候发现vue3更新了构建方式

     


     


   ，放弃了webpack 




 




 

，使用了新的构建机制vite   


     


     

。再经过一番了解后发现vite借助了esbuild与rollup



 




 




。

vite开发大致分两个阶段

开发阶段：

vite采用no-bundle的方式,借助现代浏览器支持了esmodule的能力  

   

   

，在开发阶段项目无需打包即可运行调试

     

     

  ，这让开发编译速度得到很大提升   

   

  。 生产阶段：

为了在生产环境中获得最佳的加载性能  




  




  
，不能完全 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/*"], }, "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工具

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

     


     


   ，而且每个人的观点和方法可能都存在差异
 



 



。因此文章中难免会有不严谨甚至不正确的地方 




 




 

，并且每个人的开发环境略有差别  

   

   

，可能会导致代码表现差异

     

     

  ，如有发现  




  




  
，欢迎大家指出来并多多交流               。