当前位置： 首页 > news >正文

Vite 的基本原理，和 webpack 在开发阶段的比较

news 2026/2/10 15:26:50

目录

  • 1，webpack 的流程
  • 2，Vite 的流程
    • 简单编译
  • 3，总结

主要对比开发阶段。

1，webpack 的流程

开发阶段大致流程：指定一个入口文件，对相关的模块（js css img 等）先进行打包，接着启动一个开发服务器，浏览器请求时返回打包后的文件。

以 vue-cli 创建的项目为例

这样做的特点是：

  1. 如果项目比较大，依赖项比较多，打包速度会降低，会影响到启动速度。
  2. 热更新时，被修改模块所依赖的其他模块都会重新打包。

以 vue-cli 创建的项目为例：

初次打包时间 3866ms

在这里插入图片描述

二次打包 1733ms

在这里插入图片描述

2，Vite 的流程

并不会先打包文件，而是直接启动开发服务器（使用的 koa），所以无论项目多大，启动速度都不太会受到影响。

以 Vite 创建的项目为例，虽然现在看和 webpack 的差距没有很大，但项目越大越明显！

初次打包

在这里插入图片描述

二次打包

在这里插入图片描述

Vite 拿到所有的资源的步骤如下：

  1. 当访问服务器地址时，会请求 index.html。
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

注意到 script 使用了 type="module"，所以浏览器会自动请求对应的模块 main.js，由开发服务器返回。

// main.js 源代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')
  1. 在 main.js 中引入的模块，浏览器又会自动请求vue，style.css，App.vue，以此类推。

注意，在开发阶段，虽然 Vite 比 webpack 发送的请求还多，但这是在本地发送的请求，速度极快，至少比 webpack 打包的速度快。

在这里插入图片描述

简单编译

值得注意的是，开发服务器会对请求的内容做一些简单的编译后返回，比如：

  1. js 文件，会对路径做变化。这样做的目的是，方便开发服务器寻找对应的内容。

在这里插入图片描述

2，css 文件，会将 css 编译为字符串，并将 css 文件处理为 ESModule 的形式。

在这里插入图片描述

3，vue 组件，也编译为纯 js，并且还是 ESModule 。

同时该组件中，还会再次请求带后缀的同名 vue 文件，这是 vue 编译 css 的结果。

在这里插入图片描述

3，总结

  1. webpack 会先打包，再启动开发服务器，浏览器请求服务器时直接返回打包结果。
    vite 是直接启动开发服务器，浏览器请求哪个模块，再对该模块进行实时编译。

  2. 由于现代浏览器本身就支持 ES Module，会自动向依赖的 Module 发出请求。而vite充分利用这一点，将开发环境下的模块文件，作为浏览器要执行的文件（所以 vite 项目中不可以使用 CommonJS），而不是像 webpack 那样进行打包合并。

  3. 由于 vite 在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。
    当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。

  4. 在HMR方面，vite 在改动了一个模块后，仅需让浏览器重新请求该模块即可，不像 webpack 那样需要把该模块的相关依赖模块全部编译一次，效率更高。

  5. 当需要打包到生产环境时，vite 使用传统的 rollup 打包，因此 vite 的主要优势在开发阶段。

以上。

相关文章：

Vite 的基本原理，和 webpack 在开发阶段的比较

目录 1&#xff0c;webpack 的流程2&#xff0c;Vite 的流程简单编译 3&#xff0c;总结 主要对比开发阶段。 1&#xff0c;webpack 的流程 开发阶段大致流程&#xff1a;指定一个入口文件&#xff0c;对相关的模块&#xff08;js css img 等&#xff09;先进行打包&#xff0…...

编程日记 2023/11/6 12:10:14

[开源]免费开源MES系统/可视化数字大屏/自动排班系统

开源系统概述&#xff1a; 万界星空科技免费MES、开源MES、商业开源MES、市面上最好的开源MES、MES源代码、免费MES、免费智能制造系统、免费排产系统、免费排班系统、免费质检系统、免费生产计划系统。 万界星空开源MES制造执行系统的Java开源版本。开源mes系统包括系统管理…...

编程日记 2023/11/6 12:09:13

python如何使用gspread读取google在线excel数据?

一、背景 公司使用google在线excel管理测试用例&#xff0c;为了方便把手工测试用到的测试数据用来做自动化用例测试数据&#xff0c;所以就想使用python读取在线excel数据&#xff0c;通过数据驱动方式&#xff0c;完成自动化回归测试&#xff0c;提升手动复制&#xff0c;粘…...

编程日记 2023/11/6 12:07:12

线程同步——互斥量解锁、解锁

类似与进程间通信信号量的加锁解锁。 对互斥量进行加锁后&#xff0c;任何其他试图在此对互斥量加锁的线程都会被阻塞&#xff0c;直到当前线程释放该互斥锁。如果释放互斥锁时有多个线程被阻塞&#xff0c;所有在该互斥锁上的阻塞线程都会变成可运行状态&#xff0c;第一个变…...

编程日记 2023/11/6 12:06:10

数据结构(c语言版) 顺序表

代码 #include <stdio.h> #include <stdlib.h>typedef int E; //这里我们的元素类型就用int为例吧&#xff0c;先起个别名//定义结构体 struct List{E * array;int capacity; //数组的容量int size; };//给结构体指针起别名 typedef struct List * ArrayLis…...

编程日记 2023/11/6 12:05:09

Springboot 集成 RocketMq（入门）

1.RocketMq安装部署 Linux 安装 RocketMq-CSDN博客 2.添加依赖包 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2.3</version> </dependency> 3.配…...

编程日记 2023/11/6 12:04:08

Elasticsearch：ES|QL 中的数据丰富

