这是我参与「第四届青训营 」笔记创作活动的第 4 天
为什么要构建工具？
模块化方案->提供模块加载方案，兼容不同规范标准
语法转义->高级语法转移，如sass、typescript。资源加载，如图片，字体，worker
产物质量->产物压缩、无用代码删除、语法降级
开发效率->热更新
Vite是什么？Why Vite？
概览
定位:新一代前端构建工具
两大组成部分:
1.No-bundle开发服务,源文件无需打包
2.生产环境基于Rollup的 Bundler
核心特征
1.高性能,dev启动速度和热更新速度非常快!2.简单易用，开发者体验好
Vite 关心它的发布和安装足迹； 快速安装新应用程序是一项功能。
Vite 打包了它的大部分依赖项，并尽可能地尝试使用现代轻量级替代方案。
继续这个持续的目标，Vite 3 的发布规模比 v2 小了 30%。
当下的问题
缓慢的启动->项目编译等待成本高
缓慢的热更新->修改代码后不能实时更新
开发体验问题日渐显露!
bundle带来的性能开销
JavaScript语言的性能瓶颈
基于Esbuild的编译性能优化
Esbuild—基于 Golang开发的前端工具,具备如下能力:
1.打包器Bundler
⒉.编译器Transformer
3.压缩器Minifier
性能极高,在Vite 中被深度使用
Vite上手使用
#提前安装
pnpmnpm i -g pnpm #初始化命令
pnpm create vite #安装依赖
pnpm install #启动项目
npm run dev
VITE v3.0.0 ready in 320 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
Vite整体架构
为什么要进行预打包
1.避免node_modules过多的文件请求
2.将CommonJS格式转换为ESM格式
实现原理:
1.服务启动前扫描代码中用到的依赖
2.用Esbuild对依赖代码进行预打包
3.改写import语句指定依赖为预构建产物路径
Esbuild 作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
