webpack和vite的区别

webpack和vite都是现代化web构建工具,但他们在构建速度、开发体验、构建结果等方面有所不同

1、构建速度:vite的速度一般快于webpack

(1)传统的构建工具例如webpack在开发过程中会对整个应用或者大部分应用进行打包,之后浏览器才能加载处理之后的包(好比webpack打包先从入口文件开始,递归的查找模块之间的依赖关系,生成一个依赖图,根据依赖图build每个文件,最终构建生成一个或者多个bundle.js,然后浏览器加载处理好的这些包).那么对于大型应用而言,这个打包过程非常的耗时,因为每次页面代码更改后都有可能需要重新打包页面的大部分或者全部资源;

(2)对于Vite而言,在开发模式时启动不进行打包,也就意味着它不需要构建模块之间的依赖关系,不需要编辑,所以启动速度非常快…它利用现代浏览器支持ES Model的特性,只构建正在编辑的文件,而不是整个项目,相当于Vite只有在浏览器请求特定模块时才对该模块进行处理,对该模块的内容进行编译—用一句话总结就是按需动态的编译方式极大的缩短了启动时间;生产环境下使用Rollup来构建。

2、热更新—一般webpack 需要通过配置项开启热更新,Vite默认支持热更新和自动刷新,Vite中当一个模块内容被改变时,不像webpack那样需要重新编译打包该文件,然后再通过热更新机制将更新后的模块注入到应用程序中,Vite是直接向浏览器重新请求该模块即可;在底层实现上Vite是基于esBuild预构建的,那么esBuild是由go语言编写的,go语言天生支持并发,所以较快;

3、按需编译和预打包编译

(1)在使用Vite时,浏览器会发出针对每个ES模块的的HTTP请求;vite会拦截这些请求,并且只编译请求到的模块.相对于传统的工具在开发环境中编辑整个应用,按需编译会大大缩减等待时间;

(2)预打包编译,虽然Vite在开发过程中避免了应用程序的打包,但他通过预打包机制处理第三方的库,一般情况下预打包的结果会被缓存起来,以便在后续开发中快速加载;

4、配置复杂度:

(1)Webpack: Webpack的配置相对复杂,特别是在处理不同类型的资源和加载器时。

(2)Vite: Vite鼓励零配置,使得项目起步非常简单,但同时也支持自定义配置,使其适用于复杂项目。

5、插件生态:

(1)Webpack: Webpack拥有庞大的插件生态系统,适用于各种不同的需求。

(2)Vite: Vite也有相当数量的插件,但相对较小,因为它的开发模式和构建方式减少了对一些传统插件的需求。

(6)编译方式:

(1)Webpack: Webpack使用了多种加载器和插件来处理不同类型的资源,如JavaScript、CSS、图片等。

(2)Vite: Vite利用ES模块原生支持,使用原生浏览器导入来处理模块,不需要大规模的编译和打包。

(7)应用场景:

(1)Webpack: 适用于复杂的大型项目,特别是需要大量自定义配置和复杂构建管道的项目。

(2)Vite: 更适用于小到中型项目,或者需要快速开发原型和小型应用的场景。

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

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

相关文章

C语言---单身狗问题

1.单身狗初阶 这个题目就是数组里面有一串数字,都是成对存在的,只有一个数字只出现了一次,请你找出来 (1)异或是满足交换律的,两个相同的数字异或之后是0; (2)让0和每个…

如何利用数据采集工具,解决医疗数据采集痛点?

在当今信息发达的时代,医疗行业也面临着日益增长的数据量和越来越复杂的管理和挑战。医院是医疗服务的核心机构,需要处理大量病人信息、医疗记录、医疗影像等,从而确保病人最佳的治疗。 但传统的医院数据信息往往存在诸多问题,如…

CVPR 2022 Oral | Bailando: 基于编舞记忆和Actor-Critic GPT的3D舞蹈生成

目录 测试结果: 02 提出的方法 测试结果: 预测有3个步骤,速度比较慢 02 提出的方法 1. 针对舞蹈序列的VQ-VAE和编舞记忆 与之前的方法不同,我们不学习从音频特征到 3D 关键点序列的连续域的直接映射。相反,我们先让…

Oracle Linux 8.9 安装 Python 3.11.8 和 Miniconda

Oracle Linux 8.9 安装 Python 3.11.8 和 Miniconda 1. 安装 Python 3.11.82. 安装 Miniconda 1. 安装 Python 3.11.8 Update system, sudo dnf update -yInstall Library, sudo dnf install curl gcc openssl-devel bzip2-devel libffi-devel zlib-devel wget make git -yI…

Spring Boot 本地部署 JSP

自己是Spring Boot 的初学者,开始看教程的时候发现基本上都是部署的 JSP,但是按照教程一步步走下来始终无法成功,一直都是 404: 查阅各种资料后,总结出一套 Spring Boot 支持 JSP 的流程: 添加依赖 在pom.xml中添加…

Java算法之动态规划

Java算法之动态规划 前言 ​ 最近这一段时间一直在刷算法题,基本上一有时间就会做一两道,这两天做了几道动态规划的问题,动态规划之前一直是我比较头疼的一个问题,感觉好复杂,一遇到这样的问题就想跳过,昨…

