Vite 知识体系 | 青训营笔记

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

01.Vite是什么

为什么使用Vite

其它工具当下问题：

• 缓慢的启动->项目编译等待成本高
• 缓慢的热更新->修改代码后不能实时更新

瓶颈：bundle带来的性能开销、JavaScript语言的性能瓶颈（解释性、单线程）

Vite概览

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

• 两大组成部分：
  • No-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup的Bundler
• 核心特征：
  • 高性能，dev启动速度和热更新速度非常快！
  • 简单易用，开发者体验好

优势支持

• 浏览器原生ESM支持
  • script标签增加type="module"属性
  • 使用ESM模块导入导出语法
• 基于原生ESM的开发服务优势
  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存
• 基于Esbuild的编译性能优化， Esbuild--基于Golang开发的前端工具，具备如下能力：
  • 打包器Bundler
  • 编译器Transformer
  • 压缩器Minifier 性能极高，在Vite中被深度使用

02.Vite项目初始化构建

• 安装pnpm npm i -g pnpm
• 初始化命令 pnpm create vite
  • Project name：项目名称 -- eg:vite-project
  • Package name：包名称 -- eg:vite-project
  • Select a framework：框架选择 -- eg:React
  • Select a variant：选择变体 -- eg:React-ts
• 安装依赖 pnpm install
• 启动项目 npm run dev

03.Vite整体架构-关键技术

• 依赖预打包
  • 为什么要进行预打包
    • 避免node_modules过多的文件请求
    • 将CommonJS格式转换为ESM格式
  • 实现原理：
    • 服务器启动前扫描代码中用到的依赖
    • 用Esbuild对依赖代码进行预打包
    • 改写import语句，指定依赖为预构建产物路径
• 单文件编译 ，用Esbuild编译TS/JSX
  • 优势：编译速度提升10-100x
  • 局限性：不支持类型检查、不支持语法降级到ES5
• 代码压缩
  • Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
• 插件机制
  • 开发阶段->模拟Rollup插件机制
  • 生产环境->直接使用Rollup

参考引用

Vite 知识体系 .pptx