多个页面白屏优化以及图片缓存优化

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 编码 | 菜鸟工具

 结束~~~