一、概要
1.vite概览
（1）定位：新一代前端构建工具
（2）两大组成部分
- No-bundle开发服务（NodeJs的devserver），源文件无需打包（与传统工具最大的不同）
- 生产环境基于Rollup的Bundler，将所有代码进行打包
（3）核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
2.对比
（1）Rollup -> Vite
- 启动时间:2分15秒->1.7秒
- 更新时间:23秒->1秒以内
（2）Webpack -> Vite
- 启动时间:2分36秒->6秒
- 热更新：13秒->1秒以内
3.当下问题
（1）开发体验问题
缓慢的启动->项目编译等待成本高
缓慢的热更新->修改代码后不能实时更新
（2）瓶颈
bundle打包带来的性能开销
JavaScript语言的性能瓶颈
4.两大行业趋势
（1）全球浏览器对原生ESM的普遍支持(目前占比92%以上)
（2）基于原生语言(Go、Rust)编写前端编译工具链 如Go语言编写的Esbuild、Rust 编写的SWC
5.浏览器原生ESM支持
（1）两大要素
- script标签增加type="module”属性
- ESM模块导入导出语法
代码样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test esm</title>
</head>
<body>
<script type="module">
import { foo } from './foo.js'
console.log(foo);
</script>
</body>
</html>
export const foo = "foo";
6.基于原生ESM的开发服务优势
（1）无需打包项目源代码
（2）天然的按需加载
（3）可以利用文件级的浏览器缓存
7.### 基于Esbuild的编译性能优化
（1）Esbuild：基于Golang开发的前端工具,具备如下能力
- 打包器Bundler：对应webpack的工作
- 编译器Transformer
- 压缩器Minifier
（2）性能极高，在Vite 中被深度使用
8.内置的web构建能力
（1）Vite开箱即用的功能等价于webpack、webpack-dev-server、css-loader、style-loader、less-loader、sass-loader、postcss-loader、file-loader、MiniCssExtractPlugin、HTMLWebpackPlugin
（2）可以看出：vite是对常见web开发的需求进行一个封装
二、使用Vite
1.项目初始化
安装pnpm
#提前安装 pnpm
npm i -g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
pnpm run dev
2.使用Sass/Scss & CSS Modules
安装sass
pnpm install sass -D
编写index.tsx文件
import React from "react";
export function Header(){
return <div>Header</div>
}
在App.tsx文件引入，使用
import { Header } from './components/Header'
// 在App()中使用
<Header></Header>
叠加sass、css-module，编写样式
.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>;
}
3.使用静态资源
静态资源在vite可以直接引入使用
4.HMR
可以保存组件的局部状态，当改变index下的内容时，App下的count值会保留
5.生产环境Tree Shaking
优化原理：
1.基于ESM的import/export语句依赖关系与运行时的状态无关
2.在构建阶段将无用代码删除
3.Tree Shaking在vite中无需配置，自动开启
