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

vite介绍

news 2026/2/10 13:50:08

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

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2026/2/6 6:35:29

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/11/4 17:30:04

React核心概念：State是什么？如何用useState管理组件自己的数据？

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

编程新知 2025/11/3 8:29:51

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展&#xff0c;企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心&#xff0c;成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统&#xff0c;它不仅支持跨平台应用&#xff0c;还能提供丰富…...

编程新知 2026/2/4 15:23:03

深入解析光敏传感技术：嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...

编程新知 2026/2/8 23:40:35

背包问题双雄：01 背包与完全背包详解（Java 实现）

一、背包问题概述 背包问题是动态规划领域的经典问题&#xff0c;其核心在于如何在有限容量的背包中选择物品&#xff0c;使得总价值最大化。根据物品选择规则的不同&#xff0c;主要分为两类&#xff1a; 01 背包&#xff1a;每件物品最多选 1 次&#xff08;选或不选&#…...

编程新知 2025/11/13 21:20:29

C#中用于控制自定义特性（Attribute）

我们来详细解释一下 [AttributeUsage(AttributeTargets.Class, AllowMultiple false, Inherited false)] 这个 C# 属性。 在 C# 中&#xff0c;Attribute&#xff08;特性&#xff09;是一种用于向程序元素&#xff08;如类、方法、属性等&#xff09;添加元数据的机制。Attr…...

编程新知 2026/2/9 6:24:59

【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析：合法的安全测试指南

文章目录 &#x1f4cc; 前言&#x1f9f0; 一、前期准备✅ 安装 Kali Linux✅ 获取支持监听模式的无线网卡 &#x1f6e0; 二、使用 Kali Linux 进行 WiFi 安全测试步骤 1&#xff1a;插入无线网卡并确认识别步骤 2&#xff1a;开启监听模式步骤 3&#xff1a;扫描附近的 WiFi…...

编程新知 2025/10/16 12:28:55