vue 异步组件实现按需加载

 当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
  }
 
}

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

<script>
// 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: () => import("./components/Header"), //异步组件加载方式
    HomeSwiper: () => import("./components/Swiper"),
    HomeIcons: () => import("./components/Icons"),
    HomeRecommend: () => import("./components/Recommend"),
    HomeWeekend: () => import("./components/Weekend")
  }
｝