Vite浅入门 | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的的第12天。
什么是vite
官网上是这样描述得：新一代前端构建工具
什么是前端构建工具呢? 它有什么意义啊？
前端构建工具能够将前端源码转换成可交付代码的一个工具。
那为什么是新一代呢？上一代有什么问题呢？
这篇文章回答了这个问题，这里不细讲。
那vite到底能够怎样？
- 基于
esbuild实现的极速开发体验 - 预编译：npm 包这类基本不会变化的模块，使用 Esbuild 在 预构建 阶段先打包整理好，减少 http 请求数
- 按需编译：用户代码这一类频繁变动的模块，直到被使用时才会执行编译操作
- 客户端强缓存：请求过的模块会被以 http 头
max-age=31536000,immutable设置为强缓存 - 产物优化：相比于 Webpack ，Vite 直接锚定高版本浏览器，不需要在 build 产物中插入过多运行时与模板代码
- 内置更好的分包实现：不需要用户干预，默认启用一系列智能分包规则，尽可能减少模块的重复打包
- 更好的静态资源处理：Vite 尽量避免直接处理静态资源，而是选择遵循 ESM 方式提供服务，例如引入图片
import img from 'xxx.png'语句，执行后img变量只是一个路径字符串。
vite使用
项目初始化
- 提前安装 pnpm：
npm i -g pnpm - 初始化命令：
pnpm create vite（选择框架） - 安装依赖：
pnpm install - 启动项目
npm run dev
启动完成后,打开浏览器访问对应地址即可
学习路线
参考资料：
深入双引擎
Vite插件开发（抽离逻辑 易于拓展）****
代码分割（拆包）
JS编译工具（Babel）
语法安全降级
服务端渲染（SSR）
深入了解底层标准
