(二)什么是Vite——Vite 和 Webpack 区别(冷启动)

 vite分享ppt,感兴趣的可以下载:

​​​​​​​Vite分享、原理介绍ppt

什么是vite系列目录:

(一)什么是Vite——vite介绍与使用-CSDN博客

(二)什么是Vite——Vite 和 Webpack 区别(冷启动)-CSDN博客

(三)什么是Vite——Vite 主体流程(运行npm run dev后发生了什么?)-CSDN博客

(四)什么是Vite——冷启动时vite做了什么(源码、middlewares)-CSDN博客

(五)什么是Vite——冷启动时vite做了什么(依赖、预构建)-CSDN博客

未完待续。。。

Vite 和 Webpack 区别

Webpack是近年来使用量最大,同时社区最完善的前端打包构建工具,新出的5.x版本对构建细节进行了优化,在部分场景下打包速度提升明显。Webpack在启动时,会先构建项目模块的依赖图,如果在项目中的某个地方改动了代码,Webpack则会对相关的依赖重新打包,随着项目的增大,其打包速度也会下降。

Vite相比于Webpack而言,没有打包的过程,而是直接启动了一个开发服务器devServer。Vite劫持浏览器的HTTP请求,在后端进行相应的处理将项目中使用的文件通过简单的分解与整合,然后再返回给浏览器(整个过程没有对文件进行打包编译)。所以编译速度很快。

Snowpack 首次提出利用浏览器原生ESM能力的打包工具,其理念就是减少或避免整个bundle的打包。默认在 dev 和 production 环境都使用 unbundle 的方式来部署应用。但是它的构建时却是交给用户自己选择,整体的打包体验显得有点支离破碎。

而 Vite 直接整合了 Rollup,为用户提供了完善、开箱即用的解决方案,并且由于这些集成,也方便扩展更多的高级功能。

两者较大的区别是在需要bundle打包的时候Vite 使用 Rollup 内置配置,而 Snowpack 通过其他插件将其委托给 Parcel/``webpack。

什么是 Webpack:

webpack是能把我们的开发文件打包成一个静态模块的工具,它将所有的模块打包成一个函数,并且会自动处理各种js模块之间的依赖关系,使用webpack打包项目,文件中必存在一个打包后的发布文件夹 dist ,和一个开发文件夹 src 。当 webpack 处理应用程序时,它会根据 命令行参数中 或 配置文件中 定义的模块列表开始处理。 从 入口 开始,webpack 会递归的构建一个 依赖关系图,这个依赖图包含着应用程序中所需的每个模块,然后将所有模块打包为少量的 bundle ( 通常只有一个)(可由浏览器加载)。

webpack核心思想

Webpack 最核心的功能:Webpack 核心原理

At its core, webpack is a static module bundler for modern JavaScript applications.

也就是将各种类型的资源,包括图片、css、js等,转译、组合、拼接、生成 JS 格式的 bundler 文件。官网首页 的动画很形象地表达了这一点:

这个过程核心,完成了 内容转换 + 资源合并 两种功能,实现上包含以下三个阶段:

  1. 初始化阶段:
    1. 初始化参数:从配置文件、 配置对象、Shell 参数中读取,与默认配置结合得出最终的参数
    2. 创建编译器对象:用上一步得到的参数创建 Compiler 对象
    3. 初始化编译环境:包括注入内置插件、注册各种模块工厂、初始化 RuleSet 集合、加载配置的插件等
    4. 开始编译:执行 compiler 对象的 run 方法
    5. 确定入口:根据配置中的 entry 找出所有的入口文件,调用 compilition.addEntry 将入口文件转换为 dependence 对象
  2. 构建阶段:
    1. 编译模块(make):根据 entry 对应的 dependence 创建 module 对象,调用 loader 将模块转译为标准 JS 内容,调用 JS 解释器将内容转换为 AST 对象,从中找出该模块依赖的模块,再 递归 本步骤直到所有入口依赖的文件都经过了本步骤的处理
    2. 完成模块编译:上一步递归处理所有能触达到的模块后,得到了每个模块被翻译后的内容以及它们之间的 依赖关系图
  3. 生成阶段:
    1. 输出资源(seal):根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
    2. 写入文件系统(emitAssets):在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统

技术名词介绍:

  • Entry:编译入口,webpack 编译的起点
  • Compiler:编译管理器,webpack 启动后会创建 compiler 对象,该对象一直存活知道结束退出
  • Compilation:单次编辑过程的管理器,比如 watch = true 时,运行过程中只有一个 compiler 但每次文件变更触发重新编译时,都会创建一个新的 compilation 对象
  • Dependence:依赖对象,webpack 基于该类型记录模块间依赖关系
  • Module:webpack 内部所有资源都会以“module”对象形式存在,所有关于资源的操作、转译、合并都是以 “module” 为基本单位进行的
  • Chunk:编译完成准备输出时,webpack 会将 module 按特定的规则组织成一个一个的 chunk,这些 chunk 某种程度上跟最终输出一一对应
  • Loader:资源内容转换器,其实就是实现从内容 A 转换 B 的转换器
  • Plugin:webpack构建过程中,会在特定的时机广播对应的事件,插件监听这些事件,在特定时间点介入编译过程

 Webpack 知识图谱分享: Webpack 知识图谱 和 Webpack 5 知识体系

 

