没有合适的资源?快使用搜索试试~ 我知道了~
Vite分享、原理介绍ppt
需积分: 5 3 下载量 177 浏览量
2023-11-15
10:24:03
上传
评论
收藏 6.77MB PPTX 举报
温馨提示
试读
43页
Vite分享、原理介绍ppt。vite是一种新型前端构建工具,能够显著提升前端开发体验。 本ppt从什么是vite、为什么选择vite作为构建工具、vite与webpack在冷启动与热更新方面的区别、vite的优势与劣势等方面详细介绍了vite的相关知识。同时本ppt含盖较为详细的vite的原理介绍,如vite是如何处理依赖预购建,是如何对源码进行转换的,以及热更新的原理等。同时通过与webpack在打包等方面的对比,展示了为什么会选择vite作为前端构建工具的原因。同时本ppt还介绍了一些额外知识,如esbuild为何构建这么快、esm的定义,有多少浏览器支持esm、Monorepo、虚拟模块又是什么?为什么可以用 esbuild 打包代替深度遍历的过程?html 类型的文件是如何转换为js的?预购建 inclued 、exclude 的使用场景是什么?预购建是如何实现缓存判断与依赖扫描、依赖打包的?有没有预购建的影响是怎样的?有无 middlewares 的影响又是怎样的?等等,这些问题都可以在这里找到答案。快来看看吧~~
资源推荐
资源详情
资源评论
和vite不得不说的事
分享人:XXX
01
什
什
么
么
是
是
Vite
Vite
Vite(法语意为 "快速的",发音 /vit/,发音同 "veet")是一种新型前端构建
工具,能够显著提升前端开发体验。
它主要由两部分组成:
- 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度
快到惊人的 模块热更新(HMR)。
- 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出
用于生产环境的高度优化过的静态资源。
为
为
什
什
么
么
选
选
Vite
Vite
依赖大多为在开发时不会变动的纯 JavaScript。一些较大的依赖(例如
有上百个模块的组件库)处理的代价也很高。依赖也通常会存在多种模块化
格式(例如 ESM 或者 CommonJS)。
依赖
源码通常包含一些并非直接是 JavaScript 的文件,需要转换(例如 JSX
,CSS 或者 Vue/Svelte 组件),时常会被编辑。同时,并不是所有的源码
都需要同时被加载(例如基于路由拆分的代码模块)。
Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序
的部分工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根
据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。
源码
缓慢的服务器启动
缓慢的更新
当冷启动开发服务器时,基于打包器的方式启动必须 优先抓取并构建你的
整个应用,然后才能提供服务。Vite 通过在一开始将应用中的模块区分为
依赖 和 源码 两类,改进了开发服务器启动时间。
基于打包器启动时,重建整个包的效率很低。原因显而易见:因为这样
更新速度会随着应用体积增长而直线下降。
一些打包器的开发服务器将构建内容存入内存,这样它们只需要在
文件更改时使模块图的一部分失活,但它也仍需要整个重新构建并重载
页面。这样代价很高,并且重新加载页面会消除应用的当前状态,所以
打包器支持了动态模块热替换(HMR):允许一个模块 “热替换” 它自
己,而不会影响页面其余部分。这大大改进了开发体验 —— 然而,在
实践中我们发现,即使采用了 HMR 模式,其热更新速度也会随着应用
规模的增长而显著下降。
在 Vite 中,HMR 是在原生 ESM 上执行的。当编辑一个文件时,
Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活
(大多数时候只是模块本身),使得无论应用大小如何,HMR 始终能
保持快速更新。
剩余42页未读,继续阅读
资源评论
金乌Y
- 粉丝: 302
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 最全空间计量实证方法(空间杜宾模型和检验以及结果解释文档).txt
- 5uonly.apk
- 蓝桥杯Python组的历年真题
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 前端开发技术实验报告:内含4四实验&实验报告
- Highlight Plus v20.0.1
- 林周瑜-论文.docx
- 基于MIC+NE555光敏电阻的声光控电路Multisim仿真原理图
- 基于JSP毕业设计-基于WEB操作系统课程教学网站的设计与实现(源代码+论文).zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功