Vue-Router路由懶加載（利用Webpack的代碼切割）

把不同路由對應(yīng)的組件分割為不同的代碼塊，當(dāng)路由被訪問的時候，再加載對應(yīng)的組件，對中大型項目來說，會顯得很高效，對開發(fā)者而言，也方便維護。不過這里要對生產(chǎn)環(huán)境和開發(fā)環(huán)境做區(qū)分，因為如果項目很大的話，每次更改代碼觸發(fā)的熱更新時間都會很長，所以只在生產(chǎn)環(huán)境中使用路由懶加載。

// 生產(chǎn)環(huán)境  _import_production.js
module.exports = file => () => import('@/pages/' + file + '.vue');
// 開發(fā)環(huán)境 _import_development.js
module.exports = file => require('@/pages/' + file + '.vue').default; // vue-loader at least v13.0.0+
// router.js中引用
const _import = require('./_import_' + process.env.NODE_ENV);
{
    path: 'course',
    component: _import('course/index'),
    name: 'course'
}

圖片懶加載(vue-lazyload)

在圖片沒有進入可視區(qū)域時先不給img的src賦值，優(yōu)先加載可視區(qū)域的內(nèi)容，其他部分等進入了可視區(qū)域再加載，從而提高性能

// 安裝
npm install vue-lazyload --save-dev
// 使用 main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)
Vue.use(VueLazyload, {
    preLoad: 1.8,
    error: require('@/assets/lazy/error.png'),
    loading: require('@/assets/lazy/loading.png'),
    attempt: 1,
    listenEvents: ['scroll']
});

new Vue({
  el: 'body',
  components: {
    App
  }
});
// 在使用圖片的地方加上v-lazy即可
<img v-lazy="img.src" >

更多使用方式可參考vue-lazyload 這里呈現(xiàn)的效果就是，請求完成數(shù)據(jù)，再去請求阿里云存放的圖片，這個階段中，圖片資源加載過程中，顯示loading的狀態(tài)，加載完畢，顯示圖片，如果圖片加載失敗，顯示失敗的圖片。