这是我参与「第四届青训营 」笔记创作活动的第七天
1.什么是vite？
Vite是一种新型前端构建工具，能够显著提升前端开发体验。
它主要由两部分组成：
- No-bundle开发服务，还有如速度快到惊人的模块热更新。
- 生产环境基于Rollup的Bundle。
核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
Vite 意在提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性，并有完整的类型支持。
内置的web构建能力
2.vite如何使用
-
使用npm:
$ npm init vite@latest -
使用yarn:
$ yarn create vite -
使用pnpm:
$ pnpm create vite
举例：使用pnpm初始化项目
1. 安装pnpm及预处理
//安装pnpm
npm i -g pnpm
//初始化命令
pnpm create vite
//安装依赖
pnpm install
//启动项目
npm run dev
2. 出入初始化数据
project name: xxxxx
select a framework: react
select a variant:
react-ts
3. 启动后截图
3.使用sass/scss & css modules
1.安装sass
pnpm i sass -D
2.
4.导入header组件
使用静态资源
以svg图片为例
5.模块热更新
Vite提供了一套原生ESM的HMR API。 具有HMR功能的框架可以利用该API提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。
无需额外配置，自动开启。
6.生产环境tree shaking
vite可以只在需要某个模块的时候动态（借助 import() ）的引入它，而不需要提前打包，虽然只能用在开发环境。
优化原理： 1.基于ESM的import/export语句依赖关系，与运行时状态无关 2.在构建阶段将未使用到的代码删除
无需额外配置，自动开启。
