这是我参与「第四届青训营 」笔记创作活动的的第20天
一、浅谈构建工具
模块化方案：提供模块加载方案、兼容不同模块规范
资源编译：高级语法的编译
产物质量：代码体积和性能
开发效率：更新热
当下问题：
- 缓慢启动：项目编译等待成本高
- 缓慢的热更新：修改代码后不能实时更新
- bundle带来的性能开销
- javascript语言的性能瓶颈
二、Vite概要介绍
定位：新一代前端构建工具
两大组成部分：源文件无需打包，生产环境基于Rollup 的Bundler
核心特征：性能高，dev启动速度和更新速度非常快，简单易用，开发者体验好
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
内置的web构建能力
三、Vite 上手实战
项目初始化
- 提前安装
- 初始化命令
- 安装依赖
- 启动项目
npm i -g pnp
pnpm create vite
pnpm install
npm run dev
- 使用Sass/Scss&CSS Modules
- 安装Sass
pnpm i sass -D
- 使用HMR，无需额外配置，自动开启
- Tree Shaking 再Vite中无需配置，默认开启
优化原理
- 基于ESM的import 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
四、Vite 整体架构
为什么要预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
五、Vite 进阶路线
先熟悉其基本使用，动手尝试各项常用配置
Vite插件开发
- 服务启动阶段
- 请求响应阶段
- 热更新阶段
- 服务关闭阶段
