Vite | 青训营笔记

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

为什么需要构建工具

前端构建工具的意义

• 模块化方案

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

• 语法转译

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

• 产物质量

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

• 开发效率

  热更新

Vite入门

组成部分：

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

核心特征：

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

如何使用Vite

项目初始化

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

• 静态资源

  vite支持常见的图片格式，除此之外Vite也内置了对于JSON、Worker、WASM资源的加载支持

• HMR

  无需配置，默认开启

• Tree-Shaking

  无需配置，默认开启

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

整体架构

关键技术：

• 预打包

  • 为什么？

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

  • 实现原理：

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

• 单文件编译

  用Esbuild编译TS / JSX

  • 优势

    编译速度大幅提升

  • 局限

    1. 不支持类型检查

    2. 不支持语法降级

• 代码压缩

  使用Esbuild作为代码压缩工具

• 插件

  开发环境：模拟Rollup插件机制

  生产环境：直接使用Rollup

Vite进阶

插件开发

1. 服务启动阶段
   1. config
   2. configResolved
   3. options
   4. configureServer
   5. buildStart
2. 请求响应阶段
   1. transformIndexHtml
   2. resolveId
   3. load
   4. transform
3. 热更新阶段
   1. handleHotUpdate
4. 服务关闭阶段
   1. buildEnd
   2. closeBundle

代码分割（拆包）

vite中文

Rollup

JS编译工具

Babel

SSR

vite中文