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')
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. 静态引入后的体积。
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 拼接变量的体积。
3. 使用 require 占位符的体积。
总结
如果项目本身体积很小,建议尽量不使用 require 方式引入图片。
使用 require 方式引入图片的话,尽量使用静态方式,必须动态引入的话,推荐使用占位符的方式引入。
另外,可以使用 image-webpack-loader
等工具进行压缩,体积会小很多。
文章来源:https://www.toymoban.com/news/detail-729827.html
另外,使用 webpack 配置 image-webpack-loader
压缩之后,会好很多!文章来源地址https://www.toymoban.com/news/detail-729827.html
到了这里,关于前端 ES6 环境下 require 动态引入图片以及问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!