Vite知识体系
为什么需要构建工具？
前端工程的痛点
-
模块化
- ESM、CommonJS、UMD
-
资源编译
- 高级语法的编译
-
产物质量
- 代码体积、代码性能
-
开发效率
- 热更新
前端构建工具的意义
Vite 是什么？Why Vite？
Vite 概览
- 定位：新一代前端构建工具
- 两大组成部分：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
- 核心特征
- 高性能，dev 启动速度和热更新速度非常快！
- 简单易用，开发者体验好
业界案例
当下问题
瓶颈在哪里？
- bundle 带来的性能开销
- JavaScript 语言的性能瓶颈
两大行业趋势
- 全球浏览器对原生 ESM 的普遍支持（目前占比92%以上）
- 基于原生语言(Go、Rust)编写前端编译工具链
- 如 Go 语言编写的 Esbuild、Rust 编写的 SWC
浏览器原生 ESM 支持
两大要素：
- script 标签增加 type="module"属性
- 使用 ESM 模块导入导出语法
基于原生 ESM 的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于 Esbuild 的编译性能优化
Esbuild ———— 基于 Golang 开发的前端工具，具备如下能力：
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
性能极高，在 Vite 中被深度使用
内置的 Web 构建能力
Vite 开箱即用的功能等价于：
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
- ...
Vite 上手使用
项目初始化
使用 Sass/Scss & CSS Modules
使用静态资源
除了常见的图片格式，Vite 也内置了对于 JSON、Worker、WASM 资源的加载支持 cn.vitejs.dev/guide/featu…
使用 HMR
无需额外配置，自动开启
生产环境 Tree Shaking
优化原理：
- 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking 在 Vite 中无需配置，默认开启！
Vite 给你最直观的印象如何？
- 响应迅速
- 开箱即用
Vite 整体架构
关键技术：依赖预打包
为什么要进行预打包？
- 避免 node_modules 过多的文件请求
- 将 CommonJS 格式转换为 ESM 格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用 Esbuild 对依赖代码进行预打包
- 改写 import 语句，指定依赖为预构建产物路径
关键技术：单文件编译
用 Esbuild 编译 TS/JSX
-
优势：编译速度提升10-100x
-
局限性：
- 不支持类型检查
- 不支持语法降级到 ES5
关键技术：代码压缩
压缩性能对比
Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等压缩工具
关键技术：插件机制
开发阶段 ————→ 模拟 Rollup 插件机制
生产环境 ————→ 直接使用 Rollup插件兼容性具体可查阅：vite-rollup-plugins.patak.dev/
Vite 进阶路线
深入双引擎
参考资料：
- Esbuild 官方文档：esbuild.github.io/
- Rollup 官方文档：rollupjs.org/
推荐学习顺序：
- 先了解基本使用，动手尝试各项常用配置
- 然后学习其插件开发
Vite 插件开发
为什么需要插件机制？
- 抽离核心逻辑
- 易于拓展
插件示例
- 开发 Vite 插件
- 配置文件引入插件
参考资料：
- Vite 插件开发文档：cn.vitejs.dev/guide/api-p…
- 复杂度较低的插件：json加载插件：github.com/vitejs/vite…
- 复杂度中等的插件：Esbuild 接入插件：github.com/vitejs/vite…
- 复杂度较高的插件：官方 React 插件：github.com/vitejs/vite…
先看文档，过一遍插件钩子的功能
然后多学习其它插件的实现，掌握套路
代码分割（拆包）
参考资料：
JS 编译工具(Babel)
出现的原因：
- JavaScript 语法标准繁多，浏览器主持程度不一
- 开发者需要用到高级语法
参考资料：
- babel官方站点：babeljs.io/docs/en/
- babel插件手册：github.com/jamiebuilds…
语法安全降级
参考资料：
- @babel/preset-env文档：babeljs.io/docs/en/bab…
- Vite官方降级插件文档：github.com/vitejs/vite…
服务端渲染(SSR)
一种常见的渲染模式，用于提升首屏性能和 SEO 优化参考资料：
- Vite-SSR文档：cn.vitejs.dev/guide/ssr.h…
- Vite官方ssr-demo项目：github.com/vitejs/vite…
- 使用Vite搭建SSR工程：juejin.cn/book/705006…
深入了解底层标准
参考资料：
Vite 社区生态
Github 40k + star(可参考 webpack 61.3 K，rollup 21.8 k)，并且目前还在持续维护
官方提供插件：
- @vitejs/plugin-vue，提供 Vue3 支持
- @vitejs/plugin-vue-jsx，提供 Vue3 JSX 支持
- @vitejs/plugin-react，提供 React 支持
- @vitejs/plugin-legacy，提供低版本浏览器降级支持
海量社区插件：github.com/vitejs/awes…
众多框架内置：
