这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
Vite基本概要
浅谈构建工具
为什么需要构建工具
前端工程的痛点
前端项目由什么构成？
资源
前端工程化的问题
- 模块化
项目拆分成多个模块，分别进行开发和维护。
- ESM
- CommonJS
- UMD
- 资源编译
- 高级语法的编译（TS、Scss、Less等是前端的标配，但是浏览器无法识别这些语言，需要将高级语法编译成浏览器可以识别的语言。总之，浏览器的更新速度没有跟上前端的更新速度。）
- 产物质量
- 代码性能
- 代码体积
- 开发效率
- 热更新
解决方案
- 模块化方案，
如Webpack的runtime就是一个模块加载器，对美国
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译，
如Webpack中的loader
- 高级语法转译，如Sass、TS
- 资源加载，如图片、字体、worker
- 产物质量
- 产物压缩
- 无用代码删除
- 语法降级
- 开发效率
- 热更新
Vite概要介绍
组合部分
- No-Bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验感好
当下问题
- 缓慢启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
瓶颈
- bundle带来的性能开销
- JS语言的性能开销
浏览器对原生ESM的支持
两大要素
- script标签增加 type="double"属性
- 使用ESM模块导入导出语法
基于原生ESM开发服务优势
- 无需打包项目源码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于原生Esbuild编译性能优化
- 打包器bundle
- 编译器transformer
- 压缩器Minifier
