vue+webpack項目優化

總結爲：

1：打包優化

2：異步加載

3：頁面加載時加loading特效

4：點擊延遲

5：inline manifest

6：邏輯代碼優化

一：打包優化

方法爲：在webpack的公共配置文件（通常爲webpack.base.conf.js）的resolve下有extensions選項。數組中加入不須要打包的組件，而且在入口的html中使用cdn的方式引入便可

二：異步加載

所謂的異步加載組件，其實就是組件懶加載。主要包含兩部分：路由配置和子組件的調用

1：路由設置實現懶加載

     

{
    path: '/portal/:system/home', //用戶登入後的app首頁
    component: (resolve) => require(['@/page/home'], resolve)
 }

2：子組件的調用

一般的寫法是，在父組件中import組件，隨後在父組件的components中註冊子組件後使用子組件，比較消耗性能。使用異步的方法使用子組件 ——直接在components中導入子組件，須要的時候才加載它：

components: {
  selfProfile: () => import("@/components/profile")
}

三：頁面切換時加loading特效

頁面的響應、渲染速度的影響緣由多種多樣。爲了解決用戶在首次進入應用或者頁面切換的時等待的白屏時間較長時，可使用vue-router提供的beforeEach()和afterEach()方法。因此使用loading進度條是一種比較明智的作法。使用nprogress。API可參考官方文檔，使用方法以下(假設已經安裝好了nprogress):

在router.js中使用import引入nprogress以及它的樣式表，配置ngprocess。並在路由配置完成後，調用beforeEach() 和 afterEach方法

//路由配置前
NProgress.configure({ showSpinner: false })

//此處爲路由配置列表，可參考上面的異步加載方式進行編寫

//路由配置後
router.beforeEach(function (to, from, next) {
  NProgress.start() //開始loading
  const toIndex = history.getItem(to.path)
  const fromIndex = history.getItem(from.path)

  if (toIndex) {
    if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
      store.commit('UPDATE_DIRECTION', {direction: 'forward'})
    } else {
      // 判斷是不是ios左滑返回
      if (!isPush && (Date.now() - endTime) < 377) {
        store.commit('UPDATE_DIRECTION', {direction: ''})
      } else {
        store.commit('UPDATE_DIRECTION', { direction: 'reverse' })
      }
    }
  } else {
    ++historyCount
    history.setItem('count', historyCount)
    to.path !== '/' && history.setItem(to.path, historyCount)
    store.commit('UPDATE_DIRECTION', {direction: 'forward'})
  }

  if (/\/http/.test(to.path)) {
    let url = to.path.split('http')[1]
    window.location.href = `http${url}`
  } else {
    next()
  }
})

router.afterEach(function (to) {
  NProgress.done() //loading結束
})

 

四：點擊延遲

安裝fastclick後，在main.js中引入便可：

 

import FastClick from 'fastclick'
FastClick.attach(document.body)

 

五：inline manifest

　　manifest文件時路徑配置和異步組件名字列表，這麼作能夠減小一個http請求。具體作法爲，先在入口頁面index.html中的head的最後一行加入代碼

       

<%=htmlWebpackPlugin.files.webpackManifest%>

　　最後在webpack的公共配置文件(個人是webpack.base.conf.js)的vux-loader配置的 plugins 列表中加入inline-manifest插件：

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['inline-manifest', 'vux-ui', 'progress-bar', 'duplicate-style']
})

六：邏輯代碼優化

這部分的建議就是：①每一個vue文件儘量小(多使用組件，增強可複用性)；②vue指令中的v-show和v-if的使用：v-if耗性能更多，因此頻繁切換的使用 v-show，不頻繁切換的使用 v-if；③vue指令中的v-for搭配:key使用，確保惟一性；④樣式表css務必加scoped以防止干擾。。。