这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
-
为什么需要构建工具
- 模块化 有多种模块语法
- 资源编译 有很多高级特性和高级语法, 浏览器并不支持
- 产物质量 代码压缩 tree-shaking 兼容性
- 开发效率 热更新
-
意义
- 兼容多种模块语法
- 语法转译 将less ts转译为浏览器识别的代码
-
vite
- 新一代前端构建工具
- 源文件无需打包 进行开发
- 生成环境基于rollup的bundler
- 高性能 dev和热更新很快
- 简单易用 开发者体验好
-
传统构建工具的问题
- 启动太慢 项目编译等待成本高
- 热更新慢
-
瓶颈
- bundle带来的性能开销
- js的性能瓶颈
-
esbuild是用go开发的打包工具 性能非常好
-
swc是go开发的类似于Babel的代码转译工具
-
浏览器原生对esm的支持 vite基于esm的开发服务
无需打包项目
可以实现天然的按需加载
由于不需要打包 可以充分利用浏览器缓存
-
esbuild不支持类型检查 不支持降级到es5
-
vite 采用双引擎 esbuild rollup rollup用于build
-
插件机制
- 抽离核心逻辑
- 易于扩展
-
插件开发 在各个阶段 通过hook注入插件逻辑
-
代码分割 拆包
-
只有一个产物不能并发请求 缓存利用率也低
-
Babel
- parse 将代码解析成抽象语法树
- transform 将抽象语法树进行转译
- generator 将转译后的ast重新变成源代码
