这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
一、本堂课重点内容：
- vite介绍
- 为什么要使用vite，vite优势
- vite的基础用法
二、详细知识点介绍：
vite简单介绍
定位:新一代前端构建工具
Vite构建工具由两部分组成：
一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如模块热更新（HMR）。一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。总的来说，Vite希望提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性。
简单来说：
1.No-bundle开发服务，源文件无需打包
2.生产环境基于Rollup的Bundler
核心特征:
1.高性能，dev启动速度和热更新速度非常快!
2.简单易用，开发者体验好
为什么要使用vite：
1.基于原生的ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
2.基于esbuild的编译性能优化
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
3.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
#安装依赖
pnpm install
#启动项目
npm run dev
使用Sass/Scss& CSS Modules
pnpm i sass -D
index.tsx
import styLes from ' . /index . moduLe.scss' ;
//使用csS Modules模块化方案，防止className 命名冲突
export function Header() {
return <p className={styLes.header}>This is Header</p>
};
index.module.scss
.header{
color:red
}
使用Scss&CSS.Modules
引入Header组件
import { Header } from "./components/Header";
function App() {
return (
<div>
<Header />
</div>
);
}
export default App;
使用静态资源
以svg图片为例
import { Header } from "./components/Header";
import LogoUrL from './logo.svg';
function App() {
return (
<div>
<Header />
<img src={logoUrl} alt="" />
</div>
);
}
export default App;
除了常见的图片格式，Vite 也内置了对于JSON、Worker、 WASM资源的加载支持
使用HMR
HMR在vite中无需配置，自动开启
生产环境Tree-shaking
优化原理:
-
基于ESM的import/export语句依赖关系，与运行时状态无关
-
在构建阶段将未使用到的代码进行删除
Tree Shaking在Vite中无需配置，默认开启!
四、课后个人总结：
本次学习了vite的一些基本运用，和webpack对比，在服务器启动上确实会快很多，且不需要打包，Vite的使用简单，只需执行初始化命令，就可以得到一个预设好的开发环境，开箱即获得一堆功能，快去尝试尝试！
