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

Vite上手实战与架构解析

项目初始化

Vite项目初始化

#提前安装pnpm
npmi-gpnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
npm run dev

输入初始化参数

√ Project name: ... vite-project
√ SeLect a f ramework : > react
? Select a variant: > - Use arrow-keys. Return to submit.
    react
>   react-ts

启动后 启动完成后，打开浏览器访问对应地址即可

命令

dev命令：开发阶段启动DevServer
bulid命令：用在生产环境下进行项目的打包，底层是Roolup
preview命令：通过生产模式打包出最后的产物之后，怎么预览产物的内容

使用Sass/Scss & CSS Module

目录结构

安装Sass

pnmp i sass -D

index.tsx

import styLes from ' ./index. module.scss' ;
//使用CSS Modules 模块化方案，防止className 命名冲突
export function Header() {
    return <p className={styles . header}>This is Header</p>
};

index.module.scss

.header {
color: red;
}

引入Header组件

//App.tsx
import { Header } from "./components/Header";
function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

export default App;

除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持

使用HMR，无需额外配置，自动开启

生产环境Tree Shaking

优化原理

基于ESM的import/export语句依赖关系，与运行时状态无关
在构建阶段将未使用到的代码进行删除

Tree Shaking在Vite中无需配置，默认开启! CommonJS 格式不能做到Tree Shaking，require 的部分可能依赖运行时计算的结果。

对Vite最直观的印象

响应迅速
开箱即用

Vite整体架构

关键技术：单文件编译

用Esbuild编译TS/JSX

优势: 编译速度提升10-100 x
局限性:
- 不支持类型检查
- 不支持语法降级到ES5

关键技术：代码压缩

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

关键技术：插件机制

开发阶段->模拟Rollup插件机制
生产环境->直接使用Rollup

Vite 的热加载原理

其实就是在客户端与服务端建立了一个 websocket 连接，当代码被修改时，服务端发送消息通知客户端去请求修改模块的代码，完成热更新。

服务端：服务端做的就是监听代码文件的改变，在合适的时机向客户端发送 websocket 信息通知客户端去请求新的模块代码。
客户端：Vite 中客户端的 websocket 相关代码在处理 html 同时被写入代码中。可以看到在处理 html 时，vite/client 的相关代码已经被插入。

深入双引擎

Esbuild官方文档 Rollup官方文档推荐学习顺序:

先了解基本使用，动手尝试各项常用配置;
然后学习其插件开发。

Vite知识体系二 | 青训营笔记