vue项目性能优化(图片优化)
一、图片保存阶段ps 或 sketch 等图片,保存时或保存后,使用photoshop.jpg 图片选择 “连续”.png图片选择 “优化”二、 图片压缩访问https://tinypng.com对所有图片进行压缩,后替换(图片质量不变,可多图一起压缩)三、 单色icon 使用iconfont访问 http://www.iconfont.cn/上传和使用iconfont四、制作雪碧图1.一个网页可
·
一、图片保存阶段
ps 或 sketch 等图片,保存时或保存后,使用photoshop
- .jpg 图片选择 “连续”
- .png图片选择 “优化”
二、 图片压缩
- 访问 https://tinypng.com 对所有图片进行压缩,后替换(图片质量不变,可多图一起压缩)
三、 单色icon 使用iconfont
- 访问 http://www.iconfont.cn/ 上传和使用iconfont
四、制作雪碧图
1.一个网页可能有很多很多的小图标,就需要向服务器发送很多次访问请求,一是造成资源浪费,二是会导致访问速度变慢。这时候,把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题。
显示雪碧图的条件:
1)需要一个设置好宽和高的容器
2)需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置。
调试方法:可以用浏览器自带的调试工具进行调试(如chrome浏览器按f12即可进行调试,慢慢移动background-position的值来达到理想的效果)
我们把表情放在一张图片上,图片的背景色为透明!
操作步骤:将图片向左移X个单位,然后向上移Y个单位,其中XY的具体数值是需要个人调试至合适位置得出的!
代码为:background-position:-xpx -ypx;
五、webpack打包、小图直接转base64
图片的处理
1. 小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。 2. 大于的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否则会有问题
- 安装url-loader
- 安装file-loader
cnpm install url-loader file-loader --save-dev
- 新建 vue.config.js 配置如下:
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: 6800,esModule: false}))
}
注意:修改里面的limit的数值即可修改图片进行base64转换文件的大小限制
更多推荐
已为社区贡献43条内容
所有评论(0)