www.ca788.comwebpack可以按需加载图片么?

2016/12 01 14:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于www.ca788.com的点点滴滴

webpack可以按需加载图片么?

之前弄图片按需加载(也叫懒加载),便是把需求的图片都push到数组里,然后当满意某个条件(比如图片外容器出如今可视地区),就把数组里的图片拔出到src地点里。

**而webapck里有require.ensure办法可以异步按需加载JS和html模板,抵达按需加载一些遮罩层、弹出层的目标,但是webpack貌似操纵不了html里的src,

那么详细要怎样做能按需加载图片?望解答拜谢!

**

require.ensure可以按需加载图片的呀,只是这里ensure的资源必需是确定的静态资源
比如说有图片 1.png, 2.png, 3.png,你想根据情况异步加载这些图片,应该如许写
if .. require.ensure[1.png], functionrequire {..}
if .. require.ensure[2.png], functionrequire {..}
if .. require.ensure[3.png], functionrequire {..}
而不克不及如许写:
var a = 1.png
var b = 2.png
var c = 3.png
require.ensure[a], functionrequire {..} // 这里不克不及运用变量的方式
require.ensure[b], functionrequire {..} // 这里不克不及运用变量的方式
require.ensure[c], functionrequire {..} // 这里不克不及运用变量的方式

补充:
require.ensure这种异步加载资源,是为了减小打包后的文件大小

额,图片这东西本来便是按需加载啊,这是阅读器的特性。

不需求的时分src为空,需求的时分填上src的uri,你自己经过js控制dom啊

webpack的异步加载主要用于分包,便是打包的时分把那些不常用的模块剔除在外。在阅读器运转时,webpack主动加载只是一种加载的伎俩,总不克不及让你自己还在html写个<script>

而图片本身就没有说打包到一同的(dataurl方式的除外),以是跟webpack的异步加载没多大干系。

何况,按需加载图片这个需求不是很陈旧么?你还接着用过去的那些lazyload插件就成了嘛。

图片加载本身便是异步的,你把url的loader改小一点就全打包成静态资源了,普通都是8kb,小于这个的就直接内联base64了

{
  test: /\.jpe?g|png|gif|svg|webp$/,
  loader: url?limit=8192&name=imgs/[name].[ext]
}

(看完/读完)这篇文章有何感想! 来看看www.ca788.com是怎么评论的吧!

--转载请注明: www.ca788.com#亚洲城ca788手机版官网 » www.ca788.comwebpack可以按需加载图片么?

发表评论

(必填)