关于vue-cli3以上的图片优化问题以及踩的坑

图片压缩

首先说一下个人的一个误区，我以为url-loader是可以压缩图片，然而事实上是把小于设置的limit的大小的图片转成base64形式而已，dist里面的图片不会被压缩的，只是命名可以带上随机数
网上大量推荐使用的是image-webpack-loader，但是这个有个坑，就是npm下载可能会下载不完整，导致打包报错，所以要切换淘宝镜像或者使用cnpm。

image-webpack-loader

安装命令:cnpm install image-webpack-loader --save-dev
在vue.config.js配置：

chainWebpack: config => {
    config.module.rule('images')
      .test(/.(png|jpe?g|gif|svg)(?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
  }

== 但是，我部署到服务器之后，服务器那边用的是npm，导致装包的时候内容不完整，无法完成打包，还有就是不知道为啥，我的gif图片压不动，唉，幸好只是有几张大图而已，直接手动压了。。 ==
另外，记得让服务端开gzip，这个效率很高的，不过一般不用gzip压缩图片，因为越压越大。

大图片处理方式

1.如果是比较大的gif图，可以让UI同事再提供一张对应的静态图，等动图加载完成之后再换url

ele.src = smallImg;
let imgObject = new Image();
	imgObject.src = url;
	imgObject.onload = function() {
	ele.src = url;
}

2.图片不是很大的话，可以考虑上遮罩层，监听页面资源加载完毕之后再收起弹窗

this.showLoading = true;
let timer = setInterval(() => {
	if (document.readyState === 'complete') {
		this.showLoading = false;
		window.clearInterval(timer)
	}
}, 500)

害，要是说的有地方不对，欢迎指教，这个图片问题我也是第一次搞，踩不少坑

最后

以上就是仁爱芒果为你收集整理的关于vue-cli3以上的图片优化问题以及踩的坑的全部内容，希望文章能够帮你解决关于vue-cli3以上的图片优化问题以及踩的坑所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。