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

课堂笔记

视频地址

Vite 基本概要：掘金
Vite 上手实战与架构解析：掘金
Vite 进阶路线：掘金

ppt地址 ‍⁢⁡⁡⁣⁡‬‍⁢⁢‌⁡‬⁢⁣⁢⁡‍‌⁡⁢‬‍‬⁤⁣⁢‌⁤⁤⁢⁤‌⁢⁢⁤Vite 知识体系.pptx - 飞书云文档 (feishu.cn)

课程概览

本课程主要分为五个方面:

构建工具的意义
Vite 概览介绍
Vite 上手实战
Vite 整体架构
Vite 进阶路线

前期准备

安装 Node.js

可以选择以下一种方式：

从 Node.js 官网安装 nodejs.org/en/
Mac, Linux 环境可以使用 nvm 进行安装 github.com/nvm-sh/nvm NVM_NODEJS_ORG_MIRROR=npmmirror.com/mirrors/nod… nvm install 16

安装 pnpm

执行如下命令即可:

npm i -g pnpm

一、本堂课重点内容：

Vite介绍与实践

二、详细知识点介绍：

浅谈构建工具

前端构建工具的意义

模块化方案方面：
1.提供模块加载方案
2.兼容不同模块规范

语法转译方面：
1.高级语法转译，如 Sass、TypeScript
2.资源加载，如图片、字体、worker

产物质量：
1.产物压缩、无用代码删除、语法降级

开发效率：
1.热更新

Vite概要介绍

Vite 概览

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

两大组成部分：
1.No-bundle 开发服务，源文件无需打包
2.生产环境基于 Rollup 的 Bundler

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

当下问题

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

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

两大行业趋势

一、全球浏览器对原生 ESM 的普遍支持（目前占比 92 % 以上）

浏览器原生 ESM 支持的两大要素：
1.script 标签增加 type="module" 属性
2.使用 ESM 模块导入导出语法

基于原生 ESM 的开发服务优势：
1.无需打包项目源代码
2.天然的按需加载
3.可以利用文件级的浏览器缓存

二、基于原生语言（Go、Rust）编写前端编译工具链。如 Go 语言编写的 Esbuild、Rust 编写的 SWC

Esbuild ——基于 Golang 开发的前端工具，具备如下能力：
1.打包器 Bundler
2.编译器 Tranformer
3.压缩器 Minifier
性能极高，在 Vite 中被深度使用

内置的 Web 构建能力

Vite 开箱即用的功能等价于webpack、webpack-dev-server、css-loader、style-loader、less-loader、sass-loader、postcss-loader、file-loader、MiniCssExtractPlugin、HTMLWebpackPlugin...

Vite上手实战

项目初始化

#提前安装pnpm  
npm i -g pnpm  
#初始化命令  
pnpm create vite  
cd vite-project进入项目
#安装依赖
pnpm install
#启动项目
npm run dev

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

使用Sass / Scss & CSS Modules

#安装Sass
pnpm i sass -D

在src目录下新建文件夹components
在components文件夹下新建Header文件夹
在Header文件夹下新建index.tsx

index.tsx

import React from "react";

export function Header() {
    return <div>Header</div>
}

在App.tsx中引入Header组件

import{Header} from './components/Header'

<Header></Header>

重新启动服务

npm run dev

可以看到Header文字已经显示在页面中

接下来加入index.module.scss

在Header文件夹下新建index.module.scss

.header{
    color: red;
}

在index.tsx中引入

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

再次刷新页面可以看到Header字体颜色变红

最终目录结构为如下

使用静态资源

以svg图片为例

App.tsx

import reactLogo from './assets/react.svg'

<img src={reactLogo} className="logo react" alt="React logo" />

使用HMR

无需额外配置，自动开启
当点击按钮后按钮状态改变后，此时去修改其他组件，比如删掉Header，按钮的状态不会改变

生产环境Tree Shaking

无需配置，默认开启

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

Vite整体架构

依赖预打包

为什么要进行预打包：
1.避免 node_modules 过多的文件请求
2.将 CommonJS 格式转换为 ESM 格式

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

//改写前
import React from "React";
//改写后
import React from '/node_modules/.vite/react.js'

单文件编译

用 Esbuild 编译 TS/JSX

优势：
1.编译速度提升 10 - 100 倍

局限性：
1.不支持类型检查
2.不支持语法降级到 ES5

代码压缩

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

插件机制

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

三、引用参考：

前端入门——工具篇

Vite 知识体系 | 青训营笔记