vue 按需加載


問題

一個單頁面應用,采用組件化的開發模式,沒有采用懶加載,運用webpack打包,每次啟動首頁都會加載全部組件,但此時只是訪問了首頁而已,就造成了大量組件污染加載的情況。

需求

只在訪問當前頁面時加載對應組件,避免頁面組件全部加載。

解決

我們可以通過實現路由懶加載和異步組件解決問題。

在項目中的具體實現

路由懶加載

在vue項目中使用路由懶加載非常簡單,我們要做的就是把路由對應的組件定義成異步組件:

router.js

// 單獨引入 import App from '../App'  // 其他路由異步加載 // require.ensure 是 Webpack 的特殊語法,用來設置 code-split point,實現代碼分割 const home = r => require.ensure([], () => r(require('../page/home/home')), 'home') const city = r => require.ensure([], () => r(require('../page/city/city')), 'city')  export default [{     path: '/',     component: App, //頂層路由,對應index.html     children: [ //二級路由。對應App.vue         //地址為空時跳轉home頁面         {             path: '',             redirect: '/home'         },         //首頁城市列表頁         {             path: '/home',             component: home         },         //當前選擇城市頁         {             path: '/city/:cityid',             component: city             // or             //component: resolve => { require(['../page/city/city'], resolve); }         }     ] }] 

注意

文檔:webpack 如何使用 require.ensure() 進行代碼拆分。

// require.ensure()語法: require.ensure(dependencies: String[], callback: function(require), chunkName: String) 

require接收三個參數:

  • 第一個參數是一個數組,表示所依賴的模塊,例如['moduleA', 'moduleB']
  • 第二個參數是一個回調函數,當前面指定的模塊都加載成功后,它將被調用
  • chunkName 是提供給這個特定的 require.ensure() 的 chunk 的名稱。通過提供 require.ensure() 不同執行點相同的名稱,我們可以保證所有的依賴都會一起放進相同的 文件束(bundle)。
    如上述例子中的home和city組件,分別被打包到兩個chunk中,每個組件加載時都只會加載自己對應的代碼,可以加快渲染速度!

main.js

最后,不要忘記在main.js將router引入。

import routes from './router/router'


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM