問題
一個單頁面應用,采用組件化的開發模式,沒有采用懶加載,運用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'