Vite知识体系 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第13天
浅淡构建工具
在前端工程中
模块化、资源编译、产物质量、开发效率，这四点是前端工程师的痛点
而前端构建工具的意义就是针对这些方面给出解决方案
| 模块化方案 | 1.提供模块加载方案 2.兼容不同模块规范 |
|---|---|
| 语法转译 | 1.高级语法转译，如Sass、TypeScript 2.资源加载，如图片、字体、worker |
| 产物质量 | 产物压缩、无用代码削除、语法降级 |
| 开发效率 | 热更新 |
Vite概要介绍
Vite 定位：新一代前端构建工具 两大组成部分： 1.No-bundle开发服务，源文件无需打包 2.生产环境基于Rollup的Bundler 核心特征 1.高性能，dev启动速度和热更新速度非常快！ 2.简单易用，开发者体验好
业界案例
Rollup -Vite 启动时间：2分15秒->1.7秒 更新时间：23秒->1秒以内
Webpack->Vite 启动时间：2分36秒->6秒 热更新从13秒->1秒以内
具体分析现如今构架工具的问题
缓慢的启动->项目编译等待成本高 缓慢的热更新->修改代码后不能实时更新
而其瓶颈就在 bundle带来的性能开销 JavaScript语言的性能瓶颈
开始出现两大行业趋势
-
全球浏览器对原生ESM的普遍支持（目前占比92%以上)
-
基于原生语言(Go、Rust)编写前端编译工具链
- 如Go语言编写的Esbuild、Rust编写的SWC
浏览器原生ESM支持
Vite为什么可以这么快
基于原生ESM的开发服务优势
☑无需打包项目源代码 ☑天然的按需加载 ☑可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild一基于Golang开发的前端工具，性能极高，在Vte中被深度使用具备如下能力： 1.打包器Bundler 2.编译器Transformer 3.压缩器Minifier
内置的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资源的加载支持link
Vite整体架构
为什么要进行预打包？ 1.避免node_modules过多的文件请求 2.将Common]S格式转换为ESM格式 实现原理： 1.服务启动前扫描代码中用到的依赖 2.用Esbuild对依赖代码进行预打包 3.改写import语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100× 局限性： 不支持类型检查 不支持语法降级到ES5
代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、.Uglify.js等压缩工具
插件机制
开发阶段->模拟Rollup插件机制 生产环境->直接使用Roup
插件兼容性具体可查阅Vite Rollup Plugins
Vite进阶路线
双引擎
Esbuild官方文档link Rollup官方文档link
推荐学习顺序： ·先了解基本使用，动手尝试各项常用配置； 然后学习其插件开发。
插件开发
为什么需要插件机制？ ·抽离核心逻辑 ·易于拓展
通过上述的Hook,我们可以在不同的构建阶段插入自定义的逻辑
建议：先看文档，过一遍插件钩子的功能然后多学习其它插件的实现，掌握套路
代码分割（拆包）
参考资料：
构建选项 | Vite 官方中文文档 (vitejs.dev)
JS 编译工具（Bable）
出现的原因： JavaScript语法标准繁多，浏览器支持程度不一 开发者需要用到高级语法
参考资料：
What is Babel? · Babel (babeljs.io)
babel-handbook/plugin-handbook.md at master · jamiebuilds/babel-handbook (github.com)
语法安全降级
如何在构建产物中避免这类问题？
- 上层解决方案：@vitejs/plugin-legacy
-
底层原理
- 借助Babel进行语法自动降级
- 提前注入Polyfill实现，如core-js、regenerator-runtime
参考资料： @babel/预设环境 ·巴别塔 (babeljs.io)
vite/packages/plugin-legacy at main ·vitejs/vite (github.com)
服务端渲染（SSR）
参考资料：服务端渲染 | Vite 官方中文文档 (vitejs.dev)
深入了解底层标准
参考资料：
ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog
Publish ESM and CJS in a single package (antfu.me)
Vite 社区生态
Github40k+star(可参考webpack61.3K,rollup21.8k),并且目前还在持续维护
官方提供插件： @vitejs/,plugin-vue,提供Vue3支持 @vitejs/,plugin-vue-jsx,提供Vue3JSX支持 @vitejs/.plugin-react,提供React支持 @vitejs/.plugin-legacy,提供低版本浏览器降级支持
海量社区插件link
众多框架内置 Nuxt、SvelteKit、Astro、Vitepress
\
