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

01. 浅淡构建工具

前端程序员的痛

• 模块化

  • ESM、CommonJS、UMD

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

• 资源编译

  • 高级语法的编译

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

• 产物质量

  • 代码体积、代码性能

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

• 开发效率

  • 热更新

02. Vite概要介绍

Vite 是什么？Why Vite？

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

两大组成部分：

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

核心特征

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

业界案例

当下问题

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

瓶颈在哪里？

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

内置的Web构建能力

Vite开箱即用的功能等价于

• webpack
• webpack-dev-server
• css-loader
• style-loader
• less-loader
• sass-loader
• postcss-loader
• file-loader
• MiniCssExtractPlugin
• HTMLWebpackPlugin
• ...

03. Vite上手实b战

Vite 上手使用

项目初始化

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

生产环境 Tree Shaking

优化原理：

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

04. Vite整体架构

为什么要进行预打包？

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

实现原理：

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

使用 Esbuild 编译 TS/JSX

优势：编译速度提升10-100x

局限性：

• 不支持类型检查
• 不支持语法降级到ES5
• 太过于先进