通俗易懂分析:Vite和Webpack的区别

1、对项目构建的理解

先从浏览器出发, 浏览器是由浏览器内核和JS引擎组成;浏览器内核编译解析html代码和css代码,js引擎编译解析JavaScript代码;所以从本质上,浏览器只能识别运行JavaScript、CSS、HTML代码。 而我们在编写项目时,用到了less,ts等扩展语言,vue等js框架,es6等低版本浏览器不能兼容的js语法,以及为了提高项目性能做的代码压缩,图片资源压缩等,把这些源代码转换成可以执行的JavaScript、CSS、HTML 代码称之为项目构建。 而vite和webpack是两种不同的项目构建打包工具。

项目构建包括以下内容:
代码转换:将 TypeScript编译成JavaScript 、将Less编译成css等。
文件优化:压缩JavaScript、 CSS、HTML 代码,压缩合并图片等。
代码分割: 提取多个页面的公共代码,提取首屏不需要执行部分代码让其异步加载。
模块合并:在采用模块化的项目里会有很多个模块和文件,需要通过构建功能将模块分类合并成一个文件。
热更新:监听本地源代码变化,自动重新构建、刷新浏览器。
代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
自动发布:更新代码后,自动构建出线上发布代码并传输给发布系统。

2、Vite和Webpack对比

  • 构建速度(项目启动速度)和热更新速度

    Vite 的构建速度和热更新速度更快,在大型项目中, Vite 甚至要比Webpack的构建速度快几十倍。

    原因分析:
    webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染;随着模块的增多,打包出的bundle文件会越来越大,造成启动速度和热更新速度越来越慢;webpack用js代码编写。
    Vite   : 启动服务器=> 请求模块时按需动态编译显示。通过在一开始将应用中的模块区分为依赖和源码两类,请求某个模块时再对该模块进行实时编译,因为现代游览器本身支持ES-Module,所以会自动向依赖的Module发出请求;使用esbuild预构建依赖(esbuild也是一种js构建工具,不过是用go纯机器码语言编写),以原生的ES Modules向浏览器提供源码;
    

    构建原理图如下(vite官网抄的):
    在这里插入图片描述
    在这里插入图片描述

  • 上手度简易程度
    vite的配置相对来说更加简单,具体的配置方法请见官网:webpack中文官网 vite官网

  • 生态丰富度
    vite是尤大大在2021年时推出的新一代前端构建工具,相对于webpack来说,推出时间距今非常的短,缺少很多扩展功能,Webpack 的生态环境更加成熟,在社区中拥有广泛的支持和丰富的插件库。可以处理多种类型的文件和资源。

  • 浏览器兼容性
    Webpack 支持所有符合 ES5 标准 的浏览器(不支持 IE8 及以下版本)。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器,在使用这些表达式之前,还需要 提前加载 polyfill。
    默认情况下,Vite 的目标浏览器是指能够 支持原生 ESM script 标签 和 支持原生 ESM 动态导入 的。所以vite很多低版本的浏览器并不兼容,vite也可以对这个问题进行配置。

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

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

相关文章

敏捷开发最佳实践:领导力维度实践案例——走动式激励

在本节实践案例中,某财险公司信息技术部高级工程师分享了组织级数字化转型中的优秀敏捷领导力实践,不仅解决了产品上市周期长、响应市场变化慢的难题,还打破了部门墙、提升了客户满意度,该案例将为同类企业在组织层面进行有效敏捷…

Centos7配置静态IP详细步骤

使用Centos虚拟机测试时一到切换网段就头疼,总是会有ping不通网关、同段IP和外网的情况。下面出一个尽可能完整的排查思路和配置静态IP的过程。以下为配置nat模式后,出现以上情况的网络不通的排查思路,并配置win10vm8静态IP和centos7虚机nat模…

vue3路由切换过渡动画实现

