需求背景
項目加載過慢窃躲,用戶進(jìn)入首頁等高頻頁面需要等待較長時間计贰。
問題分析
vue項目打完包后將所有頁面生產(chǎn)一個app.js,這個文件下載完成之后頁面才開始渲染蒂窒。如果頁面較多躁倒,打包生產(chǎn)的app.js太大,則加載時間長洒琢。
解決方案
將非高頻組件拆分開來秧秉,打包時生成對應(yīng)的js文件,并在進(jìn)入某個頁面時按需加載衰抑。
具體實現(xiàn)
大佬代碼
說明
- const申明的路由文件即為被拆分出去的需要異步加載的組件象迎。
- ES6的箭頭函數(shù)簡寫語法不需要多說了吧,自己看呛踊。
- 你需要了解require.ensure()的用法和語法砾淌,這里有一篇文章值得一看。