“Vite知识体系”学习笔记｜青训营

讲师：杨兴元

01. 浅谈构建工具————为什么需要构建工具？

前端工程的痛点：

• 模块化：ESM、CommonJS、UMD
• 资源编译：高级语法的编译
• 产物质量：代码体积、代码性能
• 开发效率：热更新
• 核心要素：资源(e.g. JS, TS, JSX, CSS, SCSS, LESS, PNG, JPEG, WEBP, etc.)

前端构建工具的意义：

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

02. Vite是什么？为什么要用Vite？

Vite概览

• 定位：新一代前端构建工具
• 两大组成部分：
  • No-Bundle开发服务，源文件无需打包
  • 生产环境基于rollup的bundle
• 核心特征：
  • 高性能，dev启动速度和热更新速度非常快
  • 简单易用，开发者体验好
• 业界案例：rollup to vite，webpack to vite

当下问题

• 缓慢的启动 -> 项目编译等待成本高
• 缓慢的热更新 -> 修改代码后不能实时更新
• 瓶颈：
  • bundle带来的性能开销
  • javascript语言的性能瓶颈

两大行业趋势

• 全球浏览器对原生ESM的普遍支持（目前占比92%以上）
• 基于原生语言（Go，Rust）编写前端编译工具链，如Go语言编写的Esbuild，Rust编写的SWC

03. Vite上手使用

• 项目初始化
  • 输入初始参数
  • 启动完成后，打开浏览器访问对应地址即可
• 使用Sass/Scss & CSS Modules
  • 引入header组件
• 使用静态资源
  • 目录结构
  • 以svg图片为例（见课件视频）
  • 除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持
• 使用HMR
  • 无需额外配置，自动开启
• 生产环境Tree Shaking
  • 优化原理：
    • 基于ESM的import/export语句依赖关系，与运营时状态无关
    • 在构建阶段将未使用到的代码进行删除
  • Tree Shaking在Vite中无需配置，默认开启

04. Vite整体架构

关键技术：

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

05. Vite进阶路线

深入双引擎 ——— esbuild & rollup.js

推荐学习顺序：

• 先了解基本使用，动手尝试各项常用配置
• 然后学习其插件开发

为什么需要插件机制？

• 抽离核心逻辑
• 易于扩展

Vite插件开发

1. 服务启动阶段：config -> configResolved -> options -> configureServer -> buildStart
2. 请求响应阶段：transformIndexHtml OR resolveId -> load -> transform
3. 热更新阶段：handleHotUpdate
4. 服务关闭阶段：buildEnd -> closeBundle

others：

• 代码分割
• JS编译工具
• 语法安全降级
• 服务端渲染SSR深入了解底层标准

总结

在这一节课中学习了Vite的基本特征、分类、所面临的问题、发展趋势等等，了解到了Vite是一个很方便的代码工具，可以避免部分代码编程复杂化和过长的问题，希望在以后的实际应用中可以更好的掌握！听的时候也在感叹，发明出来这些工具的人们，真的好会思考啊～