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

前端 ES6 环境下 require 动态引入图片以及问题

前端 ES6 环境下 require 动态引入图片以及问题

    • require 引入图片方式
    • 打包体积对比
    • 总结

ES6 环境中,通过 require 的方式引入图片很方便,一直以来也没有出过什么问题,后来项目中,需要动态引入图片。

require 动态引入也容易实现,百度也能搜到很多博客介绍。

偶然发现项目中 require 引入图片好像对打包体积影响挺大,js 会变大很多,经过测试,终于确定原因,这里记录一下。

本文主要包括:require 引入图片方式、打包体积对比。


require 引入图片方式

1. 静态引入。

静态引入没什么可说的,根据相对位置或者绝对位置引入即可。

require('@/south/assets/image/skybox/sky1/00h+00.jpg')
require('../assets/image/skybox/sky1/00h+00.jpg')

在这里插入图片描述

2. 动态引入图片

动态引入基本是有两种方式,实际效果相同,但是对体积的效果相差挺大。

第一种方式,变量拼接:

const imgName = "00h+00";
require('../assets/image/skybox/sky1/' + imgName + '.jpg')

第二种方式,占位符:

const imgName = "00h+00";
require(`../assets/image/skybox/sky1/${imgName}.jpg`);

打包体积对比

引入图片体积,大概有 100K,0.1M:

在这里插入图片描述

1. 未使用 require 的体积。

在这里插入图片描述

2. 静态引入后的体积。

在这里插入图片描述

3. 使用 require 拼接变量的体积。
在这里插入图片描述
3. 使用 require 占位符的体积。
在这里插入图片描述

总结

如果项目本身体积很小,建议尽量不使用 require 方式引入图片。

使用 require 方式引入图片的话,尽量使用静态方式,必须动态引入的话,推荐使用占位符的方式引入。

在这里插入图片描述
另外,可以使用 image-webpack-loader 等工具进行压缩,体积会小很多。

在这里插入图片描述

另外,使用 webpack 配置 image-webpack-loader 压缩之后,会好很多!

相关文章:

前端 ES6 环境下 require 动态引入图片以及问题

前端 ES6 环境下 require 动态引入图片以及问题require 引入图片方式打包体积对比总结ES6 环境中,通过 require 的方式引入图片很方便,一直以来也没有出过什么问题,后来项目中,需要动态引入图片。 require 动态引入也容易实现&am…...

PCL 欧氏聚类分割

文章目录 一、应用背景1、点云分割算法的属性2、点云分割的挑战二、实现过程三、主要函数及代码实现1、主要函数2、核心代码3、效果实现四、参考文献一、应用背景 1、点云分割算法的属性 1)鲁棒性,比如树木是具有与汽车相区别的特征的,当点云数据的特征数量增加时,分割算…...

一台服务器最大能支持多少条TCP连接

一、一台服务器最大能打开的文件数 1、限制参数 我们知道在Linux中一切皆文件,那么一台服务器最大能打开多少个文件呢?Linux上能打开的最大文件数量受三个参数影响,分别是: fs.file-max (系统级别参数)&am…...

Teradata退出中国,您可以相信中国数据库!

继Adobe、Tableau、Salesforce之后,2023年2月15日,数仓软件巨头Teradata宣布将逐步结束在中国的直接运营。数仓界的“黄埔军校”仓皇撤出中国市场给出的理由非常含蓄:Teradata对中国当前和未来商业环境的慎重评估,我们做了一个艰难…...

markdown组合数学公式

markdown组合数学公式 $C_n^m$CnmC_n^mCnm​ $A_n^m$AnmA_n^mAnm​ $$\binom{m}{nm1}$$(mnm1)\binom{m}{nm1}(nm1m​) $${m\choose nm1}$$(mnm1){m\choose nm1}(nm1m​)...

Golang实践录:一个字符串比较示例

本文介绍两个含中文的字符串且针对相同位置字符的比较,给出实现代码。 起因 某工程需将接收的字符串和数据库里的指定字段值对比,该字符串含中文,两者允许个别字符有差异,差异数量3及以下的,认为相同。 字符串默认用…...

Linux后台开发工具箱-葵花宝典

目录目录 11. 前言 52. 脚本类工具 52.1. 双引号和单引号 52.2. 环境变量和变量 52.3. sed命令-字符串文本操作 62.4. sed和awk使用外部变量 62.5. awk 应用 62.5.1. awk给外部变量赋值 62.5.2. awk 多字符串分割 72.6. 日期操作 72.7. 设置shell模式 82.8. 设置shell提示 82.9…...

http的请求上下文

1.引入: 上下文是指HTTP框架为每个HTTP请求所准备的结构体。 HTTP框架定义的这个上下文是针对于HTTP请求的, 而且一个HTTP请求对应于每一个HTTP模块都可以有一个独立的上下文结构体(并不是一个请求的上下文由所有HTTP模块共用) 。…...

