1. Vite概要介绍

Vite是什么？

定位：  新一代前端构架工具

两大组成部分：

1. No-bundle开发服务，源文件无需打包
2. 生产环境基于Rollup的Bundler

核心特征：

1. 高性能，dev启动速度和热更新速度非常快
2. 简单易用,开发者体验好

传统构架工具遇到的问题

1. 缓慢的启动=>项目编译等待成本高
2. 缓慢的热更新=>修改代码后不能实时更新

瓶颈

1. bundle带来的性能开销
2. JS语言的性能瓶颈

2. Vite上手实战

2.1 Vite项目初始化

• 提前安装 pnpm (需管理员权限)

npm i -g pnpm

• 初始化命令

pnpm create vite

• 安装依赖

pnpm install

• 项目启动

npm run dev

2.2 使用Sass/Scss & Css Modules

• 安装SASS

pnpm i sass -D

• 目录结构

• index.moudle.scss

.header {
  color: green;
}

• index.tsx

 import  React from 'react';
 import styles from './index.module.scss';
 export function Header(){
   return <div className={styles.header}>Header</div>
 }

• 效果：页面Header文字表现为绿色

2.3 使用静态资源

• 用法：比如图片直接引入在需要的地方加上即可

2.4 使用HMR

无需额外配置自动开启

3 Vite整体架构

3.1 关键技术：依赖预打包

为什么要进行预打包？

1. 避免node_moudles过多的文件请求
2. 将CommonJs格式转换为ESM格式

实现原理：

1. 服务器启动前扫描代码中用到的依赖
2. 用Esbuild对依赖代码进行滚预打包
3. 改写import语句，指定依赖为预构建产物路径

//改写前 import React from "react";

//改写后 import React from '/node_nodules/.vite/react.js'

3.2 关键技术：单文件编译

用Esbuild编译TS/JSX

优势： 编译速度提升10-100x

局限性：

• 不支持类型检查
• 不支持语法降级为ES5

3.3 关键技术：代码压缩

Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

3.4 关键技术：插件机制

开发阶段：使用Rollup插件机制

生产环境：直接使用Rollup

3.5 Vite插件开发

1. 服务启动阶段

   1. config
   2. configResolved
   3. options
   4. configureServer
   5. buildStart

2. 请求相应阶段

   • transformIndexHtml
   • resolveId => load => transform

3. 热更新阶段： handleHotUpdate

4. 服务关闭阶段

   1. buildEnd

   2. closeBundle