一、說明
當我們頁面上引入的組件過多時,會導致頁面加載速度變得很慢,爲了加快頁面的渲染速度,我們引入組件使用異步加載,只有當用到這個組件的時間,頁面纔會去加載組件,這樣一來,就大大加快了頁面的渲染速度。這種方式也可以減少打包後的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")
}
}
如果你覺得文章對你有幫助,幫忙點個贊可好?