VUE 组件异步加载

一、说明

当我们页面上引入的组件过多时，会导致页面加载速度变得很慢，为了加快页面的渲染速度，我们引入组件使用异步加载，只有当用到这个组件的时间，页面才会去加载组件，这样一来，就大大加快了页面的渲染速度。这种方式也可以减少打包后的app.js文件大小。

注：在iview的UI框架中测试。

二、code

1、以下是默认的写法。

import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
 
export default {
  name: "Home",
  components: {
    HomeHeader, 
    HomeSwiper
  }
 
}

2、以下是异步组件的写法。

<script>
// import HomeHeader from "./components/Header";
// import HomeSwiper from "./components/Swiper";
 
export default {
  name: "Home",
  components: {
    HomeHeader: () => import("./components/Header"), //异步组件加载方式
    HomeSwiper: () => import("./components/Swiper")
  }
｝

如果你觉得文章对你有帮助，帮忙点个赞可好？