84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
webpack可以按需加载图片么?
之前弄图片按需加载(也叫懒加载),就是把需要的图片都push到数组里,然后当满足某个条件(比如图片外容器出现在可视区域),就把数组里的图片插入到src地址里。
**而webapck里有require.ensure()方法可以异步按需加载JS和html模板,达到按需加载一些遮罩层、弹出层的目的,但是webpack貌似操作不了html里的src,
那么具体要怎么做能按需加载图片?望解答拜谢!
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
图片加载本身就是异步的,你把url的loader改小一点就全打包成静态资源了,一般都是8kb,小于这个的就直接内联base64了
{ test: /\.(jpe?g|png|gif|svg|webp)$/, loader: 'url?limit=8192&name=imgs/[name].[ext]'}
webpack的异步加载主要用于分包,就是打包的时候把那些不常用的模块剔除在外。在浏览器运行时,webpack自动加载只是一种加载的手段,总不能让你自己还在html写个
而图片本身就没有说打包到一起的(dataurl形式的除外),所以跟webpack的异步加载没多大关系。
况且,按需加载图片这个需求不是很古老么?你还接着用以前的那些lazyload插件就成了嘛。
require.ensure可以按需加载图片的呀,只是这里ensure的资源必须是确定的静态资源比如说有图片 1.png, 2.png, 3.png,你想根据情况异步加载这些图片,应该这样写if (..) require.ensure(['1.png'], function(require) {..})if (..) require.ensure(['2.png'], function(require) {..})if (..) require.ensure(['3.png'], function(require) {..})而不能这样写:var a = '1.png'var b = '2.png'var c = '3.png'require.ensure([a], function(require) {..}) // 这里不能使用变量的形式require.ensure([b], function(require) {..}) // 这里不能使用变量的形式require.ensure([c], function(require) {..}) // 这里不能使用变量的形式
补充: require.ensure这种异步加载资源,是为了减小打包后的文件大小
图片加载本身就是异步的,你把url的loader改小一点就全打包成静态资源了,一般都是8kb,小于这个的就直接内联base64了
webpack的异步加载主要用于分包,就是打包的时候把那些不常用的模块剔除在外。在浏览器运行时,webpack自动加载只是一种加载的手段,总不能让你自己还在html写个
而图片本身就没有说打包到一起的(dataurl形式的除外),所以跟webpack的异步加载没多大关系。
况且,按需加载图片这个需求不是很古老么?你还接着用以前的那些lazyload插件就成了嘛。
require.ensure可以按需加载图片的呀,只是这里ensure的资源必须是确定的静态资源
比如说有图片 1.png, 2.png, 3.png,你想根据情况异步加载这些图片,应该这样写
if (..) require.ensure(['1.png'], function(require) {..})
if (..) require.ensure(['2.png'], function(require) {..})
if (..) require.ensure(['3.png'], function(require) {..})
而不能这样写:
var a = '1.png'
var b = '2.png'
var c = '3.png'
require.ensure([a], function(require) {..}) // 这里不能使用变量的形式
require.ensure([b], function(require) {..}) // 这里不能使用变量的形式
require.ensure([c], function(require) {..}) // 这里不能使用变量的形式
补充: require.ensure这种异步加载资源,是为了减小打包后的文件大小