Vite知识体系|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第14天
前言
一个前端项目是由很多的资源文件组成的，JS、TS、JS、CSS、SCSS文件等等，这么多的资源如果依靠手动去管理是一件十分繁琐的事情，在前端工程化的概念里面，处理这一个问题就需要“打包”这些文件。本文介绍的Vite就是完成这一任务的工具。具有模块化、资源编译的功能，能减小代码体积，增加代码性能，让我们的开发效率up up up！
Vite概览
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundle
核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验很好
Vite的使用
项目初始化
- 安装pnpm（npm i -g pnpm）
- 初始化命令（pnpm create vite）
- 安装依赖（pnpm install）
- 启动项目（npm run dev）
输入初始化参数：
启动后：
使用Sass/Scss&CSS Modules
安装Sass：pnpm i sass -D
src目录结构
App.tsx（引入Header组件）
index.tsx
index.module.scss
使用静态资源（以svg图片为例）
目录结构
App.tsx
使用HMR（热启动）
无需额外配置，自动开启，只要改代码不需要刷新页面自动变化
生产环境Tree Shaking
Tree Shaking在Vite中无需配置，默认开启！
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Vite整体架构
关键技术：依赖打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预购产物路径
关键技术：单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100x
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js压缩工具
关键技术：插件机制
开发环境->模拟Rollup插件机制 生产环境->直接使用Roullup
