theme: smartblue
开启掘金成长之旅！这是我参与「掘金日新计划 · 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的特性
- 极速的服务启动：使用原生
ESM文件，无需打包
在开发阶段Vite采用esbuild（编译型语言）进行依赖预构建的速度极快（比以 JavaScript 编写的打包器预构建依赖快 10-100 倍），最终将项目中用到的所有第三方依赖模块在预构建时统一成esm格式
并且基于no-bundle的概念无需在冷启动阶段对源码进行处理（bundle），Vite只需要在浏览器请求源码时进行转换并按需提供源码，根据情景动态导入代码（实际使用时才会被处理）
- 轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热替换（HMR）
源码-通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）
而基于打包器在源码变动后重建整个包的效率非常低，更新速度会随着应用体积增长而直线下降
在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新
- 丰富的功能：对
TypeScript、Vue、JSX、CSS、JSON等支持开箱即用
Vite内置多种格式文件的转译逻辑，开发者可以在模块中直接import已经支持的格式文件
- 优化的构建：可选“多页应用”或“库”模式的预配置
Rollup构建
Vite构建过程默认会包含三个功能逻辑：
-
CSS代码分割 -
预加载指令生成
-
异步
Chunk加载优化
- 通用的插件：在开发和构建之间共享
Rollup-superset插件接口
Vite 用户可以利用 Rollup 插件的强大生态系统，同时通过Vite的特有插件实现别样的功能
- 完全类型化的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格式模块文件
服务器会在收到源码请求访问后进行转换并按需提供源码，根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理
使用门槛低
核心：与框架解耦，通过保姆式cli工具🔧以及友好交互帮助用户快速完成项目搭建
提供Svelte、Vue、React等快速初始化项目模版，使用一条shell命令即可生成一个基本的前端工程项目目录，无需进行任何复杂配置
社区资源丰富
核心：经过几年的发展，全球范围内形成了巨大的社区氛围并有众多开发者共建社区
Vite的Github社区：https://github.com/vitejs/vite/discussions
Vite的Discord社区：https://discord.com/invite/aYVNktYeEB
与Vite相关的精彩内容：https://github.com/vitejs/awesome-vite
完善的插件机制
核心：插件机制与Rollup深度融合
Vite插件 是 Rollup 插件接口的一种扩展
复用Rollup成熟的插件设计体制以及插件社区资源，原本Rollup社区的成员可以低成本迁移构建工具
同时Vite官方提供了官方插件、社区插件专栏，方便开发者插件应对复杂的项目场景
Vite快速初始化项目
- 安装NPM
若已安装则忽略此步骤
安装包下载地址：https://nodejs.org/en/download/
- 初始化项目
在工作目录下运行项目初始化命令
npm create vite@latest
根据命令提示进行操作
- 查看新项目的目录结构
这里选择了Vue-template
- vite.config.ts
根据在初始化项目时选择的不同版本的template，此处会引入不一样的插件加入到构建流程中
- 启动开发服务
npm run dev
打开浏览器访问对应的本地端口即可看到由Vite驱动的服务器返回的结果
讲到最后
本节文章篇幅较短，主要目的是让读者对Vite有基本的认识与了解，后面会有系列文章拆解Vite的具体实现
尽情各位技术同学期待！！！
谢谢大家，我们下节再见！！！
感谢各位看到这里，如果你觉得本节内容还不错的话，欢迎各位的点赞、收藏、评论，大家的支持是我做内容的最大动力
本文为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利
暂无评论内容