这是我参与「第四届青训营」笔记创作活动的的第 12天

浅淡构建工具

前端工程的痛点

• 模块化

  1. 提供模块加载方案
  2. 兼容不同模块规范

• 资源编译

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

• 产物质量

  1. 产物压缩
  2. 无用代码删除
  3. 语法降级

• 开发效率

  • 热更新

Vite概要介绍

Vite 是什么

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

两大组成部分：

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

核心特征

1. 高性能，dev server 启动速度和热更新的速度非常快。因为 Vite 不需要打包，所以在启动和热更新时速度都提升了很多。
2. 简单易用，开发者体验好

当下问题

• 缓慢的启动 -> 项目编译等待成本高

• 缓慢的热更新 -> 修改代码后不能实时更新

• bundle 带来的性能开销。即在开发的过程中也进行项目的打包。

• JavaScript 语言本身的性能瓶颈。

Vite

项目初始化

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

Tree Shaking Vite 的 Tree Shaking 是基于 ESM 的 import/export 语句依赖关系的静态分析，与运行时的状态无关。

因此在构建阶段就会将没有使用到的代码删除，不会被打包进最终的产物代码中。

Tree Shaking 在 Vite 中也是默认开启的，无需配置。

Vite整体架构

为什么要进行预打包？

1. 避免 node_modules 过多的文件请求
2. 将 CommonJS 的格式转换为 ESM 的格式

实现原理：

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

单文件编译

Vite 使用 esbuild 编译 TS/JSX

优势

Vite 的编译速度提升 10-100x

局限性

不支持 TypeScript 类型检查

不支持将语法降级到 ES5