vite 知识体系 | 青训营笔记

汪away
230 阅读4分钟

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

Vite 知识体系

一、前端构建工具的意义

image.png

二、Why Vite？

Vite 概览

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

⭐ 两大组成部分:

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

⭐ 核心特征

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

业界案例

Rollip -> Vite

image.png

⭐ 启动时间：2分15秒 -> 17秒

⭐ 更新时间：23秒 -> 1秒以内

Webpack -> Vite

image.png

⭐ 启动时间：2分36秒 -> 6秒

⭐ 热更新时间：13秒 -> 1秒以内

当下问题

image.png

😢 缓慢的启动 -> 项目编译等待成本高

😢 缓慢的热更新 -> 修改代码后不能实时更新

😢 bundle 带来的性能开销

😢 JavaScript 语言的性能瓶颈

原生 CSM

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

两大要素

  1. script 标签增加 type="module"属性
  2. 使用 ESM 模块导入导出语法

开发服务优势

image.png

⭐ 无需打包项目源代码

⭐ 天然的按需加载

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

基于 Esbuild 的编译性能优化

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

image.png

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

  1. 打包器 Bundler
  2. 编译器 Transformer
  3. 压缩器 Minifier

内置的 Web 构建能力

Vite 开箱即用的功能等价于：webpack、webpack-dev-server、css-loader、style-loader、less-loader、sass-loader、postcss-loader、file-loader、MiniCssExtractPlugin、HTMLWebpackPlugin...

Webpack.config.ts

image.png

vite.config.ts

image.png

三、Vite 上手使用

项目初始化

  1. 提前安装 pnpm：npm i -g pnpm
  2. 初始化命令：pnpm create vite
  3. 输入初始化参数
image.png
  1. 安装依赖：pnpm install
  2. 启动项目：npm run dev
  3. 启动后截图
image.png

使用 Sass/Scss & CSS Modules

image.png

👇 引入 Header 组件

image.png

使用静态资源

image.png

HMR 和 生产环境 Tree Shaking

⭐ 二者在 Vite 中无需配置，默认开启

⭐ Tree shaking 优化原理：

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

四、Vite 整体架构

image.png

依赖预打包

image.png

❓ 为什么要进行预打包？

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

⭐ 实现原理:

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

单文件编译：用 Esbuild 编译 TS/JSX

image.png image.png

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

😢 不支持类型检查

😢 不支持语法降级到 ES5

代码压缩

image.png

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

image.png

插件机制

image.png

⭐ 开发阶段 -> 模拟 Rollup 插件机制

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

⭐ 插件兼容性具体可查阅Vite Rollup Plugins

五、Vite 进阶路线

深入双引擎

image.png

⭐ 参考资料

  1. esbuild - API
  2. rollup.js

⭐ 推荐学习顺序

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

Vite 插件开发

为什么需要插件机制？

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

Hook

image.png

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

示例

  1. 开发 Vite 插件
image.png
  1. 配置文件引入插件
image.png

⭐ 参考资料

  1. vite插件开发文档
  2. 复杂度较低的插件：json 加载插件
  3. 复杂度中等的插件：Esbuild 接入插件
  4. 复杂度较高的插件：官方 React 插件

⭐ 推荐学习顺序

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

代码分割（拆包）

⭐ 拆包前 image.png

⭐ 问题

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

⭐ 拆包后

image.png

⭐ 参考资料

  1. cn.vitejs.dev
  2. rollup.js

JS 编译工具(Babel)

出现的原因：

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

⭐ 参考资料

  1. Babel 官方站点
  2. babel 插件手册

语法安全降级

以 Promise 语法为例，IE11 没有支持

image.png image.png

⭐ 参考资料

  1. @babel/preset-env 文档
  2. vite 官方降级插件文档

服务端渲染(SSR)

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

⭐ 构建阶段

image.png

⭐ 代码执行阶段

image.png

深入了解底层标准

重点特性：

  • CJS 规范
  • ESM 规范
  • HTTP 2.0 特性
image.png

⭐ 参考资料

  1. ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog
  2. Publish ESM and CJS in a single package
  3. 什么是 PureESM

Vite 社区生态

⭐ Github 40k+ star（可参考 webpack 61.3 K，rollup 21.8 k)，并且目前还在持续维护

⭐ 官方提供插件:

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

⭐ 海量社区插件：GitHub - vitejs/awesome-vite

⭐ 众多框架内置

image.png
avatar
文章
阅读
粉丝