<router-view v-slot"{ Component }"><transition name"fade" mode"out-in" appear><keep-alive><component :is"Component" /></keep-alive></transition> </router-view>/* 路由切换动画…

SQL字符集

目标:了解字符集的概念&#xff0c;掌握MySQL数据库存储数据的字符集逻辑以及设置方式 字符集概念 MySQL字符集关系 解决乱码问题 字符集设置原理 1、字符集概念 目标:了解字符集概念&#xff0c;掌握字符集存储和读取的实现原理 概念 字符集:charset或者character set&am…

(十二)【Jmeter】线程(Threads(Users))之setUp 线程组

简述 操作路径如下: 作用:在正式测试开始前执行预加载或预热操作,为测试做准备。配置:设置预加载或预热操作的采样器、循环次数等参数。使用场景:确保在正式测试开始前应用程序已经达到稳定状态,减少测试结果的偏差。优点:提供预加载或预热操作,确保测试的准确性。缺…

Centos开机网卡自启动失败

问题背景 每次都要手动启动在这里插入代码片 解决方案: 关闭 NetworkManager 服务 systemctl disable NetworkManager systemctl stop NetworkManager重启就会发现网卡已经可以自动启动了

2024幻兽帕鲁游戏服务器租用价格表_一年和1个月报价明细

游戏服务器租用多少钱一年&#xff1f;1个月游戏服务器费用多少&#xff1f;阿里云4核16G10M游戏服务器26元1个月、149元半年&#xff0c;腾讯云4核16G游戏服务器32元、312元一年&#xff0c;华为云26元&#xff0c;京东云主机也是26元起&#xff0c;游戏服务器配置从4核16G、4…

代码随想录算法刷题训练营day22

代码随想录算法刷题训练营day22&#xff1a;LeetCode(236)二叉树的最近公共祖先、LeetCode(235) 二叉搜索树的最近公共祖先、LeetCode(701)二叉搜索树中的插入操作、LeetCode(450)删除二叉搜索树中的节点 LeetCode(236)二叉树的最近公共祖先 题目 代码 /*** Definition for…

【鸿蒙 HarmonyOS 4.0】路由router

一、介绍 页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块&#xff0c;通过不同的url地址&#xff0c;可以方便地进行页面路由&#xff0c;轻松地访问不同的页面。 二、页面跳转 2.1、两种跳转模式&#xff1a; router.pushUrl()&…

vue2与vue3中父子组件传参的区别

本次主要针对vue中父子组件传参所进行讲解 一、vue2和vue3父传子区别 1.vue2的父传子 1).在父组件子标签中自定义一个属性 <sonPage :子组件接收到的类名"传输的数据">子组件</sonPage> 2).在子组件中peops属性中拿到自定属性 props: {子组件接收的…

Stable Diffusion算法、结构全流程概述

Stable Diffusion能力强、功能多、插件广&#xff0c;本文拟概述SD的全流程&#xff0c;方便梳理算法各结构的关系 1、stable diffusion训练用ddpm, 采样用ddim DDPM的推理采样步长和训练时的步长一样&#xff0c;导致采样步数过多&#xff0c;推理时间长。DDIM指出&#xff…

安卓游戏开发之音频技术优劣分析

一、引言 在安卓游戏开发中&#xff0c;音频处理技术扮演着至关重要的角色&#xff0c;它不仅能够增强游戏的沉浸感和玩家体验&#xff0c;还能通过声音效果传达关键的游戏信息。以下将对几种常见的安卓游戏音频处理技术进行优劣分析&#xff0c;并结合应用场景来阐述其特点。 …

docker镜像打包和解压

背景 工作记录 打包镜像 docker save -o 压缩包名称.tar 镜像名称:镜像版本 例如 docker save -o app-web.tar app-web:2.0解压镜像 这里解压上面打包的app-web的压缩包 docker load<压缩包名称.tar docker load<app-web.tar这样解压下来的实际就是app-web:2.0这个镜…

微服务-微服务API网关Spring-clould-gateway实战

1. 需求背景 在微服务架构中&#xff0c;通常一个系统会被拆分为多个微服务&#xff0c;面对这么多微服务客户端应该如何去调用呢&#xff1f; 如果根据每个微服务的地址发起调用&#xff0c;存在如下问题&#xff1a; 1.客户端多次请求不同的微服务&#xff0c;会增加客户端…

Qt 事件

1. 事件 事件是对各种应用程序需要知道的由应用程序内部或者外部产生的事情或者动作的通称。在Qt中使用一个对象来表示一个事件&#xff0c;它继承自QEvent类。 2. 事件和信号 事件与信号并不相同&#xff0c;比如我们使用鼠标点击了一下界面上的按钮&#xff0c;那么就会产生…

node 之 初步认识

思考&#xff1a;为什么JavaScript可以在浏览器中被执行 代执行的js代码——JavaScript解析引擎 不同的浏览器使用不同的JavaScript解析引擎 Chrome 浏览器 》 V8 Firefox浏览器 》OdinMonkey(奥丁猴&#xff09; Safri浏览器 》JSCore IE浏览器 》Chakra(查克拉&#xff09; e…

XML的写法

下面我将以如下代码来解释下XML的写法 <?xml version"1.0" encoding"UTF-8" ?> <Steam><steam id"1"><zhanghao>admin</zhanghao><mima>123</mima><num>120</num></steam><st…

金航标电子位于广西柳州鹿寨县天线生产基地于大年正月初九开工了

金航标电子位于广西柳州鹿寨县天线生产基地于大年正月初九开工了&#xff01;&#xff01;&#xff01;金航标kinghelm&#xff08;www.kinghelm.com.cn&#xff09;总部位于中国深圳市&#xff0c;兼顾技术、成本、管理、效率和可持续发展。东莞塘厦实验室全电波暗室、网络分析…

关于路径字串标准化的代码

上文说到&#xff0c;得到执行的正确路径。有时这个路径并不规范&#xff0c;所以要进行一番标准化。具体工作&#xff1a; //替换为//./替换为/../的处理 近来专门研究了一下&#xff0c;写了个代码。其实也不难&#xff0c;主要是处理../时麻烦。 char* format_to_exe_path…

运维SRE-06 阶段性复习软件管理体系

那些年运维必会操作-第一弹 操作 文件&#xff1a;增删改查 增&#xff1a;touch,vim,>,>>,cp删除&#xff1a;rm修改&#xff1a;内容&#xff1a;vi/vim,>,>> 文件名&#xff1a;mv查看&#xff1a;内容&#xff1a;cat/vim/less/more/head/tail/sed/awk/…