这是我参与第四届青训营笔记创作的第3天
Vite知识体系
01 浅谈构建工具
02 Vite概要介绍
03 Vite上手实战
04 Vite整体架构
05 Vite进阶路线
01.为什么需要构建工具？
前端工程的痛点：
- 模式化：ESM、CommonJS、UMD
- 资源编译：高级语法的编译
- 产物质量：代码体积、代码性能
- 开发效率：热更新
前端构建工具的意义：
模块化方案→1.提供模块加载方案 2.兼容不同模块规范
语法转译→1.高级语法转译，如Sass、TypeScript 2.资源加载，如图片、字体、worker
产物质量→产物压缩、无用代码删除、语法降级
开发效率→热更新
02.Vite是什么？Why Vite？
Vite概览：
定位：新一代前端构建工具
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能，dev启动速度和热更新速度非常快！ 2.简单易用，开发者体验好
业界案例：
Rollup->Vite
- 启动时间：2分15秒->1.7秒
- 更新时间：23秒->1秒以内
Webpack->Vite
- 启动时间：2分36秒->6秒
- 热更新从13秒->1秒以内
当下问题
- 缓慢的启动→项目编译等待成本高
- 缓慢的热更新→修改代码后不能实时更新
瓶颈在哪里？
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
- 浏览器：全球浏览器对原生ESM的普遍支持(目前占比92%以上)
- esbuild：基于原生语言(Go、Rust)编写前端编译工具链
- 如Go语言编写的Esbuild、Rust编写的SWC
浏览器原生ESM支持
两大要素：
- script标签增加type=“module”属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild——基于Golang开发的前端工具，具备如下能力：
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
内置的Web构建能力
Vite开箱即用的功能等价于：webpack、webpack-dev-server、css-loader、style-loader......
03.Vite上手使用
项目初始化：启动完成后，打开浏览器访问对应地址即可
使用Sass/Scss & CSS Modules
使用Scss & CSS Modules
使用静态资源
使用HMR
生产环境 Tree Shaking
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
