一對一直播原始碼，路由載入最佳化白屏

一對一直播原始碼，路由載入最佳化白屏

目標： 縮小打包體積，最佳化白屏時間

路由懶載入

const Home = () => import(/* webpackChunkName: "home" */"@/views/home/index.vue");
const MetricGroup = () => import(/* webpackChunkName: "metricGroup" */ "@/views/metricGroup/index.vue"); 
const routes = [
        {
           path: "/",
           name: "home",
           component: Home
        },
        {
           path: "/metricGroup",
           name: "metricGroup",
           component: MetricGroup
        },
      ]

元件懶載入

一般只用在需要使用者手動操作才呼叫的元件，如dialog、drawer等，我們期望使用者操作後去觸發元件的載入

const dialog= () => import(/* webpackChunkName: “dialogInfo” */ ‘@/components/dialog’);
export default:{
name: ‘homeView’,
components: {
dialog
}
}

重新打包後，home.js 和 about.js 中沒有了彈框元件的程式碼，該元件被獨立打包成 dialog.js，當使用者點選按鈕時，才會去載入 dialog.js 和 dialog.css

使用元件路由懶載入後，該專案的路由頁資源進一步減少體積，可以有效提升首次載入時間
以上就是一對一直播原始碼，路由載入最佳化白屏， 更多內容歡迎關注之後的文章