这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
Vite 进阶
双引擎机制
Vite插件开发
插件机制可以使得部分功能代码抽离核心逻辑，易于扩展其他功能。
Vite的Hook
了解这些Hook后，我们卡伊在不同的构建阶段插入自定义的逻辑。
实例插件
开发Vite插件可以先去看官网文档，过一遍插件钩子的功能，然后多学习其他插件的实现，掌握套路。
复杂度较低的插件：json加载插件
复杂度中等的插件：Esbuild接入插件
复杂度较高的插件官方：React插件
- 自定义一个插件
- 使用插件
在配置文件引入这个插件
代码分割（拆包）
代码拆包前无法进行并发请求，缓存复用率低。
拆包后：
JS编译工具（Babel）
由于Javascript语法标准繁多，浏览器支持度不一。而开发者需要使用到高级语法，为了保证代码正常编译运行在各个标准之下，出现了Babel编译工具将代码编译成统一标准。
语法安全降级
可以查询某些语法在浏览器的支持情况：
以Promise 语法为例，IE11没有支持
浏览器兼容性自查工具
如何避免在构建产物中避免这类问题：
- 上层解决方案：
@vitejs/plugin-legacy - 底层原理：
- 借助Babel进行语法自动降级
- 提前注入Polyfil实现，如core-js、regenerator-runtime
参考资料：
服务端渲染（SSR）
一种常见的渲染模式，用于提升首屏性能和SEO优化。
构建阶段：
代码执行阶段：
参考资料：
深入了解底层标准
参考：
es-modules-a-cartoon-deep-dive
Vite社区生态
官方提供插件：
@vitejs/plugin-vue,提供 vue 3 支持
@vitejs/plugin-vue-jsx,提供 vue 3 Jsx 支持
@vitejs/plugin-react,提供 React 支持
@vitejs/plugin-legacy,提供低版本浏览器降级支持
海量社区插件：github.com/vitejs/awes…
