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

前端与Vite

1、Vite是什么

（1）定位

新一代前端构建工具

（2）两大组成部分

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

（3）核心特征

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

（4）优点

极速的服务启动，使用原生 ESM 文件，无需打包。
轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）
丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用。
优化的构建，可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。
完全类型化的API，灵活的 API 和完整 TypeScript 类型。

2、Vite整体架构

（1）关键技术：依赖预打包

为什么要进行预打包

1.避免node_modules过多的文件请求

2.将CommonJS格式转换为ESM格式

实现原理:

1.服务启动前扫描代码中用到的依赖

2.用Esbuild对依赖代码进行预打包

3.改写import语句指定依赖为预构建产物路径

（2）关键技术：单文件编译

用Esbuild编译TS/JSX

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

局限性：

不支持类型检查

不支持语法降级到ES5

（3）关键技术：代码压缩

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

（4）关键技术：插件机制

开发阶段->模拟Rollup插件机制

生产环境->直接使用Rollup

3、Vite启动项目步骤

初始化命令

vite_course pnpm create vite

输入项目名称

Project name: vite-project

选择framwork

选项有常见框架 vanille、vue、react、preact、lit、svelte

Select a framwork:

现在选择框架和语言

react-ts（react框架，集成typescript支持）

使用cd命令进入项目

vite_course cd vite-project

安装项目依赖

vite-project pnpm install

启动项目

vite-project pnpm run dev

安装开发依赖sass dev dependence

vite-project pnpm install sass -D

新建文件components/Header
新建components/Header下面文件index.tsx
在文件中编写代码

4、Vite上手使用

项目初始化
使用Sass/Scss & CSS Modules
使用静态资源
使用HMR
生产环境：Tree Shaking

Tree Shaking只能用于ESM，静态资源
Tree Shaking默认开启，是基于rollup功能底层实现

前端与Vite ｜ 青训营笔记