Vite 知识体系 | 青训营笔记

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

构建工具

为什么需要构建工具

前端工程痛点：

• 模块化
  • ESM、CommonJS、UMD
• 资源编译
  • 高级语法的编译
• 产物质量
  • 代码体积、代码性能
• 开发效率
  • 热更新

前端构建工具的意义

基本概要

什么是Vite

• 定位：新一代前端构建工具
• 两大组成部分
  • No-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup的Bundler
• 核心特征
  • 高性能：dev启动速度和热更新速度非常快
  • 简单易用，开发者体验好

案例

当下问题

• 缓慢的热更新 -> 修改代码后不能实时更新
• 缓慢的启动 -> 项目编译等待成本高
• 瓶颈在那里？
  • bundle带来的性能开销
  • JS语言的性能瓶颈

两大行业趋势

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

  • 两大要素
    • script标签增加type="module"属性
    • 使用ESM模块导入导出语法
  • 基于原生ESM的开发服务优势
    • 无需打包项目源代码
    • 天然的按需加载
    • 可以利用文件级的浏览器缓存

• 基于原生语言(go，rust)编写前端编译工具链

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

• 基于Esbuild的编译性能优化--基于Golang开发的前端工具

  • 打包器Bundle
  • 编译器Transformer 性能极高---被Vite深度采用
  • 压缩器Minifier

内置的Web构建能力

上手实战

项目初始化

使用Sass/Scss & CSS Modules

使用静态资源

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

使用HMR

无需额外配置，自动开启

生产环境Tree Shaking

优化原理：

• 基于ESM的 import/export 语句依赖关系，与运行时状态无关
• 在构建阶段将未使用到的代码进行删除
• CommonJS 不能做到 TreeShaking
• require 的部分可能依赖运行时计算的结果
• 无需配置，默认开启

整体架构

关键技术-依赖预打包

为什么要进行预打包

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

实现原理：

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

关键技术-单文件编译

用Esbuild编译TS/JSX

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

• 不支持类型检查
• 不支持语法降级到ES5---只能降到ES6

关键技术-代码压缩

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

关键技术-插件机制

开发阶段 -> 模拟 Rollup 插件机制 生产环境 -> 直接使用 Rollup

插件兼容性具体可查阅

进阶路线

深入双引擎

参考资料：

• Esbuild
• Rollup

推荐学习顺序：

• 先了解基本使用，动手尝试各项常用配置
• 然后学习其插件开发

为什么需要插件机制

• 抽离核心逻辑
• 易于拓展

插件开发

通过上述的 hook，我们可以在不同的构建阶段插入自定义的逻辑

插件示例：

开发插件：

配置文件引入插件：

先看文档，过一遍插件钩子的功能， 然后多学习其他插件的实现，掌握套路

参考资料： Vite插件开发文档 复杂度较低的插件：json加载 复杂度中等的插件：Esbuild接入

代码分割(拆包)

拆包前：

拆包后：

问题：

• 无法进行并发请求
• 缓存复用率低

参考资料： build.rollupOptions 资料二

JS 编译工具(Babel)

出现的原因：

• JS语法标准繁多，浏览器支持程度不一
• 开发者需要用到高级语法

参考资料： babel官网站点 babel插件手册

语法安全降级

以Promise为例，IE11没有支持

如何在构建产物中避免这类问题？

• 上层解决方案：@vitejs/plugin-legacy
• 底层原理
  • 借助babel进行语法自动降级
  • 提前注入Polyfill实现，如core-js、regenerator-runtime

参考资料： @babel/preset-env文档 Vite官方降级插件文档

服务端渲染(SSR)

一种常见的渲染模式，用于提升首屏性能和SEO优化

构建阶段

代码执行阶段

参考资料： Vite-SSR文档 使用Vite搭建SSR项目

深入了解底层标准

重点特性：

• CJS规范
• ESM规范
• HTTP2.0特性

参考资料： 01 02 什么是PureESM

Vite社区生态

官方提供插件：

• @vitejs/plugin-vue 提供Vue3支持
• @vitejs/plugin-vue-jsx 提供Vue3 JSX支持
• @vitejs/plugin-react 提供React支持
• @vitejs/plugin-legacy 提供低版本浏览器降级支持

海量社区插件

众多框架内置：

• Nuxt
• SvelteKit
• Astro
• Vitepress