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

vite介绍

news 2026/3/28 13:11:52

vite
vite是一种新的前端构建工具，vite借助了浏览器对ESM的支持，采用和传统webpack打包完全不一致的unbundle打包机制；
vite的快主要体现在两个方面，快速的冷启动和快速的热更新

快速的冷启动：vite只需启动一台静态页面的服务器， 不需要打包项目全部文件， 服务器根据客户端的请求加载不同的模块处理， 实现按需加载， 而webpack则是一开始就将整个项目打包一遍，再开启dev-server，如果项目规模庞大， 打包时间必定很长。
打包编译速度：当需要打包到生产环境时， vite使用传统的rollup进行打包， 所以vite的优势是体现在开发阶段。
热模块更新：当某个模块内容改变时， 让浏览器重新请求改模块即可， 而不是像webpack那样重新将该模块的所有依赖重新编译。

vite的优点（unbundle机制的核心）
模块之间的依赖关系由浏览器解析 文件的转换由dev server 的middleware实现并做缓存 不对源文件做合并捆绑操作

vite的缺点
由于unbundle机制， 首屏期间懒加载方面需要额外做一下工作：和webpack相比， vite把需要在dev server启动过程中完成的工作转移到dev server 响应浏览器的请求过程中，不可避免的造成首屏加载性能下降。不过首屏性能差只发生在dev server 启动后第一次加载页面的时候， 之后再重新加载页面时， 性能会好很多， 原因是dev server会将之前已经完成转换的内容缓存下来。不对文件做捆绑操作， 导致大量的HTTP请求 初次加载阻塞首屏请求

使用vite创建项目
之前使用vue-cli脚手架时， 需要先把vue-cli安装在全局中， 以便后面创建项目使用， 而vite构建工具是不需要全局安装的， 可以通过下面的命令进行创建；注意vite需要的node版本14.18+， 有些模块的依赖需要更高的node.js版本。
创建项目的命令

vue create vite@latest

然后输入文件名， 选择框架，选择语言
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
另一种创建方式，可以选择创建router文件

npm init vue@latest

在这里插入图片描述
在这里插入图片描述

相关文章：

vite介绍

vite vite是一种新的前端构建工具，vite借助了浏览器对ESM的支持，采用和传统webpack打包完全不一致的unbundle打包机制； vite的快主要体现在两个方面，快速的冷启动和快速的热更新 快速的冷启动：vite只需启动一台静态页…...

编程日记 2023/9/6 21:19:50

2023年软件测试常见面试题

测试花费的成本，要深入在那个环节上，（前提准备上，需求理解上，业务逻辑，排错上，业务名词上理解，通过什么样的方法，有谁能解决这样的问题） 软性热身题 1.自我…...

编程日记 2023/9/6 21:18:48

关于const指针的一个常见误区

关于const，我曾因为其在C和C中的不同，还有一些编译器对未定义的处理不同，搞得晕头转向… 后来有次在阅读《C primer plus》中我终于梳理了有关const的结论。 1.const基础知识 首先要明白const的难点在于修饰指针的时候，对于con…...

编程日记 2023/9/6 21:17:47

@alilclowcode-engine-ext@1.0.5 不支持安装react@^16.3.0

alilclowcode-engine-ext1.0.5 不支持安装react^16.3.0 https://github.com/alibaba/lowcode-demo https://lowcode-engine.cn/site/docs/demoUsage/intro https://github.com/alibaba/lowcode-engine https://docs.appsmith.com/getting-started/setup/installation-guides?…...

编程日记 2023/9/6 21:16:46

Python之列表操作和内存模型

Python之列表操作和内存模型 列表list 一个排列整齐的队伍，Python采用顺序表实现 列表内的个体称作元素，由若干元素组成 列表 元素可以是任意对象(数字、字符串、对象、列表等) 列表内元素有顺序，可以使用索引 线性的数据结构 使用 [ ] …...

编程日记 2023/9/6 21:15:45

实习面试记录

湖南某操作系统中厂（9月） 首先是科研项目相关的问题，然后是其他问题如下： STL中，vector,map和unorded_map底层是怎么实现的？ 在C标准库中，vector和map都是基于模板类实现的容器。 vector底层…...

编程日记 2023/9/6 21:14:44

总结/笔记-vue中的插槽（默认插槽、具名插槽、作用域插槽）

问题： 遇到了一个插槽，写法为 #default ”{ row }“ 插槽知识点： 定义 插槽，用于 在组件中 引用外部组件或自定义组件的内容。 即 子组件中提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代…...

编程日记 2023/9/6 21:13:44

QTday5（QT连接TCP通信）

一、Xmind整理&#xff1a; C语言中的通信协议&#xff1a; 二、上课笔记整理&#xff1a; 1.QT中的服务器端的操作&#xff1a; .pro文件&#xff1a; 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务…...

