什么是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/, '')}}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/680906.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有趣儿的组件(HTML/CSS)

分享几个炫酷的组件&#xff0c;起飞~~ 评论区留爪&#xff0c;继续分享哦~ 文章目录 1. 按钮2. 输入3. 工具提示4. 单选按钮5. 加载中 1. 按钮 HTML&#xff1a; <button id"btn">Button</button>CSS&#xff1a; button {padding: 10px 20px;text-tr…

使用Docker快速部署MySQL

部署MySQL 使用Docker安装&#xff0c;仅仅需要一步即可&#xff0c;在命令行输入下面的命令 docker run -d \--name mysql \-p 3306:3306 \-e TZAsia/Shanghai \-e MYSQL_ROOT_PASSWORD123456 \mysql MySQL安装完毕&#xff01;通过任意客户端工具即可连接到MySQL. 当我们执…

计算机二级C语言的注意事项及相应真题-4-程序修改

目录&#xff1a; 31.逐个比较p、q所指两个字符串对应位置中的字符&#xff0c;把ASCII值大或相等的字符依次存放到c所指数组中&#xff0c;形成一个新的字符串32.求矩阵&#xff08;二维数组)a[N][N]中每行的最小值&#xff0c;结果存放到数组b中33.将一个十进制整数转换成r(二…

那些 C语言指针 你不知道的小秘密 (完结篇)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 我会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人能…

【GO语言卵细胞级别教程】05.项目创建和函数讲解

感谢&#xff01;点点赞和评论呀&#xff01;我将继续更新 目录&#xff1a; 感谢&#xff01;点点赞和评论呀&#xff01;我将继续更新0.创建项目1.函数的引入2.注意事项3.详细介绍3.1 形参介绍 4.导入包4.1 基本知识4.2 注意事项 0.创建项目 创建目录 执行命令加载模块 cd 0…

C Primer Plus(第六版)15.9 编程练习 第7题

// // main.c // 15.9-7 // // Created by cjm on 2024/2/5. //猜测题意是用一个unsigned long 64个位去储存全部信息,一共需要20位即可 //00000000 0000000 00 0 0 0 // ID size alignment B I U #include <stdio.h> #include <stdbool.h…

【刷题记录】——时间复杂度

本系列博客为个人刷题思路分享&#xff0c;有需要借鉴即可。 1.目录大纲&#xff1a; 2.题目链接&#xff1a; T1&#xff1a;消失的数字&#xff1a;LINK T2&#xff1a;旋转数组&#xff1a;LINK 3.详解思路&#xff1a; T1&#xff1a; 思路1&#xff1a;先排序&#xf…

【python】print输出的格式化

在Python中&#xff0c;有几种方式来格式化prin函数的输出。以下是一些常见的方法&#xff1a; 1. 使用百分号 % 运算符&#xff08;传统方法&#xff09;: 使用 % 操作符来进行格式化是一种较老的方法&#xff0c;但它仍然有效。 name "Alice"age 25print("…

线性代数的本质 1 向量

向量是线性代数中最为基础的概念。 何为向量&#xff1f; 从物理上看&#xff0c; 向量就是既有大小又有方向的量&#xff0c;只要这两者一定&#xff0c;就可以在空间中随便移动。 从计算机应用的角度看&#xff0c;向量和列表很接近&#xff0c;可以用来描述某对象的几个不同…

【Java程序设计】【C00268】基于Springboot的CSGO赛事管理系统(有论文)

基于Springboot的CSGO赛事管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的赛事管理系统 本系统分为系统功能模块、管理员功能模块、参赛战队功能模块以及合作方功能模块。 系统功能模块&#xff1a;在系…

使用lodash防抖节流

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 Lodash 简介 | Lodash中文文档 | Lodash中文网 (lodashjs.com) 第一步&#xff1a;下载 npm install --save lodash 第二步&#xff1a;引入lodash import * as _ from lodash 什么是防抖和…

基于SpringBoot的助农产品采购平台

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

详细介绍推荐商品推荐算法

推荐商品推荐算法是电子商务网站、在线商店和零售商中常用的技术&#xff0c;用于向用户推荐他们可能感兴趣的商品。这些算法基于用户的历史行为、购买记录、浏览习惯和其他相关信息&#xff0c;以提高用户满意度和销售额。以下是几种常见的推荐商品推荐算法&#xff1a; …

MySQL数据库⑨_事务(四个属性+回滚提交+隔离级别+MVCC)

目录 1. 事务的概念和四个属性 2. 事务的支持版本 3. 事务的提交方式 4. 事务的相关演示 4.1 常规操作_回滚_提交 4.2 原子性_演示 4.3 持久性_演示 4.4 begin自动更改提交方式 4.5 单条SQL与事务的关系 5. 事务的隔离级别 5.1 四种隔离级别 5.2 查看与设置隔离级别…

计算机毕业设计 | vue+SpringBoot选课管理系统(附源码)

1&#xff0c;绪论 1.1 开发背景 随着我国高等教育的发展&#xff0c;数字化校园将成为一种必然的趋势&#xff0c;国内高校迫切需要提高教育工作的质量与效率&#xff0c;学生成绩管理工作是高校信息管理工作的重要组成部分&#xff0c;与国外高校不同&#xff0c;他们一般具…

数字图像处理实验记录八(图像压缩实验)

前言&#xff1a;做这个实验的时候很忙&#xff0c;就都是你抄我我抄你了 一、基础知识 1&#xff0e;为什么要进行图像压缩&#xff1a; 图像的数据量巨大&#xff0c;对计算机的处理速度、存储容量要求高。传输信道带宽、通信链路容量一定&#xff0c;需要减少传输数据量&a…

【Vivado常见问题】【DRC NSTD-1 DRC UCIO-1】无法生成bitstream(部分管脚位置或电平未指定)

假如工程就是有些信号暂时没法指定管脚呢&#xff0c;比如顶层设计端口包含串口&#xff0c;LED、按键&#xff0c;此时只想验证按键和串口&#xff0c;LED由于当前硬件限制没有对应的物理电路&#xff0c;没法确定管脚。这种情况可以使用一句脚本语言来暂时忽略该限制。 set_…

渗透测试练习题解析 3(CTF web)

1、[网鼎杯 2020 朱雀组]phpweb 1 考点&#xff1a;反序列化漏洞利用 进入靶场&#xff0c;查看检查信息&#xff0c;发现存在两个参数 func 和 p 查看页面源代码 payload&#xff1a;funcfile_get_contents&pphp://filter/resourceindex.php 整理后&#xff0c;就是 PHP 代…

【Uniapp uni-app学习与快速上手——详细讲解】

Uniapp uni-app学习与快速上手——详细讲解 1. 介绍2. Uni-app 学习资源3. 快速上手4. 开始第一个项目5. 调试和发布 1. 介绍 Uni-app 是一个使用 Vue.js 编写多端应用的前端框架。开发者可以编写一份代码&#xff0c;然后发布到iOS、Android、网页&#xff08;响应式&#xf…

docker 的常用命令详解

Docker 是一个开源的应用容器引擎&#xff0c;它允许开发者打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间不会有任何接口。下面是 Docker 的常用命令…