依赖预构建与静态资源处理

依赖预构建

vite是一个基于浏览器原生ES-Module的前端构建工具。
当你首次启动vite的时候,vite会在本地加载你的站点之前预构建项目依赖。

原因:

  • CommonJS和UMD兼容性:在开发阶段中,Vite的开发服务器将所有的代码视为原生ES模块。因此,Vite必须先将以CommonJS或UMD形式提供的依赖项转换为ES模块。
  • 性能:为了提高后续页面的加载性能,Vite将那些具有许多内部模块的ESM依赖项转换为单个模块。有些包将他们的ES模块构建成许多单独的文件,例如,lodash-es有超过600个内置模块,当我们执行import引入的时候,浏览器会同时发出600多个HTTP请求!大量的请求会导致浏览器端的网络拥堵,使页面加载变得明显缓慢。预构建会将lodash-es预构建为单个模块,现在我们只需要一个HTTP请求。

依赖预构建仅仅适用于开发模式,并使用esbuild将依赖项转换为ES模块。

预构建的内容是什么?

一个项目里,存在很多模块,并不是所有的模块都会被预构建,只有裸依赖(bare import)会执行依赖预构建。

什么是裸依赖呢?
//bare import
import xxx from  "vue"
import xxx from "vue/xxx"
//下面不是
import xxx from "./foo.ts"

用名称去访问的模块是裸依赖,用路径去访问的模块不是
Node.js定义了bare import的寻址机制——在当前目录下的node_modules下寻找
裸依赖一般是npm安装的模块,是第三方模块,不是我们自己写的代码,一般情况下不会被修改,因此对这部分的模块提前构建,有利于提升性能。
相反,如果对开发者写的代码执行预构建,将项目打包成chunk文件,当开发者修改代码时,需要再重新执行构建,在打包成chunk,反而影响性能。

事实上,vite会判断模块的实际路径,是否在node_modules中:

  • 实际路径在node_modules的模块会被预构建,这是第三方模块
  • 实际路径不在node_modules的模块,证明该模块是通过文件链接,连接到node_modules的,是开发者自己写的代码,不执行预构建

缓存

文件系统缓存

vite将预构建的依赖项缓存到node_modules/.vite中。它会基于以下几个来源决定是否需要重新运行预构建步骤:

  • 包管理器的锁文件内容:package.lock.json,yarn.lock等
  • 补丁文件夹的修改时间patch-package
  • vite.config.js中的相关字段
  • NODE_ENV的值

只有上述的其中一项发生改变的时候,才需要重新运行预构建。
如果出于某种原因想要强制重新预构建,可以在启动开发服务器的时候指定 --force选项,或者手动删除node_modules/.vite缓存目录

浏览器缓存

已经预构建的依赖请求使用HTTP进行强缓存,以提高开发期间页面重新加载的性能。一旦被缓存,这些请求将永远不会再次访问开发服务器。

静态资源处理

在vue中,静态资源分为两种:
1.存放在public中的静态资源,这部分资源会被完全的复制,不会经过构建工具处理,可以通过根绝对路径来引用他们。

  • 路径设置时不需要添加public/,默认加载public文件夹下的图片
  • 不需要使用require(当构建工具为webpack的时候,因为webpack使用的是commrnJS规范)
    2.存放在assets目录下,属于代码的一部分,只支持相对路径,会被构建工具打包,并且和样式会被压缩打到一起,可以避免额外的网络请求。
  • 需要使用require(当构建工具为webpack的时候,因为webpack使用的是commrnJS规范)
    vite怎样加载静态资源
    我们主要讨论public目录下的静态资源。
    主要从js、jpg、json、mp4、css五类文件讨论。
    当我们在一个项目中引入这五类资源,并且打印的时候,我们可以看到
    在这里插入图片描述

执行dev命令,我们可以看到,
在这里插入图片描述

