Vite体系知识
1 浅谈构建工具
为什么需要构建工具？
1.1 前端工程的痛点
核心要素——资源
模块化、资源编译、产物质量和开发效率
1.2 前端构建工具的意义
- 模块化方案 ——> 1.提供模块加载方案；兼容不同的模块规范
- 语法转义 ——> 1.高级语法转义，如Sass、TypeScript；2.资源加载，如图片、字体、worker
- 产物质量 ——> 产物压缩、无用代码删除、语法降级
- 开发效率 ——> 热更新
2 Vite概要介绍
Vite概览
Vite中文网：vitejs.cn/
- 定位：新一代前端构建工具
- 两大组成部分：1.No-bundle开发服务，源文件无需打包；2.生产环境基于Rollup的Bundler
- 核心特性：1.高性能，dev启动速度和热更新速度非常快；2.简单易用，开发者体验好
- 两大行业趋势
两大行业趋势
- 全球浏览器对原生ESM的普遍支持
// foo.js
export const foo = 'foo'
// index.html
<!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>
- 基于原生语言（Go、Rust）编写前端工具链(Esbuild、SWC)
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
………
3 Vite上手实战
# 提前安装
npm i -g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev
使用HMR
无需额外配置，自动开启
生产环境Tree Shaking
Vite直观印象
- 响应迅速
- 开箱即用
4 Vite整体进阶
关键技术：
- 依赖预打包
- 单文件编译
- 代码压缩
- 插件机制
5 Vite进阶路线
深入双引擎
- esbuild
- rollup.js
先了解基本使用，手动尝试各项常用配置；然后学习其插件开发
插件开发
抽离核心逻辑+易于扩展
- 插件示例
// Vite插件示例
const fileRegex = /\.(my-file-ext)$/
export default function myPlugin(){
return {
name: 'transform-file',
transform(src, id){
if(fileRegex.test(id)){
return {
code: complieFileToJS(src),
map: null //如果可行将提供source map
}
}
}
}
}
// 使用插件
// vite.config.js
import plug feom './myPlugin'
export default defineConfig({
plugins: [plugin()]
})
Vite插件开发文档：cn.vitejs.dev/guide/api-p…
