[陈同学i前端] 一起学Vite｜初识下一代的前端工具链

charlex
1,085 阅读8分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

大家好，我是陈同学，一枚野生前端开发者，感谢各位的点赞、收藏、评论

近年来，前端领域技术更新迭代节奏较快，前端工程师们为了更好的进行项目开发、测试、构建、部署，开发出了各种各样的构建工具

像常见的Webpack、Rollup、Esbuild、Vite，每一类工具都有它的特点，均致力于提高前端领域的工程化水平

而工具出现的目标是解决前端工程当中的一些影响通性问题

常见的痛点（需求点）有：模块化需求（ESM）、兼容高级语法、代码质量测试、静态资源处理、代码压缩、开发效率等

而最近在访问Vite仓库时发现已经有了v4.0.0-alpha版本，不禁感叹前端技术工具迭代速度之快，要知道v3.0发布至今才短短4个月时间

作为一名具有技术情怀的前端技术人，在2022年的今天有必要对Vite的实现思考进行学习，时刻保持技术敏感跟上时代发展

故这个月本人利用业余时间研究了一下v3.0版本的Vite源码，现通过系列文章的形式与大家一起分享、学习

从本节文章开始我们将一步一步学习Vite知识，具体安排如下：

  • 一起学Vite｜初识下一代的前端工具链（本节）
  • 一起学Vite｜原来这玩意叫依赖预构建
  • 一起学Vite｜实现第一个Vite插件
  • 一起学Vite｜插件流水线
  • 一起学Vite｜HMR，你好👋
  • 一起学Vite｜模块联邦——代码共享的终极解决方案
  • 一起学Vite｜简单手写开发服务器
  • 一起学Vite｜简单手写打包器
  • 一起学Vite｜v4新增了啥

本文阅读成本与收益如下：

阅读耗时：5mins

全文字数：4k+

预期效益

  • 知道Vite是什么
  • 了解Vite优势
  • 通过Vite快速初始化应用

Vite是什么

Vite是由原生ESM驱动并提供no-bundle开发服务的新型前端构建工具

组成：

  • 一个开发服务器，基于 原生 ES 模块、no-bundle 提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）

  • 一套构建指令，使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

为什么需要Vite

在前端发展越来越成熟的今天，当我们开始构建越来越大型的应用时，需要处理的 JavaScript、Typescript等代码量呈指数级增长，包含成百上千个模块的中大型项目变得普遍

基于JavaScript开发的工具就会开始遇到性能瓶颈：

启动服务器缓慢：冷启动阶段，因为需要对项目进行完整的冷构建流程，将所有的模块与依赖进行打包，最终导致启动开发服务器耗时较长

热更新更新缓慢：使用模块热替换（Hot Module Replacement），文件修改后的效果需要数秒才能在浏览器中反映出来，对开发者产生了不同程度的影响

而Vite能够利用了前端生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且新发展起来的JavaScript工具部分使用编译型语言编写

Vite的特性

  1. 极速的服务启动：使用原生ESM文件，无需打包

在开发阶段Vite采用esbuild（编译型语言）进行依赖预构建的速度极快（比以 JavaScript 编写的打包器预构建依赖快 10-100 倍），最终将项目中用到的所有第三方依赖模块在预构建时统一成esm格式

并且基于no-bundle的概念无需在冷启动阶段对源码进行处理（bundle），Vite只需要在浏览器请求源码时进行转换并按需提供源码，根据情景动态导入代码（实际使用时才会被处理）

  1. 轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热替换（HMR）

源码-通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）

而基于打包器在源码变动后重建整个包的效率非常低，更新速度会随着应用体积增长而直线下降

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

  1. 丰富的功能：对TypeScript、Vue、JSX、CSS、JSON等支持开箱即用

Vite内置多种格式文件的转译逻辑，开发者可以在模块中直接import已经支持的格式文件

  1. 优化的构建：可选“多页应用”或“库”模式的预配置Rollup构建

Vite构建过程默认会包含三个功能逻辑：

  • CSS 代码分割

  • 预加载指令生成

  • 异步 Chunk 加载优化

  1. 通用的插件：在开发和构建之间共享Rollup-superset插件接口

Vite 用户可以利用 Rollup 插件的强大生态系统，同时通过Vite的特有插件实现别样的功能

  1. 完全类型化的API：灵活的API和完整的TypeScript类型

Vite的环境适用相关

开发环境下：

  • 基于浏览器ESM特性进行开发，无需像Webpack等构建工具在冷启动阶段需要将所有的源码进行打包，只需进行一次依赖预构建流程将第三方库代码统一处理成ESM格式

  • 由Vite启动的开发服务器需要搭配支持原生ESM导入的现代浏览器使用，如：Chrome

生产环境下：

  • 能支持原生 ESM 语法的 script 标签、原生 ESM 动态导入 和 import.meta 的浏览器，传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持

默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfill

  • 由Rollup工具进行打包构建产物

Vite的优势

开发效率高

核心：no-bundle概念驱动的开发服务器

服务器启动无需对源码进行打包构建，只需要执行依赖预构建流程将第三方库代码统一成ESM格式模块文件

20221124154619

服务器会在收到源码请求访问后进行转换并按需提供源码，根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理

20221124154559

使用门槛低

核心：与框架解耦，通过保姆式cli工具🔧以及友好交互帮助用户快速完成项目搭建

提供Svelte、Vue、React等快速初始化项目模版，使用一条shell命令即可生成一个基本的前端工程项目目录，无需进行任何复杂配置

社区资源丰富

核心：经过几年的发展，全球范围内形成了巨大的社区氛围并有众多开发者共建社区

Vite的Github社区：github.com/vitejs/vite…

Vite的Discord社区：discord.com/invite/aYVN…

与Vite相关的精彩内容：github.com/vitejs/awes…

完善的插件机制

核心：插件机制与Rollup深度融合

Vite插件 是 Rollup 插件接口的一种扩展

复用Rollup成熟的插件设计体制以及插件社区资源，原本Rollup社区的成员可以低成本迁移构建工具

同时Vite官方提供了官方插件、社区插件专栏，方便开发者插件应对复杂的项目场景

Vite快速初始化项目

  • 安装NPM

若已安装则忽略此步骤

安装包下载地址：nodejs.org/en/download…

  • 初始化项目

在工作目录下运行项目初始化命令

npm create vite@latest

20221123213516

根据命令提示进行操作

  • 查看新项目的目录结构

这里选择了Vue-template

20221123212740

  • vite.config.ts

20221123213257

根据在初始化项目时选择的不同版本的template，此处会引入不一样的插件加入到构建流程中

  • 启动开发服务
npm run dev

20221123213716

打开浏览器访问对应的本地端口即可看到由Vite驱动的服务器返回的结果

20221123213754

讲到最后

本节文章篇幅较短，主要目的是让读者对Vite有基本的认识与了解，后面会有系列文章拆解Vite的具体实现

尽情各位技术同学期待！！！

谢谢大家，我们下节再见！！！

感谢各位看到这里，如果你觉得本节内容还不错的话，欢迎各位的点赞、收藏、评论，大家的支持是我做内容的最大动力

本文为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利

参考补充

Vue3文档

Vite官方文档

Rollup官方文档

Esbuild官方文档

avatar
文章
阅读
粉丝