这是我参与「第五届青训营」伴学笔记创作活动的第20天
一、本节课重点内容
在基本的原理及实践讲解完成后，讲师将在本节课中进一步介绍 Vite 的生态及进阶工程路线，带我们梳理前端架构领域中更为深层次的学习领域，帮助我们在日常生活中，也能做到有的放矢地学习前端的相关内容，能更为精确的把握住学习的重心所在。
本节课的课程重点内容归纳如下：
- 深入双引擎
- Vite 插件开发
- 代码分割(拆包)
- JS 编译工具(Babel)
- 语法安全降级
- 服务端渲染(SSR)
- 深入了解底层标准
- Vite 社区生态
二、详细知识点介绍
- 深入双引擎
两个非常依赖的部件引擎：
推荐学习顺序:
- 先了解基本使用，动手尝试各项常用配置;
- 然后学习其插件开发。
- Vite 插件开发
为什么需要插件机制?
- 抽离核心逻辑，抽离serve，更加的容易服务修改；
- 易于拓展
掌握一些常用的启动、请求响应、更新、关闭即可。
参考资料:
- Vite插件开发文档
- 复杂度较低的插件: json加载插件
- 复杂度中等的插件: Esbuild接入插件
- 复杂度较高的插件:宜方React插件
先看文档，过一遍插件钩子的功能，然后多学习其它插件的实现，掌握套路
- 代码分割(拆包)
只有一个代码就会效率很低，拆包之后会有更快的加载速度和更为方便的开发方式。
4. JS 编译工具(Babel)
出现的原因:
- JavaScript语法标准繁多,浏览器支持程度不一
- 开发者需要用到高级语法
- 语法安全降级
没有内置的API，如果不降级，就会出现浏览器页面无法加载的问题。
如何在构建产物中避免这类问题?
- 上层解决方案: @vitejs/plugin-legacy
- 底层原理：
-
- 借助Babel进行语法自动降级
-
- 提前注入Polyfill实现，如core-js、regenerator-runtime
- 服务端渲染(SSR)
在代码执行的阶段开始跑，这样的话前端拿到的就是完整的HTML页面。
- 深入了解底层标准
- Vite 社区生态 向Github 40k+ star (可参考webpack 61.3 K, rollup 21.8 k)，并且目前还在持续维护 <官方提供插件:
- @vitejs/plugin-vue,提供Vue 3支持
- @vitejs/ plugin-vue -jsx，提供Vue 3 JSX支持
- @vitejs/plugin-react,提供React支持
- @vitejs/plugin-legacy,提供低版本浏览器降级支持 凸海量社区插件：https://github。com/vitejs/awesome-vite 众多框架内置
- Nuxt
- SvelteKit
- Astro
- Vitepress
三、总结
对Vite 进阶路线 有了一个清晰的了解，对前端知识的学习有了新的看法，拓展的学习内容和学习社区、插件也会有利于我进行前端技术的学习。 部分手册与插件如下所示： link.juejin.cn/?target=htt… link.juejin.cn/?target=htt… link.juejin.cn/?target=htt… link.juejin.cn/?target=htt… link.juejin.cn/?target=htt…
