一对一直播源码,路由加载优化白屏
一对一直播源码,路由加载优化白屏
目标: 缩小打包体积,优化白屏时间
路由懒加载
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
使用组件路由懒加载后,该项目的路由页资源进一步减少体积,可以有效提升首次加载时间
以上就是一对一直播源码,路由加载优化白屏, 更多内容欢迎关注之后的文章