编程日记 2023/9/6 21:12:42

【Docker】安装RabbitMQ

1、拉取 RabbitMQ 镜像 docker pull rabbitmq2.创建并运行容器 docker run -it --name test-rabbitmq -e RABBITMQ_DEFAULT_USERadmin -e RABBITMQ_DEFAULT_PASSuispig -p 15672:15672 -p 5672:5672 -d rabbitmq参数说明–name是 容器别名-d表示后台运行-p将 宿主机 5672端口…...

编程日记 2023/9/6 21:11:40

【如何获取数据库表的字段并拼接】

获取数据库表的字段并拼接 需求场景操作步骤获取该数据库对应表中所有的字段对获取到的字段进行处理 需求场景 在写sql语句时&#xff0c;我要获取到该表的大部门字段来做处理&#xff0c;一个个粘贴复制太费事了&#xff0c;所以我决定执行sql语句把表中字段查询出来 操作步…...

编程日记 2023/9/6 21:10:39

Oracle中LEFT JOIN后AND与WHERE的异同

1、AND 过滤之后再连接 2、WHERE 连接之后再过滤 下面以具体例子来说明&#xff1a; (1)、建表及插入测试数据 --建测试表 create table FACT_TAB ( ID INTEGER,STATUS VARCHAR2(8) ); create table DIM_STATUS ( STSTUS_CLASS VARCHAR2(8),STATUS_CODE VARCHAR2(8),S…...

编程日记 2023/9/6 21:09:39

Flink实时计算中台Kubernates功能改造点

背景 平台为数据开发人员提供基本的实时作业的管理功能，其中包括jar、sql等作业的在线开发；因此中台需要提供一个统一的SDK支持平台能够实现flink jar作业的发布；绝大多数情况下企业可能会考虑Flink On Yarn的这个发布模式，但是伴随云原生的呼声越来越大，一些企业不希望部…...

编程日记 2023/9/6 21:08:38

GO远程构建并调试

GO远程调试 之前写C&#xff0c;一直习惯了本地IDERemote CMake/GDB编译调试的模式。 因为6.824课程需要用GO&#xff0c;好像没有特别好的支持。记录一下如何配置调试的。 IDE: Goland 操作系统&#xff1a;Windows 远程服务器&#xff1a;Ubuntu 首先配置SSH,让其可以连接到…...

编程日记 2023/9/6 21:07:37

react使用hook封装一个search+input+checkbox组件

目录 react使用hook封装一个searchinputcheckbox组件searchPro.jsx使用组件效果 react使用hook封装一个searchinputcheckbox组件 searchPro.jsx import { Checkbox, Input } from "antd"; import React, { useEffect, useState } from "react"; import S…...

编程日记 2023/9/6 21:06:34

【6】uniform颜色写入

之前的Basic.shader: #shader vertex #version 330 corelayout(location 0) in vec4 position;void main() {gl_Position position; };#shader fragment #version 330 corelayout(location 0) out vec4 color;void main() {color vec4(1.0, 0.0, 0.0, 1.0); };这里color …...

编程日记 2023/9/6 21:05:33

自然语言处理历史史诗：NLP的范式演变与Python全实现

目录 一、引言什么是自然语言处理&#xff1f;语言与人类思维自然语言的复杂性NLP的历史轨迹 二、20世纪50年代末到60年代的初创期符号学派重要的研究和突破 随机学派重要的研究和突破 三、20世纪70年代到80年代的理性主义时代基于逻辑的范式重要的研究和突破 基于规则的范式重…...

编程日记 2023/9/6 21:04:32

网络协议从入门到底层原理学习（二）—— Mac地址/IP地址

文章目录 网络协议从入门到底层原理学习&#xff08;二&#xff09;—— Mac地址/IP地址1、MAC地址2、MAC地址的表示格式3、MAC地址表4、MAC地址操作5、MAC地址的获取6、ARP7、ICMP8、IP地址9、IP地址的分类和格式10、不同分类的IP地址的范围11、特殊 IP 地址12、子网掩码13、子…...

编程日记 2023/9/6 21:03:31

2023开学礼中国海洋大学《乡村振兴战略下传统村落文化旅游设计》许少辉新海洋图书馆

2023开学礼中国海洋大学《乡村振兴战略下传统村落文化旅游设计》许少辉新海洋图书馆...

编程日记 2023/9/6 21:02:30

WebClient vs HttpClient：异同对比

在 Java 开发中&#xff0c;进行网络通信是常见的需求。WebClient 和 HttpClient 是两种常用的用于发送 HTTP 请求的工具。它们都具有相似的功能&#xff0c;但在实现细节和用法上存在一些差异。本文将详细介绍 WebClient 和 HttpClient 的异同&#xff0c;帮助您选择适合您项目…...

编程日记 2023/9/6 21:01:29

ES6中导入import导出export

