vite和webpack的区别和作用

前言

Vite 和 Webpack 都是现代化的前端构建工具,它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的,但它们在设计和实现方面有许多不同之处。

一、Vite详解和作用

vite 是什么

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具。
Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙,但这个方向我觉得是有潜力的,做得好可以彻底解决改一行代码等半天热更新的问题。

它具有以下特点:

  • 快速的冷启动
  • 即时的模块热更新
  • 真正的按需编译

从上述看出vite 主要特点是基于浏览器 native 的 ES module (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 来开发,省略打包这个步骤,因为需要什么资源直接在浏览器里引入即可

有趣的是 vite 算是革了 webpack 的命了(生产环境用 rollup),所以 webpack 的开发者直接喊大哥了

总的来说:vite主要解决了现有工具(如webpack、rollup)在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。

vite的构建原理

Vite 则是一种基于浏览器原生 ES 模块解析的构建工具,它通过在服务器端搭建开发环境,在浏览器中使用原生 ES 模块的方式实现了快速的开发体验。Vite 的主要特点是支持快速的开发反应和打包速度快,但是在复杂的构建场景下可能会受到限制。

二、webpack详解和作用

webpack是什么

webpack是一个静态模块打包器,可以把各种资源如JavaScript、CSS、图片等都视为模块,然后将这些模块打包成一份或多份优化的资源。webpack提供了丰富的API和生态,用户可以通过插件和loader来扩展webpack的功能。

webpack通过一种叫做loader的机制来处理非JavaScript类型的文件,并且可以把这些文件打包成合适的格式供浏览器使用。除此之外,webpack还具有代码拆分、优化、模块热替换等强大功能。

比如在一个React项目中,我们可以使用Babel Loader把JSX和ES6语法转换为浏览器可识别的JavaScript语法,使用CSS Loader和Style Loader来处理CSS文件,使用File Loader来处理图片等文件。

无论是在开发环境中进行模块热替换,还是在生产环境中进行代码拆分和优化,webpack都能够很好的完成任务,它在前端构建工具中有着广泛的应用。

webpack的构建原理

Webpack 是一个静态模块打包器,通过对项目中的 JavaScript、CSS、图片等文件进行分析,生成对应的静态资源,并且可以通过一些插件和加载器来实现各种功能。Webpack 的主要特点是支持各种复杂的构建场景,例如代码分割、按需加载等,但也因此导致配置复杂,打包速度较慢。

二者区别

vite和webpack的区别:

  1. 基础概念不同
  2. 编译方式不同;
  3. 开发效率不同;
  4. 扩展性不同;
  5. 应用场景不同。

Webpack:将所有的模块提前编译、打包进 bundle 中,不管这个模块是否被用到,随着项目越来越大,打包启动的速度自然越来越慢。

使用webpack打包模式
在这里插入图片描述
Vite:瞬间开启一个服务,并不会先编译所有文件,当浏览器用到某个文件时,Vite 服务会收到请求然后编译后响应到客户端。
使用vite打包模式

在这里插入图片描述

vite的打包模式是先开启服务,再根据我们的请求进行一个相应的打包编译。因此打包速度特别快,类似于实现了按需导入,不需要使用的文件不进行导入。

总结:

总的来说,vite以其更快的编译速度和更低的内存占用率,给前端开发带来了全新的体验,而webpack凭借其高度的自定义性和成熟的生态,仍是前端构建工具的重要选择。具体情况根据我们项目开发需求来做决定。
参考文章:https://worktile.com/kb/p/53689

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

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

相关文章

Linux Centos7静默安装(非图形安装)Oracle RAC 11gR2(Oracle RAC 11.2.0.4)

Oracle RAC (全称Oracle Real Application Clusters )静默安装(非图形安装)教程。 由于这篇文章花费了我太多时间,设置了仅粉丝可见,见谅。 环境说明: 虚拟机软件:VMware Workstation 16 Pro…

【Docker】在Windows操作系统安装Docker前配置环境

欢迎来到《小5讲堂》,大家好,我是全栈小5。 这是《Docker容器》序列文章,每篇文章将以博主理解的角度展开讲解, 特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对…

什么是区块链?

区块链 区块链 (英语:blockchain)是借由 密码学 与 共识机制 等技术建立,存储数据的 保证不可篡改和不可伪造的 分布式技术。 什么是区块 区块 就是将一批数据打包在一起,并且给打包出来的区块编号。第一个区块的编…

基于ant design的权限管理系统设计与实现

业务系统中权限是基础设施,本文将使用ant design来开发前端管理系统,后端接口使用Spring Cloud开发。废话不多说,开搞。 实现效果图 权限 资源 角色 用户 ant design实现中遇到的问题 角色编辑时,资源权限的组合比较复杂&#…

工业企业能源管理平台,可以帮助企业解决哪些方面的能源问题?

随着全球工业化进程的加快,工业企业在生产经营过程中消耗的能源也越来越庞大。能源成本的上升和环境保护的压力使得工业企业对能源管理的重要性有了深刻的认识。为了提高能源利用效率、降低能源消耗、减少环境污染,工业企业在能源管理方面迫切需要一套规…

C# dataGridView 列的勾选框改变事件

dataGridView 增加一列 DataGridViewCheckBoxColumn 然后设置复选框值如下图: dataGridView增加两个事件 private void dataGridView1_CurrentCellDirtyStateChanged(object sender, EventArgs e){//提交改变,触发dataGridView1_CellValueChanged事件&…

MySQL三大日志

1. redo log 1.1 特点 InnoDB存储引擎独有物理日志,记录在数据页上做的修改让MySQL拥有了崩溃恢复能力,保证事务的持久性 1.2 刷盘时机 事务提交时log buffer 空间使用大约一半时事务日志缓冲区满InnoDB 定期执行检查点Checkpoint后台刷新线程&#…

postgresql迁移到mysql

1.工具方法:Navicat Premium16 2. 手工方法: 迁移流程 下面是将 Postgresql 数据库迁移到 MySQL 的步骤流程: 步骤描述1. 创建MySQL表结构在MySQL中创建与Postgresql中的表结构相同的表2. 导出Postgresql数据将Postgresql中的数据导出为SQ…

物联网与智慧城市的无界未来:如何打破传统束缚,开启智能生活新篇章

目录 一、物联网:连接万物的技术革命 1、物联网的发展历程 2、物联网的核心技术 二、智慧城市:未来城市的蓝图与挑战 1、智慧城市的蓝图 2、智慧城市建设面临的挑战 3、应对挑战的措施 三、物联网与智慧城市的融合:打破传统束缚&…

【技术分享】远程透传网关-单网口快速实现西门子S7-300/400 PLC程序远程上下载

准备工作 一台可联网操作的电脑一台单网口的远程透传网关及博达远程透传配置工具网线一条,用于实现网络连接和连接PLC一台西门子S7- 300/400 PLC及其编程软件一张4G卡或WIFI天线实现通讯(使用4G联网则插入4G SIM卡,WIFI联网则将WIFI天线插入USB口&#…

2. goLand安装及外配置参数通用用法

目录 概述测试代码解决外配置参数结束 概述 选择版本安装 go 安装的版本 1.go安装及相关配置 goLand 对于 习惯 idea 系列使用的人,还是很友好的。 测试代码 package mainimport ("flag""fmt""os" )func main() {name : flag.St…

Docker五部曲之四:Docker Compose

文章目录 前言Compose应用程序模型Compose规范顶层属性servicenetworkvolumesconfigssecrets 环境变量.env文件environment属性主机shell中的环境变量 Profiles(剖面)启动剖面自动启动剖面和依赖项解析 多compose.yml文件共享与扩展构建规范构建属性 部署…