1.多个页面白屏优化
首先,在public公共文件下index.html中编写需要加载的图片;
先样式给display:none;需要判断是在哪个页面展示出来,用正则判断
或者window.location.pathname打印出在哪个页面;
然后,使用window.location.pathname.indexOf("/residenceApplication")判断这个字段是否存在
判断写好之后,需要在该优化数据加载完毕之后,把它隐藏掉;
因为这里是vue3页面,直接写的话会报错,需要给一个类型,建议用变量接收一下,或者写
(document.getElementById('shareDetails') as any).style.display = 'none';
注意:
1.pulbic下的index.html文件,要写原生样式以及逻辑
2.不能使用预编译器:scss、sass、less等
3.不能使用rem,可以用vh、vw、%、em
4.style样式一定要卸载head里面
5.不能使用scoped
2.图片优化
可以使用tingPNG解压图片,直接把要解压的图片拖到此处,图片会被直接解压;TinyPNG – Compress WebP, PNG and JPEG images intelligently
图片解压之后,还可以使用菜鸟工具中的base64解压,减少 HTTP 请求,加快小图像的加载时间。图片转 BASE64 编码 | 菜鸟工具
结束~~~