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