冷启动时webpack做了什么:#

在 Vite出来之前,传统的打包工具如 Webpack 在服务器启动之前,需要从入口文件完整解析构建整个应用:先解析依赖、打包构建再启动开发服务器,Dev Server 必须等待所有模块构建完成,当我们修改了 bundle 模块中的一个子模块, 整个 bundle 文件都会重新打包然后输出。项目应用越大,启动时间越长。因此,有大量的时间都花在了依赖生成,构建编译上。

打包过程如下:

  • 通过配置文件,找到入口entry;
  • 从入口文件开始递归识别模块依赖,也就是遇到类似于require、import时,webpack都会对其分析,从而拿到对应的代码依赖;
  • 对拿到的代码进行分析、转换、编译,最后输出浏览器可以识别的代码。整个过程大概如下图(来自vite官网):

webpack作为代码编译工具,有入口、出口、loader、和插件plugin:

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。可以通过在配置中指定一个 output 字段,来配置这些处理过程。

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

插件 plugin 是 webpack 的支柱功能。Webpack 自身也是构建于在 webpack 配置中用到的相同的插件系统之上。插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的 插件。

冷启动时vite做了什么

Vite利用浏览器对 ESM的支持,当 import 模块时,浏览器就会下载被导入的模块。先启动开发服务器,当代码执行到模块加载时再请求对应模块的文件,本质上实现了动态加载。灰色部分是暂时没有用到的路由,所有这部分不会参与构建过程。随着项目里的应用越来越多,增加 route,也不会影响其构建速度。

vite serve 开启一个用于开发的Web服务器,启动时 Web 服务器时不需要编译所有的代码文件,启动速度非常快,不需要打包,直接开启web服务器。

Vite利用现代浏览器支持 ES Modules 的模块化的特性,省略了打包,对需要编译的组件,例如单文件组件,Vite采用了另一种模式,即时编译,请求某个文件的时候才会编译某个文件,及时编译的好处:按需编译,速度会很快。

对比 vue-cli-service-serve Webpack打包所有模块-bundle内存-打开web服务器 提前编译,打包到bundle里面,文件越多越慢。

vite build 省略了对模块的打包,使用即时编译,按需编译速度更快。

小结:

Webpack

Vite

先打包生成bundle,再启动开发服务器

先启动开发服务器,利用新一代浏览器的ESM能力,无需打包,直接请求所需模块并实时编译

HMR时需要把改动模块及相关依赖全部编译

HMR时只需让浏览器重新请求该模块,同时利用浏览器的缓存(源码模块协商缓存,依赖模块强缓存)来优化请求

内存高效利用

-

vite 的特性

  • 去掉打包步骤

打包是开发者利用打包工具将应用各个模块集合在一起形成 bundle,以一定规则读取模块的代码,以便在不支持模块化的浏览器里使用,并且可以减少 http 请求的数量。但其实在本地开发过程中打包反而增加了我们排查问题的难度,增加了响应时长,Vite 在本地开发命令中去除了打包步骤,从而缩短构建时长。

  • 按需加载

为了减少 bundle 大小,一般会想要按需加载,主要有两种方式:

  1. 使用动态引入 import() 的方式异步的加载模块,被引入模块依然需要提前编译打包;
  2. 使用 tree shaking 等方式尽力的去掉未引用的模块;(TreeShaking)

而 Vite 的方式更为直接,它只在某个模块被 import 的时候动态的加载它,实现了真正的按需加载,减少了加载文件的体积,缩短了时长;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/155973.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2018年五一杯数学建模C题江苏省本科教育质量综合评价解题全过程文档及程序

2019年五一杯数学建模 C题 江苏省本科教育质量综合评价 原题再现 随着中国的改革开放,国家的综合实力不断增强,中国高等教育发展整体已进入世界中上水平。作为一个教育大省,江苏省的本科教育发展在全国名列前茅,而江苏省13个地级…

【PB续命05】WinHttp.WinHttpRequest的介绍与使用

0 WinHttp.WinHttpRequest简介 winhttp.winhttprequest是Windows操作系统中的一个API函数,用于创建和发送HTTP请求。它可以用于从Web服务器获取数据,或将数据发送到Web服务器。该函数提供了许多选项,例如设置请求头、设置代理服务器、设置超…

花 200 元测试 1300 个实时数据同步任务

背景 对于将数据作为重要生产资料的公司来说,超大规模的数据迁移同步系统( 1k、5k、10k 条同步任务)是刚需。 本文以此为出发点,介绍近期 CloudCanal 所做的一个容量测试:在单个 CloudCanal 集群上创建 1300 实时任务,验证系统是…

2023年中国骨质疏松治疗仪发展趋势分析:小型且智能将成为产品优化方向[图]

