Vite知识体系构建 | 青训营笔记

Vite知识体系构建 | 青训营笔记

这是我参与【第四届青训营】笔记创作活动的第11天

一、构建工具的意义

• 模块化方案
  • 提供模块加载方案
  • 兼容不同模块规范
• 语法转译
  • 高级语法转译，如Sass、TypeScript
  • 资源加载，如图片、字体、worker
• 产物质量
  • 产物压缩、无用代码删除
  • 语法降级
• 开发效率
  • 热更新

二、Vite概要

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

两大组成部分：

1.No-bundle开发服务，源文件无需打包

2.生产环境基于Rollup的Bundler

核心特征

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

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

当下问题

缓慢的启动 -> 项目编译等待成本高

缓慢的热更新 -> 修改代码后不能实时更新

两大行业趋势

ESM

• 全球浏览器对原生ESM的普遍支持

两大要素：

1.script标签增加type=“module"属性

2.使用ESM模块导入导出语法

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

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

ESbuild

• 基于原生语言（Go、Rust）编写前端编译工具链
• 如Go语言编写的Esbuild、Rust编写的SWC

基于Esbuild的编译性能优化

三、Vite使用

项目初始化

# 提前安装pnpm
npm i -g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev

使用Sass/Scss & CSS Modules

使用静态资源

除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持

参考资料：cn.vitejs.dev/guide/featu…

使用HMR和Tree-shaking

• Tree-shaking优化原理:

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

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

• Tree Shaking在Vite中无需配置,默认开启

• CommonJS 格式不能做到 Tree Shaking，require的部分可能依赖运行时计算的结果

四、Vite整体架构

预打包的作用：

• 避免node_modules过多的文件请求
• 将CommonJS格式转换为ESM格式

实现原理：

• 服务启动前扫描代码中用到的依赖
• 用Esbuild对依赖代码进行预打包
• 改写import语句，指定依赖为预构建产物路径

单文件编译

用Esbuild编译TS/JSX

优势：编译速度提升10-100x

局限性： 不支持类型检查

不支持语法降级到ES5

代码压缩

Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

插件机制