【MySQL】MySQL表的增删改查(进阶)

✨个人主页:bit me👇 ✨当前专栏:MySQL数据库👇 ✨算法专栏:算法基础👇 ✨每日一语:悟已往之不谏,知来者之可追。实迷途其未远,觉今是而昨非。 目 录🎄一. 数…...

C++ Primer Plus习题及答案-第十八章

习题选自:C Primer Plus(第六版) 内容仅供参考,如有错误,欢迎指正 ! C decltype和返回类型后置 左右值引用和移动语义 C11 新的类功能 C11 Lambda表达式 C11 包装器function 复习题 1. 使用用大括号括起的初始化列表语法重写下述代码。重写后…...

Redis事务控制

1.Redis事务控制的相关命令 命令名作用MULTI表示开始收集命令,后面所有命令都不是马上执行,而是加入到一个队列中。EXEC执行MULTI后面命令队列中的所有命令。DISCARD放弃执行队列中的命令。WATCH“观察“、”监控“一个KEY,在当前队列外的其…...

Springcloud OpenFeign 详解

一、概述OpenFeign是springcloud在Feign的基础上支持了SpringMVC的注解,整合了hystrix,同时,可以和Eureka和ribbon配合使用,如RequestMapping等等。OpenFeign的FeignClient可以解析SpringMVC的RequestMapping注解下的接口&#xf…...

软件测试期末

考原题就是爽 软件测试技术 知识点整理 https://wenku.baidu.com/view/524c900f4b2fb4daa58da0116c175f0e7cd11913.html 关键知识点 https://www.cnblogs.com/whylaughing/category/813559.html?page1 边界值法不选择无效数据 边界值分析法的基本思想 选取正好等于&am…...

关于Java的深拷贝和浅拷贝

文章目录1.拷贝的引入1.1引用拷贝1.2对象拷贝2.深拷贝与浅拷贝2.1浅拷贝2.2深拷贝1.拷贝的引入 1.1引用拷贝 创建一个指向对象的引用变量的拷贝 Teacher teacher new Teacher("Taylor",26); Teacher otherteacher teacher; System.out.println(teacher); System…...

固定值电阻的检测方法总结

🏡《总目录》 目录 1,概述2,测量方法3,检测方法3.1,读值3.2,测量3.3,排故4,总结1,概述 本文简单总结固定值电阻的测量与检查方法要点和注意事项。 2,测量方法 对于固定值电阻的测量来讲,直接将万用表红黑表笔分别插入到如下图所示的红色和黑色接线端。然后将万用表…...

打印机相关

打印机相关 打印机协议 ipp,printer-job-language,lpd协议。他们的默认端口分别是631,9100和515. printer-job-language(RAW协议) 9100端口的printer-job-language,又称为RAW协议。目前遇到的问题是,此端口发送数据,打印机直接打印,除非发送正确的printer-job-lan…...

入门力扣自学笔记235 C++ (题目编号:2347)

2347. 最好的扑克手牌 题目: 给你一个整数数组 ranks 和一个字符数组 suit 。你有 5 张扑克牌,第 i 张牌大小为 ranks[i] ,花色为 suits[i] 。 下述是从好到坏你可能持有的 手牌类型 : "Flush":同花&…...

k8s-二进制部署

文章目录一、环境二、步骤1、安装cfssl工具2、部署etcd集群3、在node节点安装docker组件4、安装flannel组件部署master节点组件部署node节点部署kube-proxy组件三、测试一、环境 角色服务器地址组件master192.168.174.140kube-apiserver,kube-controller-manager&a…...

前缀和差分(C/C++)

目录 1. 前缀和的定义 2. 一维前缀和 2.1 计算公式 2.2 用途 2.3 小试牛刀 3. 二维前缀和 3.1 用途 1. 前缀和的定义 对于一个给定的数列A,他的前缀和数中 S 中 S[ i ] 表示从第一个元素到第 i 个元素的总和。 如下图:绿色区域的和就是前缀和数组…...

回文子串的数量[寻找回文子串的完整思路过程]

寻找回文子串的完整思路过程前言一、回文串的数量二、动态规划1、完整思考过程2、go总结参考文献前言 回文字符串,就是从左遍历和从右遍历的字符是相同顺序的,转换一下,就是该字符串是对称的。寻找回文子串面临两个直接的问题,1-…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...

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…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

路由基础-路由表

本篇将会向读者介绍路由的基本概念。 前言 在一个典型的数据通信网络中&#xff0c;往往存在多个不同的IP网段&#xff0c;数据在不同的IP网段之间交互是需要借助三层设备的&#xff0c;这些设备具备路由能力&#xff0c;能够实现数据的跨网段转发。 路由是数据通信网络中最基…...

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...