这是我参与「第四届青训营 」笔记创作活动的第11天。
Vite知识体系：
一：浅谈构建工具
1. 构建工具的意义：
a) 模块化方案：提供模块加载方案、兼容不同模块规范
b) 语法转译：高级语法转译，如Sass、TypeScript、资源加载，如图片、字体、worker
c) 产物质量：产物压缩、无用代码删除、语法降级
d) 开发效率：热更新
二：Vite概要介绍
1. 定位:新一代前端构建工具
2. 两大组成部分:
a) No-bundle开发服务，源文件无需打包
b) 生产环境基于Rollup的Bundler
3. 核心特征
a) 高性能，dev启动速度和热更新速度非常快!
b) 简单易用，开发者体验好
4. 当下问题：
a) 缓慢的启动->项目编译等待成本高
b) 缓慢的热更新->修改代码后不能实时更新
5. 浏览器原生ESM支持：
a) script标签增加type= "module"属性
b) 使用ESM模块导入导出语法
三：Vite上手实战
1. 项目初始化：
a) 输入初始化参数
b) 启动完成后，打开浏览器访问对应地址即可
2. 使用Css
a) 安装组件
b) 引入Header组件
3. 生产环境TreeShaking：
a) 基于ESM的import/export语句依赖关系，与运行时状态无关
b) 在构建阶段将未使用到的代码进行删除
四：Vite整体架构
1. 为什么要进行预打包?
a) 避免node_ modules过多的文件请求
b) 将CommonJs格式转换为ESM格式
2. 预打包实现原理:
a) 服务启动前扫描代码中用到的依赖
b) 用Esbuild对依赖代码进行预打包.
c) 改写import语句，指定依赖为预构建产物路径
3. 用Esbuild编译TS/JSX
a) 优势:编译速度提升10-100x
b) 局限性:不支持类型检查、不支持语法降级到ES5
五：Vite进阶路线
1. 插件开发：
a) 抽离核心逻辑
b) 易于拓展
2. 语法安全降级：底层原理
a) 借助Babel进行语法自动降级
b) 提前注入Polyfill实现，如core-js、regenerator-runtime
3. 深入了解底层标准：
a) 重点特性:
b) CJS规范
c) ESM规范
d) HTTP 2.0特性
