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'