對于SPA項目來說嗽元，如果一次性加載所有的組件，就會很明顯的出現(xiàn)打包后的 JavaScript 文件體積過大喂击，直接影響到了 app 初次加載速度剂癌。
在vue中使用懶加載的方式很簡單
? 1.使用動態(tài)import語法，import()進行按需加載組件;
? ?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 加載速度谐檀。
上手實踐
主模板：App.vue
頁面： Page1.vue抡谐、?Page2.vue、?Page3.vue
路由：/Page1桐猬、/Page2.vue
默認構(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代碼會整個加載
