语音交友app源码，优化白屏降低用户负面情绪

语音交友app源码，优化白屏降低用户负面情绪
目标： 缩小打包体积，优化白屏时间

路由懒加载

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

 

使用组件路由懒加载后，该项目的路由页资源进一步减少体积，可以有效提升首次加载时间。

以上就是语音交友app源码，优化白屏降低用户负面情绪， 更多内容欢迎关注之后的文章