这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
构建工具简介
核心要素：资源
资源的处理
-
模块化
- 提供模块加载方案
- 兼容不同模块规范
-
资源编译
- 高级语法转义，如 sass、ts 等
- 静态资源加载，如图片、字体、worker
-
产物质量
- 产物压缩
- 无用代码删除
- 语法降级
-
开发效率
- 热更新
vite 概述
定位
新一代前端构建工具
组成部分
No-bundle开发服务，源文件无需打包
生产环境基于 Rollup 的 Bundler
核心特征
高性能、dev启动速度和热更新速度非常快
简单易用，开发者体验好
行业趋势
现代浏览器对原生 ESM 的普遍支持
- script 标签 module 属性
<script type="module"></script> - 使用 ESM 模块语法
- 无需打包项目源代码、按需加载、文件级浏览器缓存
基于原生语言（Go、Rust）编写的前端编译工具链，如 Esbuild、swc 等
Esbuild 基于 Go 开发的前端工具
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
性能极高，被 vite 应用
Vite 项目实战
项目初始化
npm create vite@latest
npm install
npm run dev
添加其他依赖项
npm install sass -D
其他特性
SASS、SCSS、less、stylus
CSS modules
静态资源
HMR
Tree Shaking
项目开发
生产 npm run dev
构建 npm run build
Vite 整体架构
依赖预打包
避免 node_modules 过多的文件请求
将 commonjs 格式转换为 ESM 格式
单文件编译
使用 Esbuild 编译 TS、JSX
编译速度大幅提升
不支持类型检查
不支持语法降低为ES5
代码压缩
使用 ESbuild 作为默认压缩工具
插件机制
开发阶段 模拟 Rollup 插件机制
生产环境 直接使用 Rollup
Vite 进阶
双引擎
esbuild
rollup.js
插件开发
Vite 钩子 Hook