所有静态资源都被引入了,但是vite对他们的处理方式并不同,css、js文件被直接输出内部定义的内容,json被转为了对象形式,而url和mp4被输出他们文件的url地址。
当然,我们可以通过一些手段来控制css和js也输出他们的路径。
比如:
1.assetsInclude选项配置
在这里插入图片描述

注意,这个配置里不能写json文件哦,写了要报错的。
2.使用?url后缀,显式的导入一个url
在这里插入图片描述

同样的,我们也能控制img和mp4以原文件输出
3.使用?raw后缀,将文件作为源文件输出
在这里插入图片描述
在这里插入图片描述

这时候jpg和mp4会以流的形式输出。
这个时候要说到另一个文件格式,svg格式,他和图片一样,也会被vite处理输出为url,但是当用?raw后缀的时候,会被直接输出为HTML。

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

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

相关文章

浅谈日常使用的 Docker 底层原理-三大底座

适合的读者,对Docker有过简单了解的朋友,想要进一步了解Docker容器的朋友。 前言 回想我这两年,一直都是在使用 Docker,看过的视频、拜读过的博客,大都是在介绍 Docker 的由来、使用、优点和发展趋势,但对…

VMWare Workstation 17 Pro 网络设置 桥接模式 网络地址转换(NAT)模式 仅主机模式

文章目录 网络模式配网要求CentOSDHCP虚拟网络桥接模式默认配置测试手动配置测试 网络地址转发模式 (NAT)还原配置虚拟网络配置默认配置测试手动配置测试 仅主机模式 网络模式 桥接模式: 主机与虚拟机对等, 虚拟机注册到主机所在的局域网, 会占用该网络的IP该局域网内的所有机…

简单认识镜像底层原理详解和基于Docker file创建镜像

文章目录 一、镜像底层原理1.联合文件系统(UnionFS)2.镜像加载原理3.为什么Docker里的centos的大小才200M? 二、Dockerfile1.简介2.Dockerfile操作常用命令 三、创建Docker镜像1.基于已有镜像创建2.基于本地模板创建3.基于Dockerfile创建4.Dockerfile多阶段构建镜像 一、镜像底…

产品经理如何提高用户画像效果?SIKT模型

产品经理做用户画像,最担心被业务方反馈:没效果。这往往是由用户画像与业务场景脱节造成的。那么我们该如何从业务场景出发,让用户画像更有效?一般来说,我们可以采用SIKT模型解决这个问题。 用户画像 ​ 1、SIK…

【操作系统】虚拟内存相关分段分页页面置换算法

虚拟内存是什么? 【进程地址空间虚拟地址空间C/C程序地址空间就是那个4G的空间】 虚拟内存是操作系统内核为了对进程地址空间进行管理,而设计的一个逻辑意义上的内存空间概念。在程序运行过程中,虚拟内存中需要被访问的部分会被映射到物理内…

漏洞指北-VluFocus靶场专栏-工具篇

漏洞指北-VluFocus靶场专栏-番外篇奇技淫巧 🌸1、burp suite 、中国蚁剑工具、Strut2扫描软件地址🌸🌸2、burp suite使用🌸step1 浏览器开启代理,**推荐使用:SwitchyOmega** step2 确认浏览器端口和burp su…

nginx反向代理、负载均衡

