一对一直播源码，路由加载优化白屏

一对一直播源码，路由加载优化白屏

目标： 缩小打包体积，优化白屏时间

路由懒加载

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

 

使用组件路由懒加载后，该项目的路由页资源进一步减少体积，可以有效提升首次加载时间
以上就是一对一直播源码，路由加载优化白屏， 更多内容欢迎关注之后的文章