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

这篇具有很好参考价值的文章主要介绍了前端 ES6 环境下 require 动态引入图片以及问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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


import 引入与 require 引入区别

在 ES6 中,import 语句是静态执行的,意味着它们在模块内部的顶层执行,并且在模块内部创建一个局部作用域。

这意味着导入的变量只在模块内部可见,并且不会影响模块外部的变量。因此,使用 import 导入的变量是不会被提升的。

require 函数是动态执行的,这意味着它在运行时执行,并且不会在模块内部创建一个局部作用域。

因此,使用 require 导入的变量是可以被提升的。

如何理解import语句是静态执行的和require函数是动态执行的?

理解 import 语句是静态执行的和require函数是动态执行的,需要先了解这两个概念的含义。

静态执行是指在编译阶段就能够确定其执行结果的代码执行方式。

在 JavaScript 中,import 语句属于静态执行的代码,也就是说,当 JavaScript 引擎执行代码时,会在编译阶段对 import 语句进行静态分析,确定所导入的模块,并在运行时加载这些模块。

动态执行是指在运行时才能确定其执行结果的代码执行方式。

在 JavaScript 中,require 函数属于动态执行的代码,也就是说,当 JavaScript引 擎执行代码时,会在运行时动态地确定所需的模块,并加载这些模块。

因此,可以理解为:

import 语句是静态执行的,因为在编译阶段就能够确定所导入的模块,从而在运行时快速加载这些模块。
require 函数是动态执行的,因为在运行时才能够确定所需的模块,需要动态地加载这些模块。

值得注意的是,由于 import 语句是静态执行的,因此在代码中不能使用变量或表达式作为模块路径,而只能使用字符串字面量。而 require 函数则可以接受变量或表达式作为模块路径,从而动态地确定所需的模块。

详细解释见:一文了解js中导入模块import、import()和require()的区别

require 引入图片方式

1. 静态引入。

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

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

require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积

require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积

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:

require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积

1. 未使用 require 的体积。

require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积

2. 静态引入后的体积。

require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积

