这是我参与「第五届青训营 」伴学笔记创作活动的第 十四 天

前端技术栈之Vite | 青训营笔记

Vite是什么？

• vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。 两大组成部分：

1. No-bundle开发服务，资源无需打包
2. 生产环境基于Rollup的Bundler 核心特征：

• 高性能，dev 启动速度和热更新速度非常快！
• 简单易用，开发体验好

Vite 对比

• Rollup——>Vite
  • 启动时间：2分15秒——>1.7秒
  • 更新时间：23秒——>1秒以内
• Webpack——>Vite
  • 启动时间：2分36秒——>6秒
  • 热更新从13秒——>1秒以内

当下问题

• 缓慢启动——>项目编译等待成本高
• 缓慢的热更新——>修改代码后不能实时更新 瓶颈在哪里？
• bundle 带来的性能开销
• JavaScript语言的性能瓶颈

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

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

基于Esbuild的编译性能优化

Esbuild——基于Golang开发的前端工具，具备如下能力

1. 打包器Bundler
2. 编译器 Transformer
3. 压缩器Minifier 性能极高，在Vite中被深度使用。

内置的Web构建能力

Vite开箱即用的功能等价于：

• webpack
• webpack-dev-server
• css-loader
• style-loader
• less-loader
• sass-loader -file-loader
• 等...

Vite 项目初始化

提前安装 pnpm npm i -g pnpm

初始化命令 pnpm create vite

安装依赖 pnpm install

启动项目 npm run dev

Vite给人的直观印象

• 响应速度块
• 开箱即用

为什么要进行预打包？

1. 避免node_modules过多的文件请求
2. 将CommonJS格式转换为ESM格式 实现原理：
3. 服务启动前扫描代码中用到的依赖
4. 用Esbuild对依赖代码进行预打包
5. 改写成import语句，指定依赖为预构建产物路径

单文件编译

用Esbuild编译TS/JSX

• 优势：编译速度提升10-100x
• 局限性：
  • 不支持类型检查
  • 不支持语法降级到ES5 Esbild作为默认压缩工具，替换传统的Terser，Uglify。js等压缩工具。

Vite进阶路线

深入双引擎

Esbuild：

• 参考资料
  • Esbuild官方文档
  • Rollup官方文档

为什么需要插件机制？

• 抽离核心逻辑
• 易于扩展

Vite社区生态

官方提供插件：

• @vitejs/plugin-vue，提供vue3支持
• @vitejs/plugin-vue-jsx，提供Vue3JSX支持
• @vitejs/plugin-react，提供React支持
• @vitejs/plugin-legacy，提供低版本浏览器降级支持 众多框架内置
• Nuxt
• SvelteKit
• Astro
• 等...