Vite知识体系|青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第2天

知识重点

1. 前端工程的痛点
2. 前端构建工具的意义
3. Vite概览
4. Vite业界案例
5. Vite优势

具体知识

为什么需要构建工具

前端问题痛点

• 模块化规范太多 ESM CJS UMD
• 资源编译问题 浏览器只支持普通HTML CSS JS 但是高级语法太多比如 SCSS TS JSX 等浏览器不认识 需要进行编译
• 产物质量问题 代码压缩 代码剔除Tree Shaking 浏览器兼容
• 开发效率问题 开发模块的热更新

什么是Vite

定位：新一代前端构建工具。

组成部分 ：

1. No-bundle 开发，源文件不需要打包 在开发服务器中调试
2. 生产环境基于RollUp的Bundler 打包

核心优势 ：简单易学 性能高

传统构建工具的问题

• 启动缓慢 项目编译等待成本高
• 热更新缓慢 代码修复后无法实时更新

行业趋势

1. 浏览器对原生ESM的支持 script增加type="module"属性
2. 使用ESM模块导入导出语法

基于原生ESM的优势

• 无需打包项目源代码
• 天然的按需加载
• 利用文件级的浏览器缓存

实战

1. 提前安装pnpm
2. 初始化
3. 安装依赖
4. 启动项目

npm i -g pnpm  // 提前安装pnpm
pnpm create vite //初始化
pnpm install //安装依赖
pnpm run dev //启动项目

响应迅速 开箱即用

整体架构

关键技术

1. 依赖预打包：单文件编译ESbuild 不支持类型检测 不支持语法降级ES5
2. 代码压缩：Esbuild作为默认压缩机制
3. 插件机制：开发环境模拟Rollup 生产环境直接使用Rollup

Vite进阶

1. 深入了解 esbuild rollup
2. vite插件开发 抽离核心逻辑 易于拓展
3. 代码分割(拆包) 并发请求 缓存复用