这是我参与「第四届青训营」笔记创作活动的的第2天
课堂内容
- Vite的基本使用
- 构建工具
构建工具
前端为什么需要构建工具？：前端存在许多问题：
（1）模块化：前端没有统一的规划
（2）资源编译：浏览器的标准追不上前端开发。高级语法的编译存在问题
（3）产物质量：代码体积要压缩 代码性能，兼容性
（4）开发效率：要构架工具提升体验
构建工具的解决：
（1）提供模块加载方案、兼容不同模块规范
（2）高级语法转译、资源加载
（3）产物压缩、无用代码删除
（4）热更新
Vite概述
定位：新一代前端构建工具（高性能、简单易用）
当下问题：
（1）缓慢的启动->项目编译等待成本高
（2）缓慢的热更新->修改代码后不能实时更新
技术瓶颈：bundle（打包）带来的性能开销、JS语言的性能瓶颈（单线程）
- 基于原生ESM的开发服务优势：
无需打包项目源代码
天然的按需求加载
可以利用文件级的浏览器缓存
- 基于Esbuild的编译性能优化
在Vite中被深度使用
- Vite内置的Web构建能力
Vite初始化
（1）项目初始化
Vite结构
（1）依赖的预打包
避免node——modules过多的文件请求、将CommonJS格式转为ESM格式
（2）Esbuild编译TS/JSX
编译速度快，但是不支持类型检查、不支持语法降级到ES5
（3）代码压缩
（4）插件机制
Vite进阶路线
Vite依赖的两个构件引擎：
esbuild、rollup
为什么需要插件机制？：抽离核心逻辑、易于拓展
- 代码分割：
拆包前：
无法进行并发请求、缓存复用率地
