(二)什么是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——热更新时vite、webpack做了什么-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 的时候动态的加载它,实现了真正的按需加载,减少了加载文件的体积,缩短了时长;

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电源线虚接,导致信号线发烫

音频板的信号是经过隔直电容接到音频板的。

Nginx在实际使用中的常用基本配置

一、什么是Nginx Nginx 是开源的轻量级 Web 服务器、反向代理服务器,以及负载均衡器和 HTTP 缓存器。其特点是高并发,高性能和低内存。 Nginx 专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受高负…

Linux应用开发基础知识——电阻屏和电容屏(八)

触摸屏分为电阻屏、 电容屏。电阻屏结构简单, 在以前很流行;电容屏支持 多点触摸,现在的手机基本都是使用电容屏。 注意:LCD、触摸屏不是一回事,LCD 是输出设备,触摸屏是输入设备。制作触摸 屏时特意把它的…

数据结构八种内部排序算法c++实现

文章目录 直接插入排序希尔排序冒泡排序快速排序选择排序堆排序归并排序桶排序 直接插入排序 vector<int> insertSort(vector<int> num) {int i, j, temp;for (i 1; i < num.size(); i){temp num[i];for (j i - 1; j > 0 && temp<num[j]; j-…

mysqldump常用操作示例/命令

以下是一些常用的mysqldump操作示例&#xff0c;以备份和还原MySQL数据库为例&#xff1a; 1. 备份单个数据库&#xff1a; mysqldump -u your_username -p your_password your_database > backup.sql将 your_username 替换为你的MySQL用户名&#xff0c;your_password 替…

反序列化漏洞(1), 原理, 实验, 魔术方法

反序列化漏洞(1), 原理, 实验, 魔术方法 一, 介绍 反序列化漏洞是一种存在于反序列化过程中的漏洞&#xff0c;它允许攻击者通过控制反序列化的数据来操纵序列化对象&#xff0c;并将有害数据传递给应用程序代码。 这种漏洞可能造成代码执行、获取系统权限等一系列不可控的后…

【ES6标准入门】JavaScript中的模块Module的加载实现:循环加载和Node加载,非常详细,建议收藏!!!

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;JavaScript进阶指南 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继…

IDEA写mybatis程序,java.io.IOException:Could not find resource mybatis-config.xml

找不到mybatis-config.xml 尝试maven idea:module&#xff0c;不是模块构造问题 尝试检验pom.xml&#xff0c;在编译模块添加了解析resources内容依旧不行 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.or…

chrome 浏览器个别字体模糊不清

特别是在虚拟机里&#xff0c;有些字体看不清&#xff0c;但是有些就可以&#xff0c;设置办法&#xff1a; chrome://settings/fonts 这里明显可以看到有些字体就是模糊的状态&#xff1a; 把这种模糊的字体换掉即可解决一部分问题。 另外&#xff0c;经过观察&#xff0c;…

【C++】数组中出现次数超过一半的数字

代码&#xff1a; class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param numbers int整型vector * return int整型*/int MoreThanHalfNum_Solution(vector<int>& numbers) {int …

h5(react ts 适配)

一、新建项目并放在码云托管 1、新建项目&#xff1a;react ts h5 考虑到这些 用 create-react-app 脚手架来搭建项目。 首先&#xff0c;确保你已经安装了 Node.js。如果没有安装&#xff0c;请先从官方网站 https://nodejs.org/ 下载并安装 Node.js。打开命令行工具&#x…

vue3 + ts项目(无vite)报错记录

记录项目创建后遇到的报错 1.类型“Window & typeof globalThis”上不存在属性“_CONFIG”。ts(2339) 问题描述&#xff1a; 使用全局 window 上自定义的属性&#xff0c;TypeScript 会报属性不存在 解决&#xff1a;需要将自定义变量扩展到全局 window 上&#xff0c…

word文档转换为ppt文件,怎么做?

大家是否会遇到需要将word文档转换为ppt文件的情况&#xff1f;除了反反复复粘贴复制以外&#xff0c;还有其他方法可以转换文件格式&#xff0c;今天给大家分享word转换ppt方法。 首先我们先将word文件打开大纲模式 然后我们将文中的大标题设置为1级标题&#xff0c;副标题设…

服务器集群配置LDAP统一认证高可用集群(配置tsl安全链接)-centos9stream-openldap2.6.2

写在前面 因之前集群为centos6&#xff0c;已经很久没升级了&#xff0c;所以这次配置统一用户认证也是伴随系统升级到centos9时一起做的配套升级。新版的openldap配置大致与老版本比较相似&#xff0c;但有些地方配置还是有变化&#xff0c;另外&#xff0c;铺天盖地的帮助文…

已安装的nginx追加ssl模块

Nginx开启SSL模块1 切换到源码包&#xff1a; cd /usr/local/src/nginx-1.11.3 2 查看nginx原有的模块 /usr/local/nginx/sbin/nginx -V 在configure arguments:后面显示的原有的configure参数如下&#xff1a; –prefix/usr/local/nginx --with-http_stub_status_module …

C/C++高频面经-秋招篇

自己在秋招找工作过程中遇到的一些C/C面试题&#xff0c;大中小厂都有&#xff0c;分享出来&#xff0c;希望能帮到有缘人。 C语言 snprintf()的使用 函数原型为int snprintf(char *str, size_t size, const char *format, …) 两点注意&#xff1a; (1) 如果格式化后的字符…

对于koa中间件的理解

洋葱模型 大家都知道koa是洋葱模型&#xff0c;先一层一层通过next往下&#xff0c;之后再回去执行next后面的内容&#xff0c;next即使没写&#xff0c;最后也会进入下一个中间件。 那么什么是ctx呢&#xff0c;ctx顾名思义就是上下文&#xff0c;也就是上一层传给下一层的东…

【广州华锐互动】消防安全宣传知识3D交互展示提升公众学习沉浸感

随着科技的快速发展&#xff0c;我们的生活与工作环境愈发复杂&#xff0c;火灾风险也随之提高。为了提高公众的消防灭火能力&#xff0c;普及消防安全知识&#xff0c;广州华锐互动开发了消防安全宣传知识3D交互展示系统。 这是一种全新的教育方式&#xff0c;它利用3D技术&am…

【EI会议征稿】第三届图像,信号处理与模式识别国际学术会议(ISPP 2024)

第三届图像&#xff0c;信号处理与模式识别国际学术会议&#xff08;ISPP 2024) 2024 3rd International Conference on Image, Signal Processing and Pattern Recognition&#xff08;ISPP 2024&#xff09; 第三届图像&#xff0c;信号处理与模式识别国际学术会议&#xf…

WPF的总体架构、类对象结构介绍

一、WPF总体结构 Windows Presentation Foundation (WPF) 是 Microsoft .NET Framework 的一部分&#xff0c;用于构建丰富的桌面应用程序。它提供了一种统一的编程模型&#xff0c;用于构建现代的用户界面。 以下是 WPF 的主要组件和其关系&#xff1a; PresentationFramewo…