一、构建工具

1.模块化——ESM、CommonJS、UMD

• 提供模块加载方案
• 兼容不同模板规范

2.资源编译——高级语法的编译

• 高级语法的转译，如Sass、TypeScript
• 资源加载，如图片、字体、worker

3.产物质量——代码体积、代码性能

• 产物压缩、无用代码删除
• 语法降级

4.开发效率——热更新

• 热更新

二、Vite 概要

定位： 新一代前端构建工具

两大组成部分：

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

核心特征：

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

当下问题：

• 缓慢的启动 ——> 项目编译等待成本高
• 缓慢的热更新 ——> 修改代码后不能实时更新

瓶颈：

• bundle 带来的性能开销
• JavaScript 语言的性能瓶颈

两大行业趋势：

• 全球浏览器对原生 ESM 的普遍支持（目前占比92% 以上）
• 基于原生语言（Go、Rust）编写前端编译工具链
• 如 Go 语言编写的 Esbuild、Rust 编写的 SWC

浏览器原生 ESM 支持——两大要素：

• script 标签增加 type = "module" 属性
• 使用 ESM 模块导入导出语法

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

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

Esbuild的编译性能优化——基于 Golang 开发的前端工具，具备如下能力：

1. 打包器 Bundler
2. 编译器 Transformer （性能极高，在Vite中被深度使用）
3. 压缩器 Minifier

三、Vite 的使用

项目初始化

# 提前安装 pnpm
npm i -g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
nom run dev

使用 Sass/Scss & CSS Modules

生产环境 Tree Shaking 优化原理：

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