这是我参与「第四届青训营 」笔记创作活动的第12天！今天学习《vite知识体系》从vite构建工具、概要介绍、上手实践、整体架构以及进阶路线等方面展开。

前端工程的痛点

• 模块化
  • ESM、CommonJS、UMD
• 资源编译
  • 高级语法的编译
• 产物质量
  • 代码体积、代码性能
• 开发效率
  • 热更新

前端构建工具意义

1.模块化方案

• 提供模块加载方案
• 兼容不同模块规范

2.语法转译

• 高级语法转译，如Sass、Typescript
• 资源加载，如图片、字体、worker

3.产物质量

• 产物压缩、无用代码删除、语法降级

4.开发效率

• 热更新

Vite概览

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

当下问题

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

两大行业趋势

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

基于ESM的开发服务优势

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

Vite项目

• 初始化
  • 提前安装pnpm、初始化命令、安装依赖、启动项目
  • 启动后打开浏览器访问对应地址即可
• 使用Sass/Scss&CSS Modules
• 使用静态资源
• 使用HMR
  • 无需额外配置，自动开启
• 优化生产环境Tree Shaking
  • 优化原理：
    • 基于ESM的import/export语句依赖关系，与运行时状态无关
    • 在构建阶段将未使用到的代码进行删除
  • Tree Shaking在Vite中无需配置，默认开启
• 直观印象
  • 响应迅速
  • 开箱即用

Vite整体架构

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

Vite进阶路线

• 深入双引擎：esbuild、rollup.js
• 学习顺序：
  • 先了解基本使用，动手尝试各项常用配置项
  • 学习其插件开发
• 插件机制：
  • 抽离核心逻辑
  • 易于拓展
• Vite插件开发
  • 服务启动阶段
  • 请求响应阶段
  • 热更新阶段
  • 服务关闭阶段
• 代码分割（拆包）

今天学习内容很丰富，有一个初步的认识和了解，老师也推荐了很多文档和插件工具辅助学习，非常有收获！