vite与webpack有什么不同?为什么vite比webpack快?

1. 定位

webpack、rollup、esbuild 都是打包工具,对代码进行压缩、合并、转换、分割、打包等操作,都需要打包工具去完成

vue-cli、umi 是基于 webpack 的上层封装,通过简单配置能快速搭建起一个项目(用 webpack 去搭建项目需要配置很多东西

vite 开发环境依赖 esbuild 进行预构建,生产环境依赖 rollup 进行打包,并且充分利用浏览器特性,比如 http2、ES module,是站在众多巨人肩膀上的一个产物

2. 运行原理

webpack 启动项目时,它会根据配置文件 webpack.config.js 中的入口文件 entry,分析项目的依赖关系,然后打包成一个文件 bundle.js,交给浏览器去加载渲染

问题:项目越大,需要打包的东西就越多,启动的时间也就越长


vite 运行项目时,会用 esbuild 进行预构建,将所有模块转换成 es module,不需要对整个项目进行编译打包,而是在浏览器需要加载某个模块时,拦截请求,根据请求进行按需编译,然后再返回给浏览器

绝大多数浏览器已经支持 ES Modules,在 script 标签中添加 type=“module”,就可以使用了

这样一来,首次启动项目(冷启动)时就把 webpack 快很多,并且项目大小对 vite 启动速度的影响很小


Q:什么是 ES Modules?

ES Modules 是个模块化方案,在浏览器端和 node.js 环境中组织和管理代码,有以下特点:

(1)允许将代码分割成多个模块,每个模块可以独立定义自己的作用域和功能,通过使用 import 和 export 语句,来实现模块之间的依赖关系和数据交互

(2)采用静态加载机制,模块的依赖关系在编译时就已经确定了,模块的加载是同步的

3. 构建方式

webpack 是基于 node.js 运行的,但 js 只能单线程运行,无法利用多核 CPU 的优势


vite 预构建和按需编译过程,都是使用 esbuild 完成的

esbuild 是用 go 语言编写的,可以充分利用多核 CPU 的优势


Q:什么是预构建依赖?

在项目启动或构建之前,对项目所需的依赖进行预先的处理或构建

好处:在实际运行时,直接使用已经构建好的依赖,提高运行速度

4. http2

http1 的时候,浏览器对同一个域名的请求有并发限制,一般为 6 个,超过 6 个就会造成阻塞,所以要减少打包数量,减少并发请求,来提高速度

http2 就可以并发发送多个请求,没有并发限制,将打包产物分为多个小模块,并行去加载,反而更快

vite 充分利用 http2 可以并发请求的优势,对项目进行合理拆分,访问时同时加载多个模块,来提高速度

5. 热更新 HMR

热更新 HMR:在程序运行过程中,替换、添加或删除模块,而无需重新加载整个页面

每次修改文件,webpack 都会对整个项目进行重新打包,对大项目来说很不友好。即使有缓存机制,也不能根本解决问题


vite 项目中,监听到文件变更后,会用 websocket 通知浏览器,重新发送新的请求,只对该模块进行重新编译,然后进行替换

并且基于 es module 的特性,vite 利用浏览器的缓存机制,针对源码模块进行协商缓存,针对依赖模块进行强缓存,这样访问速度更快了

6. 生产环境

vite 生产环境下用 rollup 打包,它是一款 ES module 打包器,与 webpack 相比,rollup 要小巧得多,打包生成的文件更小

esbuild 打包速度要比 rollup 快,但 vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容,用 rollup 打包更加稳定,所以使用 vite 可能存在开发环境和生产环境打包结果不一致的问题

7. 优缺点

webpack:

优点:可以更灵活地配置优化项目;拥有庞大的插件生态,适用于复杂项目

缺点:构建速度较慢;配置复杂


vite:

优点:极快的开发构建速度;零配置启动;原生 ES 模块启动,适合小型项目和快速原型开发

缺点:插件生态较小;不适合复杂项目

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

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

相关文章

iOS(Object C) 快速排序

快速排序使用分治法,把一个数组分为两个子数组 本质上来看,快速排序应该算是在冒泡排序基础上的递归分治法。 快速排序的思想: 1.找到一个基准元素(通常是数组里的第一元素) 2.从右边开始遍历,找到一个比基准数小的值(minValue),将minValue放到基准值的初始位置,…

40. 【Android教程】AsyncTask:异步任务

在前面的章节有提到过,Android 系统默认会在主线程(UI 线程)执行任务,但是如果有耗时程序就会阻塞 UI 线程,导致页面卡顿。这时候我们通常会将耗时任务放在独立的线程,然后通过 Handler 等线程间通信机制完…

外贸干货|客户迟迟不付款,怎么催?

(一) Gentle reminder 温馨提醒 "Hello Mary, l hope this message finds you well. l wanted to kindly remind you about the payment for our agreed-upon order. We appreciate your business and would like to proceed with the next steps as soon as possible.…

DS32K查看内置寄存器数值

需要在debug的时候进行查看,先暂停,再打开EmbSys Registers窗口。 需要先将导出的内容选中并双击,不然复制出来会变成问号。右上角有个复制按钮,复制到剪贴板就行。譬如我这里选择了MCR寄存器,复制出来的就是这个寄存器…

下载nvm来配置node版本

背景提示:入职的公司项目久远,一直运行不起来,原来是我node版本太高,需要降级才行。然后找到这个nvm配置一下 准备工作 如果电脑有配置node的,需要先卸载掉才能配置nvm!!!这是重点嗷…

Leetcode双指针刷题(一)

给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面…

播放相关知识-持续更新

一:基础知识: 1.编码方式: H264: H265: AV1: 1.多码流,为什么现在视频播放有这么多的码流(100、200、300、400、500、600、800、1020等等) 优点:用户不同的…

大模型解决方案:具体业务场景下的智能表单填充(附代码)

大模型相关目录 大模型,包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步,扬帆起航。 大模型应用向开发路径:AI代理工作流大模型应用开发实用开源项目汇总大模型问答项目问答性能评估方法大模型…

在组件页面刷新为什么触发不了组件的生命周期销毁钩子

当在前端开发中遇到组件页面刷新时,无法触发组件生命周期的销毁钩子(如 Vue 的 beforeDestroy/destroyed 或 React 的 componentWillUnmount),通常有以下几种情况或原因: 页面刷新的本质:当浏览器页面执行刷…

JS -正则表达式

正则表达式 关于正则表达式,其实我写过几篇了,但是真正的正则表达式其实主要用于定义一些字符串的规则,计算机根据给出的正则表达式,来检查一个字符串是否符合规则。 我们来看一下,在JS中如何创建正则表达式对象。 语…

网络不更新,LOSS正常输出。

据别的文章说,学习率过高或者adam算法没加入eps参数也可能导致模型输出nan. 这个可以一开始就加上试试。先判断loss是否正常,再使用判断梯度是否正常。出现NAN。 loss.backward()for name, parms in model.named_parameters():if parms.grad is None or…

第67天:APP攻防-Frida反证书抓包移动安全系统资产提取评估扫描

思维导图 案例一:内在-资产提取-AppinfoScanne AppinfoScanner 一款适用于以 HW 行动/红队/渗透测试团队为场景的移动端(Android、iOS、WEB、H5、静态网站)信息收集扫描工具,可以帮助渗透测试工程师、攻击队成员、红队成员快速收集到移动端或者静态 WEB …

【禅道客户案例】小反馈,大杠杆!银丰新融「反馈管理」优秀实践

企业介绍 北京银丰新融科技开发有限公司(简称:银丰新融)成立于2000 年,自创立以来一贯专注于金融监管、风险管控等领域的信息系统建设,拥有目前国内金融风险领域规模庞大的信息技术服务团队。 银丰新融业务范围覆盖了…

VUE3 ref,props,生命周期

1.--ref属性 1.1代码 1.1.1子表 <template><div class"person"><h1>中国</h1><h2 ref"title2">北京</h2><h3>尚硅谷</h3><button click"showLog">点我输出h2这个元素</button>&l…

JavaScript注释:单行注释和多行注释详解

为了提高代码的可读性&#xff0c;JS与CSS一样&#xff0c;也提供了注释功能。JS中的注释主要有两种&#xff0c;分别是单行注释和多行注释。 在编程的世界里&#xff0c;注释是那些默默无闻的英雄&#xff0c;它们静静地站在代码的背后&#xff0c;为后来的维护者、为未来的自…

到底什么是爬虫

1. 引言 在数据驱动的世界里&#xff0c;网络爬虫&#xff08;Web Crawling&#xff09;技术扮演着获取和处理网上数据的关键角色。无论是为了数据分析、机器学习项目的数据集构建还是简单地监测网页变化&#xff0c;学习如何创建一个基本的网页爬虫可以大大提升你的工作效率和…

Vue页面生成导出PDF文件

第一种&#xff1a; 使用浏览器自带打印方法window.print(); 也可使用print-js插件&#xff08;原理相同&#xff09; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>printDemo</title> </…

【Vue】常见的七大属性(描述+案例)

一、前言 最近&#xff0c;因为项目需要自己就去学习了一下Vue的相关知识&#xff0c;自己花了几天&#xff0c;结合官方文档和相应的视频学习了一下Vue,了解了Vue大概的一些属性&#xff0c;方法&#xff0c;特点等。接下来博主会将自己学习的相关内容通过博客的形式进行记录…

flutter类的细节

title: flutter类的细节(hexo发表blog的初尝试) abbrlink: 9bcefa22 date: 2024-04-22 00:26:25 tags: description: flutter里抽象类的解释 cover: “http://anime-haven.net/lainceleyesdh.jpg” {% p center logo large, Flutter近日学习所遇到的问题 %} {% p center h3, 是…

python教程(5更新中)

常用内建模块 Python之所以自称“batteries included”&#xff0c;就是因为内置了许多非常有用的模块&#xff0c;无需额外安装和配置&#xff0c;即可直接使用。 本章将介绍一些常用的内建模块。 datetime datetime是Python处理日期和时间的标准库。 获取当前日期和时间 …