原创

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")
  }
}

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

正文到此结束
本文目录