前端构建工具
解决的问题
兼容模块规范，转义高级语法，压缩treeshaking
vite
vite 概览
组成
- 开发： 无需打包
- 生产： 基于rollup
优势
基于原生ESM的开发服务优势
无需打包源代码，天然按需加载
原生浏览器支持ESM
- script 标签增加
type = "module"属性- 使用ESM模块导入导出语句
基于 esbuild 的编译性能优化
esbuild 是用 go 编写，突破了js的瓶颈（js 作为解释性语言，是单线程的）
具有打包，编译，压缩的功能
内置web构建能力
包含各种加载器
生产环境treeshaking
不将没有用到的代码打包
vite 整体架构
预打包
原因：
- 避免过多的node_modules
- 将commonjs 转换成ESM
原理：
- 服务启动前扫描依赖包
- 用esbuild预打包
- 将import 路径改为预构建产物的路径
单文件编译
速度提升至10-100X
需要注意：
- 不支持类型检查，因此在生产环境构建时要调用一次tsc
- 不支持语法降级到ES5，只能降到ES6
插件机制
使用插件的原因：
- 解耦：将两大功能 构建 和 dev server 分开
- 易于扩展
过程：
- 开发阶段：用插件模拟rollup
- 生产阶段：直接使用rollup
重要插件
json加载插件 esbuild接入插件 官方react插件
vite进阶学习
- esbuild rollup 官方文档
- babel
编译原理： 解析为抽象语法树，转化后，再生成代码
