vue中异步组件实现按需加载

1.当vue项目打包后app.js文件过大时(大于1m),为了性能的优化,我们需要对各个组件实现按需加载,以此来优化加载的效果。
2.当然在项目比较小时则不需要这么做,反而会多发起一次http请求。
3.各个页面组件在router(路由)里面使用import进行异步配置。


{
    path:'/',
    name:'Home',
    component:() => import('@/pages/home/Home') //异步组件实现按需加载
},
{
    path:'/city',
    name:'City',
    component:() => import('@/pages/city/City')
}

4.在各个组件里的header,swiper等局部组件也可以实现异步按需加载。


<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default {
    name:'Home',
    components:{
        HomeHeader:() => import('./components/Header'), //异步组件按需加载
        HomeSwiper
    }
}
</script>

5.以上就是vue中项目过大时采用的异步组件按需加载,当需要异步加载时可以采用上面这种方式。
原创内容,如需转载,请标明来处,谢谢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注