vue项目性能优化（图片优化）

一、图片保存阶段

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转换文件的大小限制

vue项目性能优化（图片优化）相关推荐

Vue 项目性能优化方案
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
前端Vue 项目性能优化
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
Vue项目性能优化篇
Vue项目性能优化是个老生常谈的问题了,本人开发过程中也查过很多关于Vue项目优化的文章,每篇文章说的都差不多,本章我就结合我的心得和大家的智慧做一个总结. 1.懒加载懒加载应该是提高性能的最简单有 ...
vue项目性能优化——断点续传
vue项目性能优化用户上传文件的时候,如果文件过大,那么上传可能就会很耗时.而且一旦上传的过程中发生了网络中断,那上传就前功尽弃了.为了提高用户的体验,我们可以选择断点续传,也就是把文件切分成小块后 ...
vue项目的首屏优化策略
虽然标题是vue项目的首屏优化策略,但是里面绝大部分的方法,对于其他语言写成的单页应用同样适用 1.使用路由懒加载首屏进入时,直接加载和首屏相关路由,其他全部路由组件实现懒加载,即打开该路由时再去加 ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
web性能优化---图片优化
先来看一道易错题 ``` let a = {a: 1} let b = a // 相当于把b的地址指向a的内容 a.x = a = {n: 2} //由于a.x = a把a的地址指向了a.x 然而 ...
在vue项目中实现图片打马赛克
在vue项目中实现图片打马赛克使用image-mosaic插件. 安装依赖 npm install image-mosaic -D 项目引用 // .vue 文件 <div id=" ...
Vue项目性能优化方案
一.代码层面的优化 1.v-if和v-show的使用场景 (1)v-if适用于在运行时很少改变条件,不需要频繁切换条件的场景,属于真正的条件渲染,会确保在切换过程中,元素适当的被销毁和重建,也是惰 ...
接手同事vue项目两个月的血和泪，关于vue项目性能优化，缩短首屏加载时间
最近接手了别人做的vue项目,项目跑起来后,有些页面很卡,首屏加载也慢,打包速度也慢.于是,研究了很久vue的项目性能优化,下面我将从两个部分来详解vue项目的性能优化: 代码优化 webpack打包 ...

vue项目性能优化（图片优化）

一、图片保存阶段

二、图片压缩

三、单色icon 使用iconfont

四、制作雪碧图

五、webpack打包、小图直接转base64

vue项目性能优化（图片优化）相关推荐

最新文章

热门文章

vue项目性能优化（图片优化）

一、图片保存阶段

二、 图片压缩

三、 单色icon 使用iconfont

四、制作雪碧图

五、webpack打包、小图直接转base64

vue项目性能优化（图片优化）相关推荐

最新文章

热门文章

二、图片压缩

三、单色icon 使用iconfont