什么是vite,如何使用
参考:
主要:由一次业务项目落地 Vite 的经历,我重新理解了 Vite 预构建
vite官方文档
为什么有人说 vite 快,有人却说 vite 慢?
深入理解Vite核心原理
面向未来的前端构建工具-vite
聊一聊 Vite 的预构建和二次预构建
聊一聊 Vite
Vite原理
Vite 基于 浏览器原生 ESM 规范的支持,采取了与 Webpack 完全不同的 unbundle 机制。
也就是说Vite无需像webpack那样去遍历生成模块依赖图,它在使用时直接启动了一个开发服务器devServer,劫持浏览器的HTTP请求,在中间件中对请求的文件进行处理,将项目中使用的文件通过简单的分解与整合,然后再返回给浏览器。
Vite在启动时会先做一些准备工作,比如对第三方模块进行预编译处理,然后在本地启动一个开发服务器dev server,在中间件中对请求的文件进行处理,大概处理流程如下:加载源文件、转化翻译成ESM可解析的文件,比如ts -> js, less -> css 等,分析源文件依赖,然后返回请求的js文件。
Vite整个过程中没有对文件进行打包编译,做到了真正的按需加载。因此vite编译速度很快,尤其在大型项目中表现得更加明显,大大节约了开发时间。
它在正式环境采用了rollup打包的方式,但是目前在生态上和稳定性、兼容性上还无法和webpack媲美。
esbuild打包为什么这么快呢?
esbulid是使用goLang进行打包的,goLang是静态语言,因此它的速度比使用js/ts更快。
vite内部解析
vite内部创建了一个本地的KOA server,热更新监听使用chokidar监听文件变化。模块解析、增加中间件、启动服务器。
devServer会编译代码文件,编译成浏览器可运行的代码,它具备静态文件服务功能,vite会使用serveStaticPlugin将项目根目录、public目录设置为静态目录,并且plugin中包含koa-etag中间件,文件如果发生了变化,devServer会通知变化的etag,从而达到浏览器的更新效果。
重写模块路径-非js资源打包策略-静态资源打包策略
vite会重写模块路径:
- 相对路径转为绝对路径
- 补齐扩展名
- 对非js类型的文件地址会加上一个“import”的query参数。
- hmr文件加上时间戳。
Vue脚本打包策略
Vite会引入vue的插件@vue/compiler-sfc
解析vue文件,将template、style、script三部分解析出来,加上一个type=【style|template】的后缀,在打包后的vue文件中增加一个import语句引入style和template,最后渲染出vue页面。
webpack处理静态资源:1. css转为js,新建style标签插入html中。2. 图片转为图片路径或者base64。3. JSON转化为js模块
Vite和webpack对比
webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。 而vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。
现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。
vite利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,vite在启动的时候不需要打包,不需要分析模块的依赖和编译,因此启动速度快。
当浏览器请求某个模块时,再根据需要对模块内容进行编译。按需动态编译缩减了编译时间。
HMR方面,当改动了一个模块后,仅需让浏览器重新请求该模块,而webpack需要把该模块的相关依赖模块全部编译一次,效率更高。
Webpack 的热更新会以当前修改的文件为入口重新 build 打包,所有涉及到的依赖也都会被重新加载一次。虽然webpack 也采用的是局部热更新并且是有缓存机制的,但是还是需要重新打包所以很大的代码项目是真的有卡顿的现象
文件缓存:Vite 会将预构建的依赖缓存到node_modules/.vite。它根据几个源来决定是否需要重新运行预构建步骤:package.json中的 dependencies列表, package-lock等
浏览器缓存:源码模块的请求会根据 304 Not Modified 进行协商缓存,而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存
Vite的优缺点
-
优点:
快速的冷启动: 采用No Bundle和esbuild预构建,速度远快于Webpack
高效的热更新:基于ESM实现,同时利用HTTP头来加速整个页面的重新加载,增加缓存策略
真正的按需加载: 基于浏览器ESM的支持,实现真正的按需加载 -
缺点:
生态:目前Vite的生态不如Webapck,不过生态应该也只是时间上的问题。
生产环境由于esbuild对css和代码分割不友好使用Rollup进行打包。
对服务器渲染方面目前没有比较成熟的方案,不过这也是生态还没有起来的一部分。
在首屏渲染和懒加载的时候可能会比webpack慢一点,因为服务器中间件拦截请求后在响应过程中完成编译,所以第一次打开的时候,没有缓存 首屏相对而言慢一点,懒加载是因为动态加载的时候,也需要再次请求、动态编译,因此相对而言会慢。
vite使用原理
首先浏览器向开发服务器请求页面,返回一个html文件,文件中引入了需要挂载的js文件。
如<script type="module" src="/src/main.js"></script>
当浏览器解析资源时,会往当前域名发起一个GET请求main.js文件
// main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
请求到了main.js文件,会检测到内部含有import引入的包,又会import 引用发起HTTP请求获取模块的内容文件,如App.vue、vue文件
Vite其核心原理是利用浏览器现在已经支持ES6的import,碰见import就会发送一个HTTP请求去加载文件,Vite启动一个 koa 服务器拦截这些请求,并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合,然后再以ESM格式返回返回给浏览器。Vite整个过程中没有对文件进行打包编译,做到了真正的按需加载,所以其运行速度比原始的webpack开发编译速度快出许多!
import { defineConfig } from 'vite'
import { resolve } from "path"; // 主要用于alias文件路径别名
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx"; // jsx插件export default defineConfig({plugins: [vue(), vueJsx()], // 插件列表base: './', // 在生产中服务时的基本公共路径。 resolve: {alias: { "@": path.resolve(__dirname, './src'), } // 配置别名},// 引入第三方的配置,强制预构建插件包optimizeDeps: { include: ['echarts', 'axios', 'mockjs'], },// 打包配置build: {target: 'modules', // 最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器outDir: 'dist', // 指定输出路径assetsDir: 'assets', // 指定生成静态资源的存放路径sourcemap: false, // 构建后是否生成 source map 文件minify: 'terser' // 混淆器,terser构建后文件体积更小},// 本地运行配置,及反向代理配置server: {host: 'localhost', // 指定服务器主机名port: 3000, // 指定服务器端口open: true, // 在服务器启动时自动在浏览器中打开应用程序strictPort: false, // false-- 若端口已被占用则会尝试下一个可用端口,而不是直接退出https: false, // 是否开启 httpscors: true, // 为开发服务器配置 CORS。默认启用并允许任何源proxy: { // 为开发服务器配置自定义代理规则'/foo': 'http://192.168.xxx.xxx:xxxx', '/api': {target: 'http://192.168.xxx.xxx:xxxx', //代理接口changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})
相关文章:
什么是vite,如何使用
参考: 主要:由一次业务项目落地 Vite 的经历,我重新理解了 Vite 预构建 vite官方文档 为什么有人说 vite 快,有人却说 vite 慢? 深入理解Vite核心原理 面向未来的前端构建工具-vite 聊一聊 Vite 的预构建和二次预构建 …...
基于大语言模型的AI Agents
代理(Agent)指能自主感知环境并采取行动实现目标的智能体。基于大语言模型(LLM)的 AI Agent 利用 LLM 进行记忆检索、决策推理和行动顺序选择等,把Agent的智能程度提升到了新的高度。LLM驱动的Agent具体是怎么做的呢&a…...
23种设计模式之抽象工厂模式
目录 什么是抽象工厂模式 基本结构 基本实现步骤 实现代码(有注释) 应用场景 简单工厂、工厂方法、抽象工厂的区别 什么是抽象工厂模式 抽象工厂模式也是一种创建型设计模式,提供了一系列相关或相互依赖对象的接口,而无需…...
飞天使-linux操作的一些技巧与知识点9-zabbix6.0 容器之纸飞机告警设置
文章目录 zabbix 告警纸飞机方式webhook 方式 告警设置 zabbix 告警纸飞机方式 第一种方式参考 https://blog.csdn.net/yetugeng/article/details/99682432bash-4.4$ cat telegram.sh #!/bin/bashMSG$1TOKEN"61231432278:AAsdfsdfsdfsdHUxBwPSINc2kfOGhVik" CHAT_I…...
京东组件移动端库的使用 Nut-UI
1.介绍 NutUI NutUI-Vue 组件库,基于 Taro,使用 Vue 技术栈开发小程序应用,开箱即用,帮助研发快速开发用户界面,提升开发效率,改善开发体验。 特性 🚀 80 高质量组件,覆盖移动端主…...
用Python来实现2024年春晚刘谦魔术
简介 这是新春的第一篇,今天早上睡到了自然醒,打开手机刷视频就被刘谦的魔术所吸引,忍不住用编程去模拟一下这个过程。 首先,声明的一点,大年初一不学习,所以这其中涉及的数学原理约瑟夫环大家可以找找其…...
TestNG基础教程
TestNG基础教程 一、常用断言二、执行顺序三、依赖测试四、参数化测试1、通过dataProvider实现2、通过xml配置(这里是直接跑xml) 五、testng.xml常用配置方式1、分组维度控制2、类维度配置3、包维度配置 六、TestNG并发测试1、通过注解来实现2、通过xml来…...
###51单片机学习(1)-----单片机烧录软件的使用,以及如何建立一个工程项目
前言:感谢您的关注哦,我会持续更新编程相关知识,愿您在这里有所收获。如果有任何问题,欢迎沟通交流!期待与您在学习编程的道路上共同进步。 一. 两个主要软件的介绍 1.KeiluVision5软件 Keil uVision5是一款集成开发…...
Android 9.0 任务栏中清除掉播放器的进程,状态栏仍有音乐播放器状态问题的解决
1.概述 在9.0的rom定制化开发中,在点击系统自带的播放器以后,播放音乐的时候,在最近任务栏recents列表中,点击全部清除,发现音乐播放器还在播放音乐,导致出现bug,完整的 解决方法,肯定是需要点击全部清除以后,音乐播放器也被杀掉进程,接下来分析下这个移除任务栏流程…...
【笔记】Helm-5 Chart模板指南-13 调是模版
调试模板 调试模板可能很棘手,因为渲染后的模板发送了kubernetes API server,可能会以格式化以外的原因拒绝YAML文件。 以下命令有助于调试: 1、helm lint 是验证chart是否遵循最佳实践的首选工具。 2、helm template --debug在本地测试渲…...
Gateway反向代理配置
前言 一般而言,反向代理都是在Nginx中来实现的,其实Gateway也可以作为反向代理服务,不过一般不会这么做,只不过最近的项目,在通过Nginx反向代理之后,iPhone手机访问接口代理地址会异常,安卓手机…...
HiveSQL——共同使用ip的用户检测问题【自关联问题】
注:参考文章: SQL 之共同使用ip用户检测问题【自关联问题】-HQL面试题48【拼多多面试题】_hive sql 自关联-CSDN博客文章浏览阅读810次。0 问题描述create table log( uid char(10), ip char(15), time timestamp);insert into log valuesinsert into l…...
猫头虎分享已解决Bug || 修改mongodb3.0副本集用户密码遇到 BeanDefinitionParsingException
博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …...
如何将ChatGPT升级到4.0版本?如何充值?
如何将ChatGPT升级到4.0版本? 在人工智能的世界里,每一个升级都可能带来革命性的变革。ChatGPT的4.0版本无疑是当前最炙手可热的话题之一,那么如何进行升级,体验到这一版所带来的全新特性呢?以下是一步一步的指南。 …...
conda 相关命令
创建并激活环境:打开终端,并创建一个新的conda环境,以确保安装的软件与M1芯片兼容。运行以下命令: conda create -n myenv python这将创建一个名为"myenv"的新环境,并安装Python。然后,激活该环境…...
探索现代Web前端开发框架:选择最适合你的工具
在当今快速发展的Web开发领域,前端开发框架的选择显得尤为关键。这些框架可以帮助我们更高效地构建出交互性强、性能卓越的用户界面。本文将带你了解几个当前最受欢迎的Web前端开发框架,并帮助你根据自己的需求选择最合适的工具。 1. React React由Fac…...
记录一下,我使用stm32实现pwm波输入,以及对频率和占空比的计算,同时通过串口输出(实现-重要)
1,首先看下半物理仿真 看下我的配置: 看下计算方法以及matlab的仿真输出的数据: timer3的ch2是选择高电平,计算频率 timer3的ch1是选择的是低电平,用来计算周期 其中TemPIpre表示的是CH2输出的值, TemPI…...
Spring Cloud使用ZooKeeper作为注册中心的示例
简单的Spring Cloud应用程序使用ZooKeeper作为注册中心的示例: 1.新建模块: 2.勾选依赖: 3.在pom.xml文件中做出部分修改及添加Spring Cloud Zookeeper 依赖版本: 完整pom文件 <?xml version"1.0" encoding&q…...
【项目日记(九)】项目整体测试,优化以及缺陷分析
💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:项目日记-高并发内存池⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你做项目 🔝🔝 开发环境: Visual Studio 2022 项目日…...
JavaScript 设计模式之外观模式
外观模式 我们为啥要使用外观模式呢,其实我们在使用各种 js 库的时候常常会看到很多的外观者模式,也正是这些库的大量使用,所以使得兼容性更广泛,通过外观者模式来封装多个功能,简化底层操作方法 const A {g: functi…...
一、基础数据结构——2.队列——3.双端队列和单调队列2
参考资料:《算法竞赛》,罗勇军 郭卫斌 著 本博客作为阅读本书的学习笔记,仅供交流学习。 建议关注 罗勇军老师博客 3. 单调队列与最大子序和问题 不限制子序列长度问题——贪心法或动态规划 HDOJ 1003 MAX SUM Max Sum Time Limit: 2000/10…...
Stable Diffusion 模型下载:Samaritan 3d Cartoon(撒玛利亚人 3d 卡通)
本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十...
【软件工程导论】实验二——编制数据字典(数字化校园系统案例分析)
数字化校园系统案例分析 问题定义实验内容编制内容1数据项数据流处理逻辑数据存储 2外部实体 问题定义 数字化校园系统期望以数字化信息和网络为基础,在计算机和网络技术上建立起对教学、科研、管理、技术服务、生活服务等校园信息的收集、处理、整合、存储、传输和…...
耳机壳UV树脂制作私模定制耳塞适合什么样的人使用呢?
耳机壳UV树脂制作私模定制耳塞适合以下人群使用: 对音质要求高的人:私模定制耳塞能够完美契合用户的耳朵形状,减少漏音和外部噪音的干扰,提供更好的音质体验。需要长时间佩戴耳机的人:私模定制耳塞能够提高佩戴舒适度…...
第三百一十回
我们在上一章回中介绍了"再谈ListView中的分隔线",本章回中将介绍showMenu的用法.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在第一百六十三回中介绍了showMenu相关的内容,它主要用来显示移动PopupMenu在页面中的位置…...
海量数据处理商用短链接生成器平台 - 4
第六章 架构核心技术-池化思想-异步结合 性能优化最佳实践 第1集 RestTemplate里面的存在的问题你知道多少- Broken pipe错误 项目就更新到第六章了,剩下的内容 放百度网盘里面了,需要的来取。 链接:https://pan.baidu.com/s/19LHPw36dsxPB7…...
基于CNN+LSTM深度学习网络的时间序列预测matlab仿真
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 卷积神经网络(CNN) 4.2 长短时记忆网络(LSTM) 4.3 CNNLSTM网络结构 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MA…...
如何控制系统安全 或 控制流氓软件
电脑 出入数据的地方是安全保障的最后一关 比如 网络 , usb 等等 控制联网流氓软件 1 在虚拟机里测试软件是否有恶意行为 恶意行为非常容易发现 比如 破坏文件 修改文件 系统不正常 像蓝屏 等等 2 网络防火墙 这是系统最关键的部分之一 像 windows 一定使用他…...
【Docker】Docker Container(容器)
文章目录 一、什么是容器?二、为什么需要容器?三、容器的生命周期容器OOM容器异常退出容器暂停 四、容器命令详解docker createdocker logsdocker attachdocker execdocker startdocker stopdocker restartdocker killdocker topdocker statsdocker cont…...
Amazon CodeWhisperer 免费 AI 代码生成助手体验分享
今年上半年,亚马逊云科技正式推出了实时AI编程助手 Amazon CodeWhisperer,还提供了供所有开发人员免费使用的个人版版本。经过一段时间的体验,我觉得 CodeWhisperer 可以处理编程工作中遇到的很多问题,并且帮助开发人员提高编程效…...
Spring Cloud Gateway 网关路由
一、路由断言 路由断言就是判断路由转发的规则 二、路由过滤器 1. 路由过滤器可以实现对网关请求的处理,可以使用 Gateway 提供的,也可以自定义过滤器 2. 路由过滤器 GatewayFilter(默认不生效,只有配置到路由后才会生效&#x…...
【Spring学习】Spring Data Redis:RedisTemplate、Repository、Cache注解
1,spring-data-redis官网 1)特点 提供了对不同Redis客户端的整合(Lettuce和Jedis)提供了RedisTemplate统一API来操作Redis支持Redis的发布订阅模型支持Redis哨兵和Redis集群支持基于Lettuce的响应式编程支持基于JDK、JSON、字符…...
C语言:内存函数
创作不易,友友们给个三连吧!! C语言标准库中有这样一些内存函数,让我们一起学习吧!! 一、memcpy函数的使用和模拟实现 void * memcpy ( void * destination, const void * source, size_t num ); 1.1 使…...
Go+:一种简单而强大的编程语言
Go是一种简单而强大的编程语言,它是在Go语言之上构建的,旨在提供更加强大、灵活和易于使用的编程体验。Go与Go语言共享大部分语法和语义,因此Go开发人员可以很快上手Go,同时也可以使用Go来编写更加简洁和高效的代码。在本文中&…...
【开源】SpringBoot框架开发数字化社区网格管理系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、开发背景四、系统展示五、核心源码5.1 查询企事业单位5.2 查询流动人口5.3 查询精准扶贫5.4 查询案件5.5 查询人口 六、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的数字化社区网格管理系统…...
Lua可变参数函数
基础规则 lua传入参数给一个function时采用的是“多余部分被忽略,缺少部分有nil补足”的形式: function f(a, b)return a or b endCALL PARAMETERS f(3) a3, bnil f(3, 4) a3, b4 f(3, 4, 5) a3, b4 (5 is discarded) unpack/pack…...
Nginx实战:3-日志按天分割
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、方式1:定时任务执行分割脚本 1.分割日志脚本 2.添加定时任务 二、方式2:logrotate配置分割 1.logrotate简单介绍 2.新增切割ngi…...
springmvc中的数据提交方式
一、单个数据提交数据 jsp代码: <h2>1单个数据提交</h2> <form action"${pageContext.request.contextPath}/one.action">name<input name"myname"/><br>age<input name"age"><input type&…...
unity2017 遇到visual studio 2017(社区版) 30日试用期到了
安装unity2017 遇到visual studio 2017 30日试用期到了,网上百度搜了好多方法都没有成功。 最后用了这个方法: 1)启动vs2017,在弹出要登录的窗口之前,迅速的点击工具-》选项-》账户,勾选在添加账户或对账户重新进行身…...
Netty应用(六) 之 异步 Channel
目录 12.Netty异步的相关概念 12.1 异步编程的概念 12.2 方式1:主线程阻塞,等待异步线程完成调用,然后主线程发起请求IO 12.3 方式2:主线程注册异步线程,异步线程去回调发起请求IO 12.4 细节注释 12.5 异步的好处…...
STM32CubeMx+MATLAB Simulink串口输出实验,UART/USART串口测试实验
STM32CubeMxMATLAB Simulink串口输出实验...
【51单片机】串口通信实验(包括波特率如何计算)
目录 串口通信实验通信的基本概念串行通信与并行通信异步通信与同步通信单工、 半双工与全双工通信通信速率 51单片机串口介绍串口介绍串口通信简介串口相关寄存器串口工作方式方式0方式1方式 2 和方式 3 串口的使用方法(计算波特率) 硬件设计软件设计1、…...
Kafka零拷贝技术与传统数据复制次数比较
读Kafka技术书遇到困惑: "对比传统的数据复制和“零拷贝技术”这两种方案。假设有10个消费者,传统复制方式的数据复制次数是41040次,而“零拷贝技术”只需110 11次(一次表示从磁盘复制到页面缓存,另外10次表示10个消费者各自…...
npm ERR! network This is a problem related to network connectivity.
遇到 ETIMEDOUT 错误时,这表明npm尝试连接到npm仓库时超时了,这通常是由网络连接问题引起的。这可能是因为网络不稳定、连接速度慢、或者你的网络配置阻止了对npm仓库的访问。以下是一些解决这个问题的步骤: 1. 检查网络连接 首先ÿ…...
【SQL高频基础题】619.只出现一次的最大数字
题目: MyNumbers 表: ------------------- | Column Name | Type | ------------------- | num | int | ------------------- 该表可能包含重复项(换句话说,在SQL中,该表没有主键)。 这张表的每…...
STM32F1 - GPIO外设
GPIO 1> 硬件框图2> 工作模式 1> 硬件框图 2> 工作模式 C语言描述 /** * brief Configuration Mode enumeration */typedef enum { GPIO_Mode_AIN 0x0, // Analog Input 模拟输入 GPIO_Mode_IN_FLOATING 0x04, // input floating 浮空输入GPIO_Mode_I…...
新增同步管理、操作日志模块,支持公共链接分享,DataEase开源数据可视化分析平台v2.3.0发布
2024年2月5日,DataEase开源数据可视化分析平台正式发布v2.3.0版本。 这一版本的功能升级包括:新增“同步管理”功能模块,用户可通过此模块,将传统数据库中的数据定时同步到Apache Doris中,让数据分析更快速࿱…...
跟着pink老师前端入门教程-day19
一、移动WEB开发之流式布局 1、 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器࿰…...
ChatGPT学习第一周
📖 学习目标 掌握ChatGPT基础知识 理解ChatGPT的基本功能和工作原理。认识到ChatGPT在日常生活和业务中的潜在应用。 了解AI和机器学习的基本概念 获取人工智能(AI)和机器学习(ML)的初步了解。理解这些技术是如何支撑…...
爬爬爬——今天是浏览器窗口切换和给所选人打钩(自动化)
学习爬虫路还很长,第一阶段花了好多天了,还在底层,虽然不是我专业要学习的语言,和必备的知识,但是我感觉还挺有意思的。加油,这两天把建模和ai也不学了,唉过年了懒了! 加油坚持就是…...