vue的异步组件按需加载

Posted 2021-01-11 chenlw

当build打包后，app.js过大的时候，可以考虑用异步组件的方式。

import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIcons from "./components/Icons";
import HomeRecommend from "./components/Recommend";
import HomeWeekend from "./components/Weekend";

export default {  
    name: "Home", 
    components: {   
        HomeHeader,     
        HomeSwiper,    
        HomeIcons,   
        HomeRecommend,   
        HomeWeekend  
    } 
}

            

　　以下是异步组件加载方式：

export default {
  name: ‘Home‘,

  components: { 
    //异步组件加载方式    
    HomeHeader: () => import("./components/Header"),  
    HomeSwiper: () => import("./components/Swiper"),
    HomeIcons: () => import("./components/Icons"),
    HomeRecommend: () => import("./components/Recommend"),   
    HomeWeekend: () => import("./components/Weekend")  
  }
}