Vite 知识体系

这是我参与「第六届青训营」笔记创作活动的第2天

玩一玩新一代更快更强打包工具

1 什么是Vite

定位: 新一代前端构建工具

两大组成部分:

1. No一bundle开发服务．源文件无需打包

2. 生产环境基于 Rollup 的 Bundler

核心特征：

1. 高性能, dev启动速度和热更新速度非常快

2. 简单易用，开发者体验好

基于原生ESM的开发服务优势

• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

基于Esbuild的编译性能优化

Esbuild — 基于Golang开发的前端工具, 具备如下能力:

1. 打包器Bundler

2. 编译器Transformer

3. 压缩器Minifier

性能极高，在 Vite 中被深度使用

2 Vite使用

建议使用pnpm来进行依赖管理，提高依赖的安装速度和避免多次安装相同的依赖占用空间

1. 提前安装pnpm

 npm i -g pnpm

2. 初始化命令

 pnpm create vite

3. 安装依赖

 pnpm install

4. 启动项目

npm run dev

5. 初始化项目

生产环境Tree Shaking

优化原理:

1.基于ESM的import/export语句依赖关系，与运行时状态无关

2.在构建阶段将未使用到的代码进行删除

3.Tree Shaking在Vite中无需配置,默认开启!

3 整体架构

预打包

为什么要进行预打包：

1. 避免 node_modules 过多的文件请求

2. 将 CommonJS 格式转换为 ESM 格式

实现原理:

1. 服务启动前扫描代码中用到的依赖

2. 用 Esbuild 对依赖代码进行预打包

3. 改写 import 语句,指定依赖为预构建产物路径

4 Vite插件

开发阶段

插件示例

1、开发Vite插件

const fileRegex = /.(my-file-ext)$ /
export default function myPlugin (){
  return {
    name: 'transform-file',
    transform (src, id){
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null //如果可行将提供source map
        }
      }
    }
  }
}

2. 配置文件引入插件

// vite.config.js
import plugin from './myPlugin'
export default defineConfig ({
  plugins:[plugin()]
})

参考资料：

1. 功能 | Vite 官方中文文档 (vitejs.dev)
2. Vite 基本概要 - 掘金 (juejin.cn)
3. Vite 上手实战与架构解析 - 掘金 (juejin.cn)