初识 Vite|青训营笔记

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

本堂课重点内容

• Vite 概述

详细知识点介绍

前端构建工具的意义

• 模块化方案

  1. 提供模块加载方案

  2. 兼容不同模块规范

• 语法转移

  1. 高级语法转译，如 Sass、TypeScript

  2. 资源加载，如图片、字体、worker

• 产物质量

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

• 开发效率

  热更新

当下问题

开发体验问题日渐显露

• 缓慢的启动

  项目编译等待成本高

• 缓慢的热更新

  修改代码后不能实时更新

• 瓶颈

  1. bundle 带来的性能开销

  2. JavaScript 语言的性能瓶颈

行业趋势

• 全球浏览器对原生 ESM 的普遍支持(目前占比92%以上)

• 基于原生语言(Go、Rust)编写前端编译工具链

• 如 Go 语言编写的 Esbuild、 Rust 编写的 SWC

Vite 概述

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

两大组成部分：

1. No — bundle 开发服务，源文件无需打包

2. 生产环境基于 Rollup 的 Bundler

核心特征：

1. 高性能.，dev 启动速度和热更新速度非常快

2. 简单易用，开发者体验好

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

• 无需打包项目源码

• 天然的按需加载

• 可以利用文件级的浏览器缓存

基于 Esbuild 的编译性能优化

Esbuild—基于 Golang 开发的前端工具,具备如下能力:

1. 打包器 Bundler

2. 编译器 Transformer

3. 压缩器 Minifier

性能极高，在 Vite 中被深度使用

Vite 整体架构

依赖预打包

为什么要进行预打包？

1. 避免 node_modules 过多的文件请求

2. 将 CommonJS 格式转换为 ESM 格式

实现原理：

1. 服务启动前扫描代码中用到的依赖

2. 用 Esbuild 对依赖代码进行预打包

3. 改写 import 语句，指定依赖为预构建产物路径

单文件编译

用 Esbuild 编译 TS/JSX

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

局限性：

• 不支持类型检查

• 不支持语法降级到 ES5

代码压缩

Esbuild 作为默认压缩工具，替换传统的 Terser 、Uglify.js 等压缩工具

插件机制

• 开发环境 -> 模拟 Rollup 插件机制

• 生产环境 -> 直接使用 Rollup

课后个人总结

Vite 是一款22年以来的热门前端构建工具，其性能与 webpack 很相似，但在某些方面， Vite 比 webpack更有优势，因此， Vite 顺理成章成为了下一代的前端开发工具的代名词。如果你想在未来几年有更好的发展空间，那么最好尽早学会 Vite。

引用参考

第四届字节跳动青训营「Vite 知识体系」课程