assets by status 4.64 MiB [compared for emit] 319 assets
+ 50 assets
orphan modules 13.6 MiB [orphan] 1484 modules
runtime modules 7.47 KiB 13 modules
cacheable modules 13.1 MiB
  modules by path ./node_modules/.store/ 563 KiB 25 modules
  modules by path ./src/south/ 12.5 MiB
    ./src/south/south.js + 1408 modules 12.5 MiB [built] [code generated]
    ./src/south/assets/image/cluster/mark_red.png 2.48 KiB [built] [code generated]
  data:text/plain;base64,iVBORw0KGgoAAAAN.. 1.06 KiB [built] [code generated]
  url (ignored) 15 bytes [built] [code generated]
  zlib (ignored) 15 bytes [built] [code generated]
  https (ignored) 15 bytes [built] [code generated]
  http (ignored) 15 bytes [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  staticForMap/js/south.cesium.js (4.05 MiB)
  staticForMap/sphere/Assets/approximateTerrainHeights.json (268 KiB)
  staticForMap/sphere/Assets/Textures/waterNormals.jpg (287 KiB)
  staticForMap/js/south.cesium.js.gz (1.07 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact w
eb performance.
Entrypoints:
  south (4.05 MiB)
      staticForMap/js/south.cesium.js


webpack 5.88.2 compiled with 2 warnings in 71740 ms

3. 使用 require 拼接变量的体积。
require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积
3. 使用 require 占位符的体积。
require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积

总结

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

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

require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积
另外,可以使用 image-webpack-loader 等工具进行压缩,体积会小很多。

require引入图片,前端学习笔记,es6,require,es6环境引入图片,es6打包图片,es6打包图片体积

另外,使用 webpack 配置 image-webpack-loader 压缩之后,会好很多!文章来源地址https://www.toymoban.com/news/detail-729827.html

到了这里,关于前端 ES6 环境下 require 动态引入图片以及问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 宝塔Nginx环境安装pagespeed模块加速网站以及配置WebP格式图片加速(笔记)

    起因: 由于站点内很多本地图片每次打开要等很久于是就开始搜索相关内容 卡到了一个pagespeed这么一个模块而且折腾起来也比较简单所以就开始干活正式折腾。 正文: 首先我的环境是centos8+宝塔 【web环境lnmp(linux-ngingx-mysql-php)】 环境不一样的不要直接复制!!! 以下教

    2024年03月21日
    浏览(47)
  • 前端生成pdf之html2canvas+jsPDF,以及解决图片不显示bug

    开发背景: 需要给页面中相应的内容生成pdf,查找文档后发现要用到两个插件。html2canvas 以及 jsPDF html2canvas 给dom结构转化为canvas,然后生成各种类型图片 jsPDF 把canvas 生成的图片url 转化为pdf 参数 image:表示要插入的图片资源,可以是图片文件的路径或者base64编码字符串。

    2024年02月02日
    浏览(52)
  • 后端接口返回图片(数据流)前端怎么处理(ArrayBuffer转base64)【包含PC以及小程序】

    MDN-前端必看网站 #最后如果axios的封装时有封装响应拦截器,如下: 要给这个if判断的条件做补充 这里放axios官网的请求配置中 responseType 可选值参考(封装axios必须了解) axios官网地址

    2024年02月14日
    浏览(42)
  • 前端-ES6

    let 和 const 为了解决var的作用域的问题,而且var 有变量提升,会出现全局污染的问题 let 块状作用域,并且不能重复声明 const 一般用于声明常量,一旦被声明无法修改,但是const 可以声明一个对象,对象内部的属性是可以修改的 建议: 在默认的情况下用const, 而只有你知道

    2024年02月12日
    浏览(37)
  • es6动态模块import()

    目录 一、语法说明 二、适用场合 三、注意点 四、示例代码 五、效果 import 命令会被 JavaScript 引擎静态分析,先于模块内的其他语句执行( import 命令叫做“连接” binding 其实更合适)。 上面代码中,引擎处理 import 语句是在编译时,这时不会去分析或执行 if 语句,所以 i

    2024年02月13日
    浏览(36)
  • 解决react,<img>src使用require方法引入图片不显示问题

    解决方法: 再导入的图片后加.default即可 img src={require(\\\'../../images/bg.png\\\').default} alt=\\\"\\\" /   推荐阅读:https://www.cnblogs.com/qianxiaoniantianxin/p/14789826.html

    2024年02月15日
    浏览(44)
  • 前端基础(ES6 模块化)

    前言:前面学习了js,引入方式使用的是script s\\\"XXX.js\\\",今天来学习引入文件的其他方式,使用ES6 模块化编程,学习组件化编程中的全局注册和局部注册的方法。 目录 复习 ES6 模块化导出导入 解构赋值 导入js文件 export default 全局注册 局部注册 回顾前面学习内容,用script s\\\"

    2024年02月11日
    浏览(57)
  • 前端面试问题汇总 - ES6篇

    let 和 const 声明 : 引入块级作用域的变量声明方式,let 声明的变量可重新赋值,const 声明的变量不可重新赋值。 箭头函数 (Arrow Functions): 提供了更简洁的函数定义语法,并且没有自己的 this、arguments、super 或 new.target,这些值继承自执行上下文。 模板字符串 (

    2024年04月16日
    浏览(54)
  • 前端小白的学习之路(ES6 一)

    提示:声明:let与const,长度单位:em与rem,vw与wh,解构赋值,箭头函数(简介) 目录 一、ES6介绍 二、letconst 1.let 1) 用 let 声明的变量不能提前引用 2) 不允许重复声明变量 3) 可以产生块级作用域 { }   总结 2.const 三、 长度单位 1.em与rem 1).em 2).rem 2.vw与vh 四、 解构赋

    2024年04月15日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包