在之前的文章 “Elasticsearch&#xff1a;ES|QL 查询语言简介”&#xff0c;我有介绍 ES|QL 的 ENRICH 处理命令。ES|QL ENRICH 处理命令在查询时将来自一个或多个源索引的数据与 Elasticsearch 丰富索引中找到的字段值组合相结合。这个有点类似于关系数据库查询中所使用的 jo…...

编程日记 2023/11/6 12:03:07

【linux编程】linux文件IO高级I/O函数介绍和代码示例

Linux文件IO高级I/O函数用法是指如何使用这些函数来实现高效和灵活的文件读写操作，它们包括以下几类： 分散读和集中写：readv和writev函数可以一次性地从一个文件描述符读取或写入多个缓冲区，而不需要多次调用read或write函数。这样可以减少系统调用的开销，提高I/O效率。存…...

编程日记 2023/11/6 12:02:06

jQuery获取地址栏GET参数值

jQuery获取地址栏GET参数值 封装方法&#xff1a; window.location 是获取当前页面地址 // 获取地址栏参数 function GetUrlString(name){var reg new RegExp("(^|&)" name "([^&]*)(&|$)");var r window.location.search.substr(1).match…...

编程日记 2023/11/6 12:00:04

JAVA应用中线程池设置多少合适？

目录 1、机器配置&#xff1a; 2、核心线程数 3、最大线程数多少合适&#xff1f; 4、理论基础 5、测试验证 一个线程跑满一个核心的利用率 6个线程 12 个线程&#xff1a;所有核的cpu利用率都跑满 有io操作 6、计算公式 7、决定最大线程数的流程&#xff1a; 1、机器…...

编程日记 2023/11/6 11:59:03

.Net Core 3.1 解决数据大小限制

微软官网文档上对.NET Core3.1解决数据大小限制有详细的介绍。下面是根据自己的情况进行的总结&#xff0c;我们可以把.Core项目部署在IIS上&#xff0c;也可以利用Kestrel进行部署。这两种方式处理数据大小限制的方式不一样&#xff0c;具体如下&#xff1a; 一、部署在IIS上…...

编程日记 2023/11/6 11:58:02

【音视频 | opus】opus编码的Ogg封装文件详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…...

编程日记 2023/11/6 11:57:00

【微信小程序】自定义组件（一）

自定义组件 组件的创建与引用1、创建组件2、引用组件3、全局引用VS局部引用4、组件和页面的区别 样式1、组件样式隔离2、组件样式隔离的注意点3、stylelsolation的可选值 数据、方法和属性1、data数据2、methods方法3、properties4、data和properties区别5、使用setData修改pr…...

编程日记 2023/11/6 11:55:59

如何通过一条数字人三维动画宣传片，打造出数字文旅

越来越多虚拟人&#xff0c;以文化挖掘者的身份通过数字人三维动画宣传片&#xff0c;打通次元壁&#xff0c;助力文化传播形式创造性转化、创新性表达&#xff0c;赋予文化发展新动能。 如南方都市报民间博物馆文化探寻者“岭梅香”&#xff0c;由一艘在南宋时期失事的沉船“南…...

编程日记 2023/11/6 11:54:58

【MongoDB】索引 - 数组字段的多键索引

数组字段创建索引时&#xff0c;MongoDB会为数组中的每个元素创建索引键&#xff08;多键索引&#xff09;&#xff0c;多键索引支持数组字段的高效查询。 一、准备工作 这里准备一些数据 db.shop.insertMany([{_id: 1, name: "水果店1", fruits: ["apple&qu…...

编程日记 2023/11/6 11:53:56

2023.11.5 关于 Spring 创建 和 使用

目录 创建 Spring 项目 1.创建 Maven 项目 2.添加 Spring 依赖 将 Bean 对象存储到 Spring 容器中 创建 Bean 存储 Bean ApplicationContext 获取 Bean BeanFactory 获取 Bean ApplicationContext 和 BeanFactory 的区别 获取 Bean 的三种方式 根据 Bean id 获取…...

编程日记 2023/11/6 11:51:53

3D目标检测实战 | 图解KITTI数据集评价指标AP R40(附Python实现)

目录 1 准确率和召回率2 P-R曲线的绘制3 AP R11与AP R40标准4 实际案例 1 准确率和召回率 首先给出 T P TP TP、 F P FP FP、 F N FN FN、 T N TN TN的概念 真阳性 True Positive T P TP TP 预测为正(某类)且真值也为正(某类)的样本数&#xff0c;可视为 I o U > I o U t…...

编程日记 2023/11/6 11:50:51

制作一个ros2机器人需要学习的课本（还不全面）

1《C语言》---这个是基础200页左右 2《C》-----500-600页 3《高等数学》-----没有这个无法计算动态电路 4《电路分析》-----没有这个没法设计硬件电路 5《英语5000词汇》最少也得达到美国小学生毕业时候的词汇水平5000词汇量 6《ros1》因为ros2没有一本中文课本---有那么一…...

编程日记 2023/11/6 11:49:50

Qt OpenGL相机系统

文章目录 一、简介二、实现代码三、实现效果参考资料效果展示 一、简介 一直偷懒没有学习OpenGL，乘着这段有点时间重新学习一下OpenGL，做一个简单的小工具，有助于后面理解OSG。我们都知道OpenGL中存在着下面几个坐标空间：模型空间（物体空间）、世界空间、观察空间(或者称…...

编程日记 2023/11/6 11:48:48

英语语音识别，语言评测，语音打分实践与代码实现

项目在这&#xff1a;couldn/speech-evaluation-of-english 详细的可查看项目内的md文档...

编程日记 2023/11/6 11:47:47

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/2/9 21:57:29

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18