對于SPA項(xiàng)目來說，如果一次性加載所有的組件，就會很明顯的出現(xiàn)打包后的 JavaScript 文件體積過大，直接影響到了 app 初次加載速度。

在vue中使用懶加載的方式很簡單
? 1.使用動態(tài)import語法，import()進(jìn)行按需加載組件;
? ?2.將加載的組件定位異步組件。

// Home.vue
<template>
? ?<div>Home page</div>
</template>
<script>
? ? ? ? export default {?
? ? ? ? ? ? ?name: "Home",
? ? ? ? ?};
</script>

// App.vue
<script>
? export default {?
? ? ?components: {? ?
? ? ? ? ? Home: () => import("./views/Home.vue"),?
? ? ? ?},
? ?};
</script>

這樣的話，home組件就只會在需要的時候加載，可以在一定程度上避免加載首頁不需要的組件，也能夠明顯的提升 app 加載速度。

上手實(shí)踐

主模板：App.vue
頁面： Page1.vue、?Page2.vue、?Page3.vue
路由：/Page1、/Page2.vue

默認(rèn)構(gòu)建--------構(gòu)建結(jié)果：

js：
? app.js：包含App、Page1、Page2完整模塊
? vendor.js：包含vue、vue-router等三方模塊

css：
?app.css：包含.App、.page1、.page2完整樣式
首屏資源：

結(jié)論：js、css資源均在首屏加載

使用import()
? ?按需加載------構(gòu)建結(jié)果：

? ? ?js：
? ? ? ? ? ?app.js：包含App完整模塊和Page1、Page2模塊的引用
? ? ? ? ? ?0.js / 1.js：包含Page1、Page2完整模塊
? ? ? ? ? ?vendor.js：包含vue、vue-router等三方模塊

css：
? ? ? ? app.css：包含.App、.page1、.page2完整樣式

首屏資源：

結(jié)論：首屏僅加載主模板和首屏頁面js代碼，但css代碼會整個加載