vue 懶載入
一、定義：懶載入也叫延遲載入，即按需載入，
二、為什麼需要懶載入： 在單頁應用中，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，延時過長，不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時。
三、如何與webpack配合實現元件懶載入
在webpack配置檔案中的output路徑配置chunkFilename屬性， chunkFilename路徑將會作為元件懶載入的路徑
output: {
path: resolve(__dirname, ‘dist’)，
filename: options.dev ? ‘[name].js’ : ‘[name].js?[chunkhash]’
chunkFilename: ‘chunk[id].js?[chunkhash]’，
publicPath: options.dev ? ‘/assets/’ : publicPath
}配合webpack支援的非同步載入方法
—- resolve => require([URL], resolve), 支援性好 () => import(URL),
—- webpack2官網推薦使用, 屬於es7範疇, 需要配合babel的syntax-dynamic-import外掛使用,
npm install –save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
– es6轉換為es5 –
use: [{
loader: ‘babel-loader’,
options: { presets: [[‘es2015’, {modules: false}]]， plugins: [‘syntax-dynamic-import’]
}
}]
四、具體例項中實現懶載入
1， 路由中配置非同步元件
export default new Router({
routes: [ {
mode: ‘history’,
path: ‘/my’,
name: ‘my’,
component: resolve => require([‘../page/my/my.vue’], resolve),//懶載入
},] ; })
2， 例項中配置非同步元件
components: {
historyTab: resolve => {require([‘../../component/historyTab/historyTab.vue’], resolve)},//懶載入
// historyTab: () => import(‘../../component/historyTab/historyTab.vue’)
}
3，全域性註冊非同步元件
Vue.component(‘mideaHeader’, () => {
import(‘./component/header/header.vue’);
})
五、配置非同步元件實現懶載入的問題分析
- 多次進入同一個頁面也不會出現多次載入的問題，頁面在載入之後會出現快取，同理，同一個一個元件多次載入也不會出現多次載入的問題
- 在非同步載入頁面中載嵌入非同步載入的元件時對頁面的影響？非同步載入的元件將會比頁面中其他元素滯後出現， 頁面會有瞬間閃跳影響；因為在首次載入元件的時候會有載入時間， 出現頁面滯後， 所以需要合理的進行頁面結構設計， 避免首次出現跳閃現象；
六、懶載入的最終實現方案
1，路由頁面以及路由頁面中的元件全都使用懶載入
- 優點：最大的實現懶載入，隨時用，隨時載入，不會造成資源浪費
- 缺點：一個頁面巢狀多個元件的時候，會發送多個http請求，會造成網頁渲染過慢，網頁渲染參差不齊的問題。
2，路由頁面使用懶載入，路由頁面裡面的元件按需進行載入
- 優點：合理解決首頁延遲的問題，能夠最大化的減少http的請求，
- 缺點：對團隊合作要求比較嚴格，建立合理區分各種載入方式的元件資料夾