修改nginx.conf的配置 upstream nginx_boot{# 30s内检查心跳发送两次包,未回复就代表该机器宕机,请求分发权重比为1:2server 192.168.87.143 weight100 max_fails2 fail_timeout30s; server 192.168.87.1 weight200 max_fails2 fail_timeout30s;# 这里的…

LVS负载均衡群集部署(LVS-NAT模型实例)

一、集群 1.1集群的含义 Cluster,集群、群集,为解决某个特定问题将多台计算机组合起来形成的单个系统。 由多台主机构成,但对外只表现为一个整体。 1.2群集的三种类型 1.2.1负载均衡群集 LB: Load Balancing,负载均衡&#x…

Linux 虚拟机Ubuntu22.04版本通过远程连接连接不上,输入ifconfig只能看到127.0.0.1的解决办法

之前给虚拟机配置静态IP之后,可以直接通过主机Vscode远程连接。但是前一段时间把主机的TCP/IPV4静态IP设置了一下之后,再连接虚拟机就连不上了,于是参考解决虚拟机不能上网ifconfig只显示127.0.0.1的问题,又可以连接上了&#xff…

Linux系统下消息中间件RocketMQ下载、安装、搭建、配置、控制台rocketmq-dashboard的安装保姆级教程 rocketmq ui

这里给出我使用的 RocketMQ 版本(5.1.3)、RocketMQ-Dashboard 版本的百度网盘链接: 链接:https://pan.baidu.com/s/1HaKBBDGWZ0WKLGgVwIG9pw 提取码:1234 文章目录 一. 官网下载安装二、启动NameServer三、启动Broker四…

Qt项目报错:Cannot run compiler ‘clang++‘. /bin/sh: 1: clang++: not found

在一台旧电脑上装了深度系统,装了Qt,导入项目, build提示 clang找不到: Project ERROR: Cannot run compiler clang. Output: /bin/sh: 1: clang: not found Maybe you forgot to setup the environment? Error while parsing …

Jenkins+Jmeter集成自动化接口测试并通过邮件发送测试报告

一、Jenkins的配置 1、新增一个自由风格的项目 2、构建->选择Excute Windows batch command(因为我是在本地尝试的,因此选择的windows) 3、输入步骤: 1. 由于不能拥有相同的jtl文件,因此在每次构建前都需要删除jtl…

VS2022远程Linux使用cmake开发c++工程配置方法

文章目录 远程连接CMakePresets.json的配置Task.vs.json配置launch.vs.json配置最近使用别人在VS2015上使用visualgdb搭建的linux开发环境,各种不顺手,一会代码不能调转了,一会行号没了,调试的时候断不到正确的位置,取消的断点仍然会进。因此重新摸索了一套使用vs的远程开…

基于Python的高校学生成绩分析系统

随着计算机技术发展,计算机系统的应用已延伸到社会的各个领域,大量基于网络的广泛应用给生活带来了十分的便利。所以把高校成绩分析与现在网络相结合,利用计算机搭建高校成绩分析系统,实现高校成绩分析的信息化。则对于进一步提高…

深入理解 Flutter 图片加载原理 | 京东云技术团队

前言 随着Flutter稳定版本逐步迭代更新,京东APP内部的Flutter业务也日益增多,Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验,但随之也带来了一些OOM问题,通过线上监控信息…

ubuntu 编译安装nginx及安装nginx_upstream_check_module模块

如果有帮助到你,麻烦点个赞呗~ 一、下载安装包 # 下载nginx_upstream_check_module模块 wget https://codeload.github.com/yaoweibin/nginx_upstream_check_module/zip/master# 解压 unzip master# 下载nginx 1.21.6 wget https://github.com/nginx/…

【C++奇遇记】构造函数 | 初始化列表

🎬 博客主页:博主链接 🎥 本文由 M malloc 原创,首发于 CSDN🙉 🎄 学习专栏推荐:LeetCode刷题集 数据库专栏 初阶数据结构 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如…

操作系统练习:在Linux上创建进程,及查看进程状态

说明 进程在执行过程中可以创建多个新的进程。创建进程称为“父进程”,新的进程称为“子进程”。每个新的进程可以再创建其他进程,从而形成进程树。 每个进程都有一个唯一的进程标识符(process identifier,pid)。在L…

Java之接口

作者简介: zoro-1,目前大一,正在学习Java,数据结构等 作者主页: zoro-1的主页 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖💖 Java之接口 接口的概念语法规则接口特性接口使用案…

数据结构<树和二叉树>顺序表存储二叉树实现堆排

✨Blog:🥰不会敲代码的小张:)🥰 🉑推荐专栏:C语言🤪、Cpp😶‍🌫️、数据结构初阶💀 💽座右铭:“記住,每一天都是一個新的開始&#x1…