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

背景

为什么需要构建工具？

浏览器的标准，赶不上前端开发者的 ‘脑洞’

• 模块化，在前端构建上仍未形成统一
• 资源编译，工具链的集成成为了刚需
• 产物质量，考虑代码体积、性能、兼容性等问题
• 开发效率，不够高

前端构建工具的意义

传统构建工具的问题

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

瓶颈

• bundle 带来的性能开销
• JS语言的性能瓶颈（解释性、单线程等）

两大行业趋势

• 全球浏览器对原生ESM（ECMA Script Modules）的普遍支持
  • script标签增加type="module"属性，可以使用ESM模块导入导出语法
• 基于原生语言（Go、Rust）编写前端工具链
  • Go编写的Esbuild
  • Rust编写的SWC

Vite

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

底层重要引擎：esbuild、rollup.js

概述

组成

• No-bundle开发服务，源文件无需打包
• 生产环境基于Rollup的Bundle人

核心特征

• 高性能，dev启动速度和热更新速度快
• 简单易用，开箱即用，开发者体验好

针对行业趋势

• 基于原生ESM：Vite Dev Server
  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存
• 基于Esbuild：在Vite中被深度使用

整体架构

依赖预打包

• Why
  • 避免node_modules过多的文件请求
  • 将CommonJS格式转换为ESM格式
• How
  • 服务启动前扫描代码中用到的依赖
  • 用Esbuild对依赖进行打包
  • 改写import语句，指定依赖为预构建产物路径

单文件编译

• 用Esbuild编译TS/JSX
• 优势：编译速度大幅提升
• 不足：不支持类型检查和语法降级

代码压缩

• Esbuild作为默认压缩工具，替换传统的Terser Uglify.js等工具，压缩速度更快

插件机制

抽离出核心逻辑，实现解耦，易于扩展

• 开发阶段 => 模拟Rollup插件机制
• 生产环境 => 直接使用Rollup
• Vite插件可以用于开发和生产两个环节中
• 常见插件开发的Hook

Vite 进阶路线

• 代码分割（拆包）
• 语法安全降级
• SSR
• 底层标准（如CJS, ESM, HTTP2.0等）
• 社区生态