云之彼端的博客

最近入职了新公司，接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化，把经验分享出来，注意本分享只针对打包大小上做的优化。打包分析vue cli已经集成了打包分析可直接使用，在package.json中script中加入"report": "vue-cli-service build --report"，执行npm run report打包会生成report.html文件，直接在浏览器打开可查看各个包的大小，对其进行针对性分析，优化。如下图。打包优化1.减少无用库的引用因为该vue项目是

H5 离线包方案webview加载优化接口预加载 页面数据localstore缓存

博客地址针对网站中的小图标不仅有精灵图的解决方案，现在比较流行的还有字体图标。通过自定义字体字符代替图片实现一样的效果。原理计算机操作系统里面每个字符都有一个unicode编码,根据不同的编码浏览器会自动帮你找到对应的图形去渲染。而字体文件的作用是规定某个字符应该用什么形状来显示。unicode字符集里面，E000 至 F8FF属于用户造字区。原本是空的，用户可以在字体文件里面随便定义这些字...

背景当前各种网站图片的大量使用很大程度上丰富了网站内容，方便了人们阅读，但与之而来的大量图片的使用，在网站加载时增加了负担，如果不能很好的及时有效的加载这些图片，会造成图片展示不全或不展示等一系列用户体验不好的问题。从而会降低用户对整体网站的体验度。进而针对图片的优化，有很多的解决方案。这篇主要讨论的是图片预加载方案。“预加载”顾名思义就是事先加载，它预判用户可能的操作，事先加载好可能浏览的图...

[原文地址] (http://www.wellppy.com/2019/08/09/图片懒加载/)背景在当前网站图片资源占比越来越重，特别是电商这类网站引入了大量的图片资源增加了网站加载的负担。大量的图片资源请求，会导致网站的加载变慢，变卡，导致首屏时间变长，甚至崩溃，影用户体验。针对同一网页中有许多图片的场景，有图片懒加载的优化方案。原理在一个网站中，网页的长度会远远大于浏览器的高度。而...

一、sprite精灵图是什么在网页开发过程中，在网页中经常会用到一些小图标，虽然是小图标但是每个小图标都会发起一个http请求。如果整个网站使用很多这种小图标，那就会产生很多http请求。这个无疑会增加网站的负担，降低网站的性能。CSS sprite技术的出现解决了这个问题，通过将很多个这种小图标融合到一张大的图片中，再通过css的background-image,background- rep...