jupyterlab 设置

字体 pip install jupyterlab-fontsFira Code Regular 主题 pip install theme-darcula更改jupyter lab默认启动路径 https://blog.csdn.net/monster_MF/article/details/119248111 (1)找到jupyter_lab_config所在路径 winR,输入cmd&am…

NIN网络中的网络

是什么 intro LeNet→AlexNet→VGG→NiN→GoogLeNet→ResNetLeNet→AlexNet→VGG 卷积层模块充分抽取空间特征全连接层输出分类结果AlexNet & VGG 改进在于把两个模块加宽 、加深(加宽指增加通道数,那加深呢?(层数增加叭 Ni…

qemu快速入门

前提: 我们做嵌入式软件的时候,往往可能会缺少嵌入式的硬件,那我们希望提前开始准备代码的话,就需要qemu这个开源软件,它可以模拟各种型号的芯片 。那么我们可以提前在这个模拟器上面去开发代码、验证、调试。 正片开始…

跨境电商新篇章:独立站如何携手海外网红营销,实现品牌飞跃

随着品牌出海的火热,独立站成为越来越多企业的选择。然而,在激烈的市场竞争中,如何提高独立站的知名度,成为企业亟需解决的问题之一。在这个背景下,海外网红营销崭露头角,成为一种备受关注的新型推广策略。…

Covalent(CQT)降低数据可用性成本,加快 Layer2 在 Web3 领域的扩张

Covalent Network(CQT)通过其统一 API,正在为 EVM Layer2 生态系统提供支持,减少了开发者需要导航多个数据供应商的需求,通过解决多链环境中的碎片化挑战,极大地提高了他们的效率。 通过其统一 API 支持 2…

蓝桥杯嵌入式2018年第九届省赛主观题解析

1 题目 2 解析 /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body********************************************************************…

3.6研究代码(2)

指的是微电网运行参数。 在MATLAB中,randi([0,1],1,48) 会生成一个包含1*48个0或1的随机整数数组。这意味着数组中的每个元素都将是0或1。 MATLAB帮助中心:均匀分布的伪随机整数 - MATLAB randi - MathWorks 中国https://ww2.mathworks.cn/help/matlab/r…

可调恒定电流稳压器NSI50150ADT4G车规级LED驱动器 提供专业的汽车级照明解决方案

NSI50150ADT4G产品概述: NSI50150ADT4G可调恒定电流稳压器 (CCR) ,是一款简单、经济和耐用的器件,适用于为 LED 中的调节电流提供成本高效的方案(与恒定电流二极管 CCD 类似)。该 (CCR) 基于自偏置晶体管 (SBT) 技术&…

MybatisPlus分页失效不起作用问题剖析

【问题描述】 在使用MybatisPlus的selectPage时发现分页不起作用&#xff0c;每次返回的都是全部的数据&#xff0c;同时getPages()和getTotal()返回的都是0。 【相关代码】 mybatisPlus的版本&#xff1a; <dependency><groupId>com.baomidou</groupId>&…

官宣正式成为 PostgreSQL Contributor,Richard 有何秘诀?

作为世界上最受欢迎的开源数据库之一&#xff0c;PostgreSQL 国际社区于3月3日正式公布了新加入的 PostgreSQL Contributor 名单&#xff0c;以认可为 PostgreSQL 开源项目做出实质性、长期贡献的人员。本次公布的名单中包括 3 名 Contributor 和 6 名 Major Contributor。 拓…

移动App开发常见的三种模式:原生应用、H5移动应用、混合模式应用

引言 在移动应用市场的迅猛发展中&#xff0c;移动App开发正日益成为技术创新和用户体验提升的焦点。对于开发者而言&#xff0c;选择适合自己项目的开发模式成为至关重要的决策。本文将探究移动App开发的三种常见模式&#xff1a;原生应用、H5移动应用和混合模式应用。这三种…

Python(38):Request的data需入参是json,用转换json.dumps(data)

Python接口自动化测试遇到问题:误传str类型给request 一&#xff1a;request接口请求数据用str传参报错&#xff0c;请求响应报错 排查原因&#xff1a;查看服务器报错是Json解析报错。 1.1、如果直接入参&#xff0c;进行request请求的数据&#xff1a; data请求值为&…

Go语言中,如何调用C++的dll文件

我将给出一个完整的示例来说明如何调用C DLL文件。首先&#xff0c;我们将创建一个简单的C DLL&#xff0c;然后编写Go代码来调用该DLL。 创建C DLL文件&#xff08;example.cpp&#xff09;&#xff1a; #include <iostream>extern "C" {__declspec(dllexpo…

点读机女孩是因代言了广告而走红的吗?只知道高君雨这一点你就错了!

点读机女孩是因代言了广告而走红的吗&#xff1f;只知道高君雨这一点你就错了&#xff01; 高君雨&#xff0c;就是那个在点读机广告里&#xff0c;甜美地说着“哪里不会点哪里&#xff0c;so easy”的小女孩。当年的广告一播出&#xff0c;这小女孩就火了&#xff0c;因为她聪…