Vue首屏加载优化

发表于 分类于 ， 阅读次数： 本文字数： 257 阅读时长 ≈ 1 分钟

怎样在代码中将首屏加载时间计算出来

1
2
3
4
5
6
7
8
9
window.onload = function() {
    // 首屏时间的计算
    // console.log(performance.timing.domComplete - performance.timing.navigationStart, 'times')//已弃用
    
   const observer = new PerformanceObserver((list) => {
        console.log(list.getEntries())
    })
    observer.observe({ entryTypes: ['navigation'] })
}

vue中的异步组件

在vue框架中怎么实现当用到这个组件时才会加载

异步组件（在打包的时候单独形成分包）

正常普通导入组件

1
import cs from "./cs.vue"

异步组件

1
2
3
4
// 异步组件
const cs = defineAsyncComponent(() => {
  return import('./cs.vue')
})

首页图片

接口返回的图片为网络图片，在页面加载的时候不会占用加载时间

优化白屏显示-骨架屏

在vue页面没加载出来之前显示骨架屏

1
2
3
4
5
6
7
8
<div id="app">
  <div style="width: 35%;height: 20px;background-color: #999;margin-bottom: 10px;"></div>
  <div style="width: 50%;height: 20px;background-color: #999;margin-bottom: 10px;"></div>
  <div style="width: 60%;height: 20px;background-color: #999;margin-bottom: 10px;"></div>
  <div style="width: 80%;height: 20px;background-color: #999;margin-bottom: 10px;"></div>
  <div style="width: 100%;height: 20px;background-color: #999;margin-bottom: 10px;"></div>
  <div style="width: 100%;height: 20px;background-color: #999;margin-bottom: 10px;"></div>
</div>