vue路由懶載入 按需載入的兩種方式

2021-10-07 16:11:26 字數 655 閱讀 5025

當專案過大時,我們可以使用按需載入來減少首屏載入的時間,避免白屏、等待時間過長等問題。

常用的懶載入方式有兩種:

1.vue的非同步元件

const routes = [

},},

}]export default new vuerouter()

這樣每乙個路由元件都被分割成了單獨乙個js檔案,切換路由時按需載入:

2.結合es6的動態import方式(目前官方推薦)

const routes = [,,

]export default new vuerouter()

這裡配置載入的時候,我在about和news元件中加入相同的chunkname:/*webpackchunkname: ****/,表示將這兩個元件打包到同乙個非同步模組中載入。而 home元件只要跟其他元件chunkname不一致,就會分割打包成單獨的乙個js檔案:

兩種方法都可以實現路由的懶載入,要注意的是import方式需要es6 +webpack2,如果是低版本還是使用reqiure吧~

vue路由按需載入(路由懶載入

目前有三種方式實現路由元件的懶載入,分別是 把路由配置,進行修改 path shopcar name shopcar component resolve require pages shopcar resolve 1 執行是開啟chrome的network,就會看到進入路由 shopcar 時,會多...

路由懶載入(按需載入)

比較常用的import 一 為什麼要使用路由懶載入 在單頁應用中,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,延時過長,不利於使用者體驗,運用懶載入可以將頁面進行劃分,按需載入頁面,可以分擔首頁所承擔的載入壓力,減少載入用時。二 定義 懶載入簡...

vue路由懶載入,元件按需載入

懶載入也叫延遲載入,即在需要的時候進行載入,隨用隨載。在單頁應用中,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,延時過長,不利於使用者體驗,而運用懶載入則可以將頁面進行劃分,需要的時候載入頁面,可以有效的分擔首頁所承擔的載入壓力,減少首頁載入用...