这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

重点内容：

1. 为什么需要构建工具
2. Vite是什么

详细知识点：

为什么需要构建工具

前端工程的痛点：

1. 模块化 -> 提供模块加载方案；兼容不同模块规范
2. 资源编译 -> 高级语法转译，如Sass、TypeScript；资源加载，如图片、字体、woker
3. 产物质量 -> 产物压缩、无用代码删除、语法降级
4. 开发效率 -> 热更新

Vite是什么

前端构建工具，由No-bundle开发服务（源文件无需打包）和生产环境基于Rollup的Bundler两大部分组成。Vite主要解决了传统开发构建工具启动和更新慢的问题。主要通过esbuild预构建依赖让浏览器接管部分打包程序两种手段解决了这两个问题。

核心特征：

1. 高性能，dev启动速度和热更新速度非常快
2. 简单易用，开发体验好 -> 响应迅速，开箱即用

项目初始化：

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

生产环境Tree Shaking:
优化原理：

1. 基于ESM的import/export语句依赖关系，与运行状态无关
2. 在构建阶段将未使用到的代码进行删除
   *Tree Shaking在Vite中无需配置，默认开启

关键技术1：依赖预打包

• 避免node_modules过多的文件请求
• 讲CommonJs格式转换为ESM格式 实现原理：

1. 服务器启动前扫描代码中用到的依赖
2. 用Esbuild对以来代码进行预打包
3. 改写import语句，指定依赖为预构建产物路径

关键技术2：单文件编译

• 用Esbuild编译TS/JSX 优势：编译速度提升
  局限性：不支持类型检查，不支持语法降级到ES5

关键技术3：插件机制
开发阶段 -> 模拟Rollup插件机制
生产环境 -> 直接使用Rollup 特点：

• 抽离核心逻辑，易于拓展

通过上图中的Hook，我们可以在不同构建阶段插入自定义的逻辑

参考：

Vite入门教程
Vite教程 w3cshool