首屏加载慢的解决

1. 什么是首屏加载？

首屏加载时间，指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间，此时整个网页不一定全部渲染完成，但需要展示当前视窗需要的内容，首屏加载是用户体验的重要环节

2. 如何计算首屏加载时间

在浏览器F12检查控制台输入以下代码，可以得到首屏加载时间,具体操作如图：
(performance.timing.domComplete - performance.timing.navigationStart)/1000

3. 解决方案

• 路由懒加载

const routes = [
   {
   	path:"details",
   	name:"Details",
   	component: () => import('./components/details.js')
   }
]

• 静态资源本地缓存
  后端返回资源：采用HTTP缓存
  前端合理利用localStorage
  引入CDN资源
• UI组件库按需加载
• 避免组件重复打包，即将公共组件抽离出来
• 图片资源进行压缩，页面图标可以使用字体图标，雪碧图等，减轻http压力
• 开启GZip压缩，拆包后用gzip进行压缩，安装compression-webpack-plugin配置