本文章包含五大部分内容，分别为：浅谈构建工具、Vite概要介绍、上手实战、整体架构、Vite进阶路线。
01 浅谈构建工具
为什么需要构建工具（前端工程的痛点）
核心要素——资源（JS、TS、JSX、CSS、SCSS、LESS、PNG、JPEG、WEBP……）
问题：
- 模块化（三个主要的规范：ESM、CommonJS、UMD）
- 资源编译（高级语法的编译：浏览器对于高级语法不支持）
- 产物质量（代码体积、代码性能：代码压缩、未使用的模块需要剔除、兼容移动端）
- 开发效率（热更新）
前端构建工具的意义
02 Vite 概要介绍
定位：新一代前端构造工具
两大组成部分：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
核心特征：
- 高性能，dev 启动速度和热更新速度非常快
- 简单易用，开发者体验好
当下构造工具存在的问题
问题在哪里？ 开发体验问题日渐显著！
- 缓慢的启动 -> 项目编译等待成本高
- 缓慢的热更新 -> 修改代码后不能实时更新
瓶颈在哪里？
-
Bundle（打包） 带来的性能开销
-
JavaScript 语言的性能瓶颈 （解释性、单线程）
两大行业趋势
-
全球浏览器对原生ESM的普遍支持（目前占比92%以上）
两大要素：
- script标签增加 type="module" 属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
-
基于原生语言（Go、Rust）编写前端编译工具链
Go语言编写的Esbuild
Esbuild——基于Golang开发的前端工具，具备如下能力：
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
性能极高，在 Vite 中被深度使用！
Rust编写的SWC
内置Web构建能力
03 上手实战
项目初始化
| 提前安装 pnpm | npm i -g pnpm |
|---|---|
| 初始化命令 | pnpm create vite |
| 安装依赖 | pnpm install |
| 启动项目 | npm run dev |
输入初始化参数
启动后截图
使用Sass/Scss & CSS Modules
使用静态资源
除了常见的图片格式， Vite 也内置了对于 JSON、Worker、WASM 资源的加载支持。
使用HMR
生产环境 Tree Shaking
优化原理：
- 基于 ESM 的import/export 语句的依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking 在 Vite 中无需配置，默认开启！
04 整体架构
关键技术：依赖预打包
为什么要进行预打包：
- 避免 node_modules 过多的文件请求（node_modules不可控、产物不规范）
- 将 CommonJS 格式转换为 ESM 格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100x
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，代替传统的Terser、Uglify.js 等压缩工具
关键技术：插件机制
开发阶段 -> 模拟 Rollup 插件机制
生产环境 -> 直接使用 Rollup
插件兼容性具体可查阅 vite-rollup-plugins.patak.dev/
05 Vite 进阶路线
深入双引擎
推荐学习顺序
先了解基本使用，动手尝试各项常用配置；
然后学习其插件开发。
参考资料
Esbuild官方文档：esbuild.github.io/
Rollup官方文档：rollupjs.org/guide/
Vite 插件开发
为什么需要插件机制
- 抽离核心逻辑
- 易于拓展
不同构建阶段
- 服务启动阶段 config
- 请求响应阶段 load transform
- 热更新阶段
- 服务器关闭阶段
通过上述 Hook ，我们可以在不同的构建阶段插入自定义的逻辑。
参考资料
Vite插件开发文档：cn.vitejs.dev/guide/api-p…
复杂度较低的插件：json加载插件
复杂度中等的插件：Esbuild接入插件
复杂度较高的插件：官方React插件
先看文档，过一遍插件钩子的功能；
然后多学习其他插件的实现，掌握套路。
代码分割（拆包）
拆包前
问题：
- 无法进行并发请求
- 缓存复用率低
拆包后
参考资料
JS编译工具（Babel）
出现的原因
- JavaScript 语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
Babel原理
参考资料
Babel官方站点：babeljs.io/docs/
Babel插件手册：github.com/jamiebuilds…
语法安全降级
如何在构建产物中避免这类问题
上层解决方案：@vitejs/plugin-legacy
底层原理：
借助 Babel 进行语法自动降级；
提前注入 Polyfill 实现，如 core-js、regenerator-runtime
参考资料
@babel/preset-env文档：babeljs.io/docs/babel-…
Vite官方降级插件文档：github.com/vitejs/vite…
服务端渲染（SSR）
一种常见的渲染模式，用于提升首屏性能和SEO优化。
构建阶段
代码执行阶段
参考资料
Vite-SSR 文档：github.com/vitejs/vite…
Vite 官方 ssr-demo 项目：github.com/vitejs/vite…
使用 Vite 搭建 SSR 工程：juejin.cn/book/705006…
深入了解底层标准
重点特性
- CJS规范
- ESM规范
- HTTP2.0 特性
参考资料
什么是PureESM：gist.github.com/sindresorhu…
