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

vite介绍

news 2026/2/10 16:41:09

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

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2026/2/8 15:03:06

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/2/7 17:41:40

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2026/2/1 2:08:53