骨质疏松治疗仪利用磁场镇静止痛、消肿消炎的治疗作用迅速缓解患者腰背疼痛等骨质疏松临床症状。同时利用磁场的磁-电效应产生的感生电势和感生电流,改善骨的代谢和骨重建,通过抑制破骨细胞、促进成骨细胞的活性来阻止骨量丢失、提高骨密度。 骨质疏松治…

【软件推荐】我的常用Windows软件

文章目录 前言Colors Lite(颜色吸取)Everything(文件搜索)知云文献翻译Directory Opus(文件管理器)Snipaste(截图)AxMath(公式编辑器)Deskpin(窗口…

【Android】导入三方jar包/系统的framework.jar

1.Android.mk导包 1).jar包位置 与res和src同一级的libs中(没有就新建) 2).Android.mk文件 LOCAL_STATIC_ANDROID_LIBRARIES:android静态库,经常用于一些support的导包 LOCAL_JAVA_LIBRARIES:依赖的java库,一般为系统的jar…

Linux常用命令——bzcmp命令

在线Linux命令查询工具 bzcmp 比较两个压缩包中的文件 补充说明 bzcmp命令主要功能是在不真正解压缩.bz2压缩包的情况下,比较两个压缩包中的文件,省去了解压缩后在调用cmp命令的过程。 语法 bzcmp(参数)参数 文件1:指定要比较的第一个…

UE基础篇十:材质

导语: 视频文档在文末 虚幻引擎默认是延迟渲染(延迟渲染是通过先算出需要着色的像素,然后再迭代灯光,从而减少大量无效的灯光计算,来达到优化的目的) 一、基础知识 1.1 贴图分辨率尺寸 2的幂次方,长宽随意组合 非2的幂次方,不能设置MipMaps(引擎会生成多张分辨率更…

任务栏上的超萌小猫,实时显示CPU占用率,有趣.Net开源工具

推荐一个非常有趣的.Net开源小工具,它可以在电脑任务栏显示一只奔跑的小猫,实时显示CPU使用率! 01 项目简介 一款基于.NET 6.0运行环境的开源小工具,通过它,用户可以直观地查看CPU的使用情况,它会根据 CP…

程序员导航站

探路者 hello.alluniverse.vip 开发者导航 - Pro Developer网站导航 探路者是一款极简导航工具,致力于收录的每个站点都有其独特的作用。同时支持自定义导航,让用户快速实现个性化的导航站点。 特性概述 免费ChatGPT 装机必备 开发工具 Git精选项目 …

云计算(Docker)

Docker简介 Docker 是一个开源的应用容器引擎,基于 Go 语言,并遵从 Apache2.0 协议开源。它可以让开发者打包应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。Docker 可用于开发…

2023年中国涂料树脂需求量、市场规模及行业竞争现状分析[图]

涂料用树脂是涂料的主要原材料,是涂料的主要成膜物,且了为涂料成品提供耐醇、耐磨、耐高温、耐高湿、减少涂料在涂装完成后的损耗、保持涂装后外观以及性状的稳定性等功能。 根据生产产品的性状不同,其下游产品,即涂料成品广泛应用…

锐捷EG易网关login.php以及其后台cli.php/branch_passw.php RCE漏洞复现 [附POC]

文章目录 锐捷EG易网关login.php以及其后台cli.php/branch_passw.php远程代码执行漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 锐捷EG易网关login.php以及其后台cli.php/branch_passw.php远程代码执行漏洞复…

电脑集中管理软件有哪些?电脑集中管控怎么做

电脑集中管理软件有哪些?电脑集中管控怎么做 电脑集中管理软件是指通过一种软件或系统,对多台电脑进行集中管理和控制的工具。这种软件通常具备远程控制、软硬件监控、自动部署等功能。可以方便企业或组织统一管理电脑资源,提高工作效率。今…

java“贪吃蛇”小游戏

基于java实现贪吃蛇小游戏,主要通过绘制不同的图片并以一定速度一帧一帧地在窗体上进行展示。 我是在javaSwing项目下创建了一个包 名字叫做:Snakes包 包下有一个启动类和一个设置代码的主界面两个类 代码主界面: 代码主界面主要讲解的是 …

linux关于cmake,makefile和gdb的使用

c文件的编译 安装环境(centos 7) 检查命令是否齐全 gcc --version g --version gdb–version 安装命令 yum -y install gcc-c安装g命令(用于编译c/c文件) yum -y install gcc安装gcc命令(用于编译c文件) 每个都出现版本号,证明…

Java-接口和抽象类

本章重点:1. 抽象类 2. 接口 3.Object类 1. 抽象类 1.1 抽象类概念 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一…

计算机毕业设计项目选题推荐(免费领源码)java+mysql二手校园交易平台67613

目录 摘要 1 绪论 1.1 研究背景 1.2国内外研究现状 1.3论文结构与章节安排 2 二手校园交易平台系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 …

滚雪球学Java(09-2):Java中的关系运算符,你真的掌握了吗?

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE相关知识点了,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好…