Vite 知识体系 学习｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第13天
Vite 知识体系
读做vi te,本质是dev server，去除了bundle的开销
1.引言
浏览器不认识资源，需要编译为浏览器认识的资源类型，eg:ts js,css,scss,less,jsx,png,jpeg,webp
前端构建工具的意义：
- 提供模块化加载方案，兼容不同模块规范；
- 可以进行语法的转义，资源文件的加载；
- 代码体积压缩，无用代码删除，提升代码性能；
- 通过热更新提高开发效率
2.vite核心特征
- 源文件无需打包：使用ESM的规范来执行代码，由于
现代浏览器基本上都支持了ESM规范(以前不支持，现在vite就是利用了这一特征)，所以在开发阶段并不需要将代码打包编译成es5模块即可在浏览器上运行.只需要从入口文件出发，在遇到对应的 import 语句时，将对应的模块加载到浏览器中就可以了 - 生产环境基于Rollup的bundler
- 具有高性能，dev启动和热更新速度快
- 简单易用：开发者体验好
3.实战
- 初始化项目
- 安装pnpm
- pnpm create vite
- pnpm install
- npm run dev //启动dev环境
- npm run build//生产环境 项目打包
使用过程中可以安装一些依赖，比如sass
4.插件机制
- 一些第三方模块
- 插件开发
5.优化
- 预打包：保证每一个文件只对应一个请求
- 代码分割
6.SSR
- 服务端渲染时是一种常见的渲染模式。可以提高首屏性能以及SEO优化；但同时也会对服务器造成更大的压力。
- SSR也是得益于前后端分离开发以及但单页面开发，使得用户在交互过程中无需手动请求数据，实现了无刷新更新以及数据的响应式
- 流程 ：务端渲染就是在浏览器请求页面URL的时候，服务端将我们需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中。
