Vite

一、前端构建工具的意义

• 模块化方案：1.提供模块加载方案。 2.兼容不同模块规范。
• 语法转译：1.高级语法转译，如Sass、TypeScript。 2.资源加载，如图片、字体、worker。
• 产物质量：1.产物压缩、无用代码删除、语法降级。
• 开发效率：热更新。

二、Vite简介

2.1两大组成部分

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

2.2核心特征

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

//Vite能够使得启动加载的时间大大减少，节省时间，同时也压缩了更新时间，此外可以实现代码变更后的实时更新，大大提高了开发效率。

三、基于原生ESM的开发服务优势

• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

在开发Vite项目时，先初始化，用一系列命令进行初步的安装和初始化。

四、使用Sass/Scss&CSS Modules

//安装Sass
pnpm i sass -D

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

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

五、生产环境Tree Shaking

优化原理：

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

Tree Shaking在Vite中无需配置，默认开启。

总结：在本节课当中，我对于Vite有了初步了解，在此以前没有接触过Vite，从中学习到了如何给Vite项目初始化，学习到了Vite的实践优点，它的很多语法与之前所学的还是蛮相似的，最后，大概了解了它是怎么去写的。