这是我参与[第五届青训营]笔记创作活动的第十四天
本课堂重点内容：
- 前端构建工具的意义
- Vite 概览
- Vite 业界案例
- Vite 优势
- 项目初始化
- 使用 Sass/Scss & CSS Modules
- 使用静态资源
- 生产环境 Tree Shaking
- 深入双引擎
- Vite 插件开发
- 代码分割（拆包）
- JS 编译工具（Babel）
- 服务端渲染（SSR）
详细知识点介绍：
前端构建工具的意义：
- 模块化方案 ——————> 1. 提供模块加载方案 2.兼容不同模块规范
- 语法转译 ——————> 1. 高级语法转译 2. 资源加载
- 产物质量 ————> 产物压缩、无用代码删除、语法降级
- 开发效率 —————> 热更新
Vite 概览：
定位：
新一代前端构建工具
两大组成部分：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
核心特征：
- 高性能，dev 启动速度和热更新速度非常快
- 简单易用，开发者体验好
业界案例：
Rollup ————> Vite：
- 启动时间：2分15秒 ——> 1.7秒
- 更新时间：23秒 ——> 1秒内
Webpack ——> Vite
- 启动时间：2分36秒 ——> 6秒
- 热更新：13秒 ——> 1秒内
浏览器原生 ESM 的支持：
1. script 标签增加 type = "module" 属性
2. 使用 ESM 模块导入导出语法
基于原生 ESM 的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于 Esbuild 的编译性能优化：
Esbuild 是一款基于 Golang 开发的前端工具，性能极高，在 Vite 中被深度使用，具备如下能力：
- 打包器
Bundler - 编译器
Transformer - 压缩器
Minifier
内置的 web 构建能力：
Vite 开箱即用的功能：
等价于 Webpack 的：
实践练习例子：
项目初始化：
输入初始化参数：
使用 Sass/Scss & CSS Modules：
使用 Scss & CSS Modules
使用静态资源：
生产环境 Tree Shaking：
优化原理：
- 基于 ESM 的import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
- 需要注意的是：CommonJS 格式不能做到 Tree Shaking，require 的部分可能依赖运行时计算的结果
Vite 整体架构：
Vite关键技术 - 依赖预打包：
产生的原因：
- 避免 node_modules 过多的文件请求
- 将 CommonJS 格式转换为 ESM 格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用 Esbuild 对依赖代码进行预打包
- 改写 import 语句，指定依赖为预构建产物路径
Vite关键技术 - 单文件编译：
用 Esbuild 编译 TS/JSX
优势：编译速度提升 10-100倍
劣势：不支持类型检查、语法降到 ES5
Vite关键技术 - 插件机制：
开发阶段 ——> 模拟 Rollup 插件机制 生产环境 ——> 直接使用 Rollup
Vite 插件开发：
服务端渲染（SSR）：
构建阶段：
代码执行阶段：
个人课后总结：
Vite具有丰富的社区生态，众多框架内置，海量的插件
