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

vite介绍

news 2026/3/28 14:22:41

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

Qwen3-TTS-VoiceDesign参数详解：Temperature与Top P加点调优指南

Qwen3-TTS-VoiceDesign参数详解&#xff1a;Temperature与Top P加点调优指南 你是不是也遇到过这样的问题&#xff1a;用AI生成语音时&#xff0c;明明输入了“开心的语气”&#xff0c;出来的声音却平淡得像在念说明书&#xff1f;或者想要“悲伤一点”&#xff0c;结果听起来…...

编程新知 2026/3/28 11:35:26

如何让Windows 11运行如飞？Win11Debloat系统优化工具全解析

如何让Windows 11运行如飞&#xff1f;Win11Debloat系统优化工具全解析 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以简…...

编程新知 2026/3/28 10:26:54

Pixel Mind Decoder 创意写作助手：分析经典文学中的情绪节奏与模仿生成

Pixel Mind Decoder 创意写作助手&#xff1a;分析经典文学中的情绪节奏与模仿生成 1. 当AI遇见文学创作 写作最难把握的是什么&#xff1f;很多作家会告诉你&#xff1a;是情绪的节奏。就像音乐需要起伏的旋律&#xff0c;一部好作品也需要精心设计的情感曲线。但传统创作中…...

编程新知 2026/3/28 9:54:37

5V低压开环FOC驱动器：低成本实现微型电机流畅控制

1. 5V低压开环FOC驱动器的核心价值 对于很多电子爱好者和小型项目开发者来说&#xff0c;控制微型电机常常会遇到两个难题&#xff1a;要么控制方案太贵&#xff0c;要么效果不够理想。我自己在开发桌面旋转展示台时就深有体会——市面上的驱动器要么价格高昂&#xff0c;要么体…...

编程新知 2026/3/28 9:38:28

零配置部署！VoxCPM-1.5-WEBUI让语音合成变得像上网一样简单

零配置部署&#xff01;VoxCPM-1.5-WEBUI让语音合成变得像上网一样简单 你是否曾为视频配音找不到合适的声音而烦恼&#xff1f;是否想过制作有声读物却苦于录音设备和时间成本&#xff1f;或者&#xff0c;你只是想体验一下&#xff0c;让AI用你喜欢的音色为你朗读一段文字&a…...

编程新知 2026/3/28 9:14:15

PyTorch 2.8镜像基础教程：torch.compile加速、FlashAttention-2启用参数详解

PyTorch 2.8镜像基础教程&#xff1a;torch.compile加速、FlashAttention-2启用参数详解 1. 镜像环境快速验证 在开始使用PyTorch 2.8镜像前&#xff0c;我们需要先确认环境是否正常工作。打开终端&#xff0c;运行以下命令&#xff1a; python -c "import torch; prin…...

编程新知 2026/3/28 9:08:08

1.NCM格式解密技术全解析：从原理到实战的音乐自由之路

1.NCM格式解密技术全解析&#xff1a;从原理到实战的音乐自由之路 【免费下载链接】ncmdump ncmdump - 网易云音乐NCM转换 项目地址: https://gitcode.com/gh_mirrors/ncmdu/ncmdump 问题引入&#xff1a;当音乐遭遇数字围栏 "花了千元订阅的无损音乐&#xff0c;…...

编程新知 2026/3/28 9:04:01

xhs：突破小红书数据采集壁垒的5个实战方法

xhs&#xff1a;突破小红书数据采集壁垒的5个实战方法 【免费下载链接】xhs 基于小红书 Web 端进行的请求封装。https://reajason.github.io/xhs/ 项目地址: https://gitcode.com/gh_mirrors/xh/xhs 从反爬困境到合规采集的完整解决方案 在数字化营销与市场研究领域&am…...

编程新知 2026/3/28 8:29:53

AudioSeal Pixel Studio部署教程：NVIDIA Triton推理服务器集成

AudioSeal Pixel Studio部署教程&#xff1a;NVIDIA Triton推理服务器集成 1. 项目概述 AudioSeal Pixel Studio是一款基于Meta开源的AudioSeal算法构建的专业音频水印工具。它能够在保持原始音频质量的前提下&#xff0c;为音频文件嵌入隐形数字水印&#xff0c;并具备强大的…...

编程新知 2026/3/28 7:45:21

为什么92%的FastAPI AI项目卡在流式响应？揭秘async generator阻塞根源与3种非阻塞调度模式

第一章&#xff1a;FastAPI 2.0 异步 AI 流式响应 如何实现快速接入FastAPI 2.0 原生强化了对异步流式响应&#xff08;StreamingResponse&#xff09;的支持&#xff0c;结合 async generator 可无缝对接大语言模型&#xff08;LLM&#xff09;的逐 token 输出场景&#xff0c…...

编程新知 2026/3/28 7:33:18