Vite初识｜青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第19天。

一、浅谈构建工具

模块化方案

1.提供模块加载方案
2.兼容不同模块规范

语法转译

1.高级语法转译，如Sass、TypeScript
2.资源加载，如图片、字体、worker

产物质量

产物压缩、无用代码删除、语法降级

开发效率

热更新

定位:新一代前端构建工具

1.No-bundle开发服务，源文件无需打包
2.生产环境基于Rollup 的 Bundler

1.高性能, dev启动速度和热更新速度非常快.
2.简单易用，开发者体验好

缓慢的启动—>项目编译等待成本高
缓慢的热更新->修改代码后不能实时更新
开发体验问题日渐显露!

瓶颈在哪里?

bundle带来的性能开销
JavaScript语言的性能瓶颈

两大行业趋势

·全球浏览器对原生ESM的普遍支持(目前占比92%以上)

·基于原生语言(Go、Rust)编写前端编译工具链·如Go语言编写的Esbuild、 Rust编写的Swc

浏览器原生ESM 支持

两大要素:

1.script标签增加 type=“module”属性
2.使用ESM模块导入导出语法

基于原生ESM的开发服务优势

无需打包项目源代码
天然的按需加载
可以利用文件级的浏览器缓存

基于Esbuild的编译性能优化

Esbuild ——基于Golang开发的前端工具，具备如下能力:
1.打包器Bundler
2.编译器Transformer,性能极高,在Vite中被深度使用
3.压缩器Minifier

内置的Web构建能力