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

如果你覺得文章對你有幫助,幫忙點個贊可好?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章