Vite 体系 | 青训营笔记

Desain
88 阅读4分钟

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

前端核心要素——资源：js，ts，jsx，css 等等

  • 模块化：ESM，CommonJS，UMD

  • 资源编译：高级语法的编译。浏览器本身并不认识一些高级的语法，需要先编译

  • 产物质量：代码体积、代码性能、兼容性（对移动端的兼容、对低版本浏览器的兼容）

  • 开发效率：改动代码后立刻看到新效果

前端构建工具的意义

  • 1.模块化方案：

    • 提供模块加载方案
    • 兼容不同模块规范

  • 2.语法转移

    • 能够进行高级语法的转义，如Sass、TypeScript等
    • 更加便捷的资源加载，如图片、字体、worker等

  • 3.产物质量

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

  • 开发效率

    • 热更新（HMR），能够在改动代码后立即看到代码效果

Vite概要

定位：下一代前端开发与构建工具

  • 两大组成部分

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

  • 核心特征

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

  • 传统构建工具(webpack，rollup)存在的问题

    • 启动缓慢导致项目编译等待成本高

      当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。

    • 热更新缓慢使得修改代码后不能实时更新

  • 瓶颈存在的原因

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

  • 两大行业趋势

    • 浏览器实现对原生ESM的普遍支持

      1. script标签增加type="module"属性

      2. 使用ESM模板导入导出语法

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

优势：

  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存

基于原生语言(Go、Rust)编写前端编译工具链；如Go编写的Esbuild、Rust编写的SWC

esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

Esbuild具备如下能力：

  1. 打包器Bundler->对标webpack
  2. 编译器Transformer->对标Babel
  3. 压缩器Minifier->Tensor、uglyfyjs

Vite实战

  • vite项目初始化：
#初始化命令
npm create vite
#安装依赖
npm install
#启动项目
npm run dev

  • 使用Sass/Scss & CSS Modules

  • 使用静态资源

    Vite内置了对于JSON、Worker、WASM资源的加载支持

  • 使用HMR

    能部分保留组件的内容并进行热更新

  • 生产环境Tree Shaking

    1. 基于ESM的import/export语句依赖关系，与运行时状态无关

    2. 在构建阶段 Tree Shaking 会删除未使用到的代码

vite最直观的印象：响应迅速、开箱即用

Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

  • 依赖 大多为在开发时不会变动的纯 JavaScript。

  • 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。

Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

关键技术1：依赖预打包

为什么要进行预打包？

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

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

image.png 实现原理:

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

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

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

image.png

关键技术2：单文件编译

使用Esbuild编译TS/JSX

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

局限性：

1.不支持类型检查

2.不支持语法降级到ES5

关键技术3：代码压缩

将Esbuild作为默认压缩工具，代替terser\Uglify.js等压缩工具

关键技术4：插件机制

在开发阶段模拟Rollup插件机制

在生产阶段直接使用Rollup

在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。

一旦你体验到 Vite 的神速，你是否愿意再忍受像曾经那样使用打包器开发就要打上一个大大的问号了。

avatar
文章
阅读
粉丝