这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
05Vite进阶路线
深入双引擎
esbuild
rollup.js
Vite插件开发
为什么需要插件机制？
- 抽离核心逻辑
- 易于拓展
Vite插件开发
1.服务启动阶段
config->configResolved->options->configureServer->buildStart
2.请求响应阶段
- transformIndexHtml
- resolved->load->transfrom
3.热更新阶段
handleHotUpdate
4.服务关闭阶段
buildEnd->closeBundle
通过上述的Hook，我们可以在不同的构建阶段插入自定义的逻辑
插件示例
Vite插件示例
const fileRegex = /.(my-file-ext)$/
export default function myPlugin() {
return {
name:'transform-file',
transform(src,id) {
if(fileRegex.test(id)) {
return {
code:complieFileToJS(src),
map:null//如果可行将提供source map
}
}
}
}
}
使用插件
//vite.config.js
import plugin from './myPlugin'
export default defineConfig ({
plugins:[plugin()]
})
- 开发Vite插件
- 配置文件引入插件
Vite插件开发
参考资料
插件 API | Vite 官方中文文档 (vitejs.dev)
vite/json.ts at main · vitejs/vite · GitHub
vite/esbuild.ts at main · vitejs/vite · GitHub
Page not found · GitHub · GitHub
代码分割（拆包）
参考资料
构建选项 | Vite 官方中文文档 (vitejs.dev)
Configuration Options | Rollup (rollupjs.org)
问题：
- 无法进行并发请求
- 缓存复用率低
JS编译工具（Babel）
参考资料
What is Babel? · Babel (babeljs.io)
babel-handbook/plugin-handbook.md at master · jamiebuilds/babel-handbook · GitHub
出现的原因：
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
语法安全降级
以Promise语法为例，IE11没有支持
如何在构建产物中避免这类问题？
-
上层解决方案
@vitejs/plugin-legacy
-
底层原理
- 借助Babel进行语法自动降级
- 提前注入Polyfill实现，如core-js,regenerator-runtime
参考资料
babel-handbook/plugin-handbook.md at master · jamiebuilds/babel-handbook · GitHub
vite/packages/plugin-legacy at main · vitejs/vite · GitHub
服务端渲染（SSR）
一种常见的渲染模式，用于提升首屏性能和SEO优化
构建阶段
项目源码->构建流程->
- 客户端产物--运行在浏览器
- SSR产物，运行在服务端（Node.js)
代码执行阶段
加载SSR入口->数据预取->组件渲染->
HTML拼接
参考资料
服务端渲染 | Vite 官方中文文档 (vitejs.dev)
Page not found · GitHub · GitHub
深入浅出 Vite - 神三元 - 掘金小册 (juejin.cn)
深入了解底层标准
参考资料
ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog
Ship ESM & CJS in one Package (antfu.me)
Vite社区生态
海量社区插件：
GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js