ES6使用 export 和 import 来导出、导入模块 用法 /** 导出 export *///分别导出 export let name 孙悟空; export function sum(a, b) {return a b; } } //先定义再导出 let age 18 export {age}/** 默认导出 export default */const a 默认导出; export default a;/**…...

编程日记 2023/9/6 21:00:28

抖音批量下载终极指南：5分钟掌握免费视频资源整合技巧

抖音批量下载终极指南&#xff1a;5分钟掌握免费视频资源整合技巧 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是不是经常看到精彩的抖音视频想保存下来&#xff0c;却苦于一个个手动下载太麻烦&#x…...

编程新知 2026/3/28 9:52:36

Spring Data JPA 高级特性

Spring Data JPA 高级特性 引言 大家好&#xff0c;今天想和大家聊聊 Spring Data JPA 的高级特性。作为一名 Java 架构师&#xff0c;我深知数据访问层对于应用的重要性。 Spring Data JPA 是 Spring 生态中用于简化数据访问的优秀框架&#xff0c;它提供了丰富的功能和灵活…...

编程新知 2026/3/28 8:21:47

腾讯地图API实战：5分钟搞定经纬度录入与地图选点功能（Vue版）

腾讯地图API实战&#xff1a;5分钟搞定经纬度录入与地图选点功能&#xff08;Vue版&#xff09; 在当今的Web开发中&#xff0c;地图功能已成为许多应用的标配需求。无论是电商平台的店铺定位&#xff0c;还是社交应用的位置分享&#xff0c;甚至是企业内部系统的区域管理&…...

编程新知 2026/3/28 8:13:44

FLUX.1-dev实战教程：像素幻梦中多LoRA叠加与风格混合生成技巧

FLUX.1-dev实战教程&#xff1a;像素幻梦中多LoRA叠加与风格混合生成技巧 1. 像素幻梦工坊简介 Pixel Dream Workshop&#xff08;像素幻梦工坊&#xff09;是基于FLUX.1-dev扩散模型构建的专业像素艺术生成工具。与传统AI绘图工具不同&#xff0c;它专为像素艺术创作优化&am…...

编程新知 2026/3/28 6:50:50

革新性硬件控制工具：OmenSuperHub实现游戏本性能优化与完全掌控

革新性硬件控制工具&#xff1a;OmenSuperHub实现游戏本性能优化与完全掌控 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub OmenSuperHub是一款专为惠普暗影精灵系列游戏本设计的开源硬件控制工具&#xff0c;提供完全离线的…...

编程新知 2026/3/28 6:44:49

Datawhale AI冬令营-学习笔记-task1

很多企业训练出来的通用模型&#xff0c;我们在使用时并不能很好得解答我们生活中的疑惑&#xff0c;故我们需要一些定制专属大模型来解答在特殊情境下的特定问题&#xff0c;通过投喂一些特定的数据&#xff0c;使得让专属模型在特定领域有着更出色的表现。本次学习将 基于《甄…...

编程新知 2026/3/28 6:02:28

Suricata在CentOS7上的性能优化：如何配置网卡混杂模式与端口聚合

Suricata在CentOS7上的性能优化&#xff1a;网卡混杂模式与端口聚合实战指南 当企业网络流量突破千兆级别时&#xff0c;传统单网卡监控方案往往力不从心。我曾为某金融客户部署Suricata时&#xff0c;单台服务器每天要处理超过2TB的流量数据&#xff0c;正是通过下文介绍的网卡…...

编程新知 2026/3/28 5:54:13

嵌入式系统开发中的关键技术术语解析

嵌入式系统开发中的56个关键技术术语解析1. 数据转换基础概念1.1 采样与保持特性采集时间(Tacq)是从释放保持状态到采样电容电压稳定至新输入值的1 LSB范围之内所需的时间。在采样-保持电路中&#xff0c;这个参数直接影响系统的动态性能。孔径延迟(tAD)描述从时钟信号的采样沿…...

编程新知 2026/3/28 4:19:55

高效管理惠普OMEN游戏本：OmenSuperHub全面解析与实战指南

高效管理惠普OMEN游戏本&#xff1a;OmenSuperHub全面解析与实战指南 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub OmenSuperHub是一款专为惠普OMEN系列游戏本设计的轻量级系统管理工具&#xff0c;它通过替代原厂Omen Ga…...

编程新知 2026/3/28 3:25:23

SAP IDoc入站出站处理全流程拆解：从WE19测试到IDOC_INPUT_函数调试

SAP IDoc接口开发实战&#xff1a;从零构建到生产环境调试全指南 在SAP系统集成领域&#xff0c;IDoc&#xff08;Intermediate Document&#xff09;作为企业级数据交换的标准载体&#xff0c;其重要性不言而喻明。不同于简单的文件传输&#xff0c;一个健壮的IDoc接口需要开发…...

编程新知 2026/3/28 3:23:21