这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
Vite 知识体系（二）
Vite 上手使用
Vite 项目初始化
# 提前安装 pnpm
npm i -g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev
启动完成之后，在浏览器地址栏访问对应地址即可
Vite 整体架构
Vite整体架构
关键技术：依赖预打包
为什么要进行预打包？
- 避免 node_modules 过多的文件请求
- 将 CommonJS 格式转换为 ESM 格式
实现原理：
- 服务启动时扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建的产物路径
关键技术：单文件编译
用Esbuild来编译TS/JSX
优势： 编译速度提升10 - 100 倍
局限性：
- 不支持类型检查
- 不支持语法降级到 ES5
关键技术：代码压缩
用 Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等压缩工具
关键技术：插件机制
在插件机制上，Vite在开发阶段模拟 Rollup 插件机制，在生产环境中直接使用 Rollup
Vite 进阶
深入双引擎
参考资料：
esbuild - An extremely fast bundler for the web
Rollup | Rollup (rollupjs.org)
推荐学习顺序：
- 先了解基本使用，动手尝试各项常用配置
- 然后学习其插件开发
为什么需要插件机制？
- 抽离核心逻辑
- 易于拓展
Vite 社区生态
Github 40k+ star，并且目前还在维护
官方提供插件：
- @vitejs/plugin-vue，提供 Vue 3 支持
- @vitejs/plugin-vue-jsx，提供 Vue 3 JSX 支持
- @vitejs/plugin-react，提供 React 支持
- @vitejs/plugin-legacy，提供低版本浏览器降级支持
海量社区插件 github.com/vitejs/awes…
众多框架内置
