Vue專案優化需要注意哪些？

這篇文章主要介紹了淺談 Vue 專案優化的方法，小編覺得還挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

好久不寫博文了，本文作為我使用半年vue 框架的經驗小結，隨便談談，且本文只適用於vue-cli 初始化的項目或依賴於webpack打包的項目。

前幾天看到大家說vue 專案越大越難優化，帶來很多痛苦，這是避免不了的，問題終究要解決，框架的表現是沒有問題的，各大測試網站都有相關數據。下面進入正題

基礎最佳化

所謂的基礎最佳化是任何 web 專案都要做的，並且是問題的根源。 HTML，CSS，JS 是第一步要最佳化的點

分別對應到.vue 檔案內的，<template>,<style>,<script>，下面逐一談下vue 專案裡有哪些值得優化的點

template

#語義化標籤，避免亂嵌套，合理命名屬性等等標準推薦的東西就不談了。

模板部分幫助我們展示結構化數據，vue 透過數據驅動視圖，主要注意幾點

1. v-show，v-if 用哪個？在我來看要分兩個維度去思考問題，第一個維度是權限問題，只要涉及到權限相關的展示無疑要用v-if，第二個維度在沒有權限限制下根據用戶點擊的頻次選擇，頻繁切換的使用v-show，不頻繁切換的使用v-if，這裡要說的優化點在於減少頁面中dom 總數，我比較傾向於使用v-if，因為減少了dom 數量，加快首屏渲染，至於效能方面我感覺肉眼看不出來切換的渲染過程，也不會影響使用者的體驗。

2. 不要在模板裡面寫過多的表達式與判斷v-if="isShow && isAdmin && (a || b)"，這種表達式雖說可以識別，但是不是長久之計，當看著不舒服時，適當的寫到methods 和computed 裡面封裝成一個方法，這樣的好處是方便我們在多處判斷相同的表達式，其他權限相同的元素再判斷展示的時候呼叫同一個方法即可。

3. 循環呼叫子元件時加入key，key 可以唯一標識一個循環個體，可以使用例如item.id 作為key，假如數組資料是這樣的['a' , 'b', 'c', 'a'],使用 :key="item" 顯然沒有意義，更好的辦法就是在循環的時候 (item, index ) in arr，然後:key="index"來確保key 的唯一性。

style

1. #將樣式檔放在 vue 檔案內還是外？討論起來沒有意義，重點是按模組劃分，我的習慣是放在vue 文件內部，方便寫代碼是在同一個文件裡跳轉上下對照，無論內外建議加上 <style scopeed> 將樣式檔案鎖住，目的很簡單，再好用的標準也避免不了多人開發的麻煩，約定命名規則也可能會衝突，鎖定區域後儘量採用簡短的命名規則，不需要 .header -title__text 之類的class，直接.title 搞定。

2. 為了和上一條作區分，說下全局的樣式文件，全局的樣式文件，盡量抽象化，既然不在每一個組件裡重複寫，就盡量通用，這部分抽像做的越好說明你的樣式檔案體積越小，重複使用率越高。建議將複寫元件庫如 Element 樣式的程式碼也放到全域中去。

3. 不使用float 佈局，之前看到很多人封裝了 .fl -- float: left 到全域文件裡去，然後又要.clear，現在的瀏覽器還不至於弱到非要用float 去兼容，完全可以flex，grid 兼容性一般，功能其實flex 佈局都可以實現，float 會帶來佈局上的麻煩，用過的都知道不相信解釋坑了。

至於其他通用的規範這裡不贅述，相關文章很多。

script

這部分也是最難優化的點，說下個人意見吧。

1. 多人開發時盡量保持每個元件 export default {} 內的方法順序一致，方便找出對應的方法。我個人習慣 data、props、鉤子、watch、computed、components。

2. data 裡要說的就是初始化資料的結構盡量詳細，命名清晰，簡單易懂，避免無用的變量，isEditing 實際上可以代表兩個狀態，true 或false，不要再去定義notEditing 來控制展示，完全可以在模板裡 {{ isEditing ? 編輯中: 儲存}}

   #

3. props 父子元件傳值時盡量:width="" :heigth="" 不要:option={}，細化的好處是只傳需要修改的參數，在子元件props 裡加資料類型，是否必傳，以及預設值，方便排查錯誤，讓傳值更嚴謹。

4. 鉤子理解好生命週期的意義就好，什麼時間該請求，什麼時間註銷方法，哪些方法需要註銷。簡單易懂，官網都有寫。

5. metheds 中每一個方法一定要簡單，只做一件事，盡量封裝可重複使用的簡短的方法，參數不易過多。如果十分依賴lodash 開發，methed 看著會簡潔許多，代價就是整體的bundle 體積會大，假如專案僅用到小部分方法可以局部引入loadsh，不想用lodash 的話可以自己封裝一個util.js 檔案

6. watch 和computed 用哪個的問題看官網的例子，計算屬性主要是做一層filter 轉換，切忌加一些呼叫方法進去，watch 的作用就是監聽資料變化去改變資料或觸發事件如this.$store.dispatch('update', { ... })

#元件最佳化

vue 的組件化深受大家喜愛，到底組件拆到什麼程度算是合理，還要因項目大小而異，小型項目可以簡單幾個組件搞定，甚至不用vuex，axios 等等，如果規模較大就要細分組件，越細越好，包括佈局的封裝，按鈕，表單，提示框，輪播等，推薦看下Element 組件庫的程式碼，沒時間寫這麼詳細可以直接用Element 庫，分幾點進行優化

1. 元件有明確意義，只處理類似的業務。復用性越高越好，配置性越強越好。

2. 自己封裝元件還是遵循配置 props 細化的規則。

3. 元件分類，我習慣性的依照三類劃分，page、page-item 和layout，page 是路由控制的部分，page-item 屬於page 裡各個佈局區塊如banner 、side 等等，layout 裡放置多個頁面至少出現兩次的元件，如icon, scrollTop 等

vue-router 和vuex 優化

#vue-router 除了切換路由，用的最多的是處理權限的邏輯，關於權限的控制這裡不贅述，相關demo 和文章有許多，那麼說到優化，值得一提的就是組件懶加載

中午官網連結如上，範例如下

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') 
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') 
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

 
這段程式碼將Foo, Bar, Baz 三個元件打包進了名為group-foo 的chunk 文件，當然啦是js 檔案

其餘部分正常寫就可以，在網站載入時會自動解析需要載入哪個chunk，雖然分別打包的總體積會變大，但是單看請求首屏速度的話，快了很多。

vuex 面臨的問題和解決方案有幾點

當網站足夠大時，一個狀態樹下，根的部分字段繁多，解決這個問題就要模組化vuex，官網提供了模組化方案，讓我們在初始化vuex 的時候配置modules。每個 module 裡面又分別包含 state 、action 等，看似多個狀態樹，其實還是基於 rootState 的子樹。細分後整個 state 結構就清晰了，管理起來也方便許多。

由於vuex 的靈活性，帶來了編碼不統一的情況，完整的閉環是store.dispatch('action') -> action -> commit -> mutation -> getter - > computed，實際上中間的環節有的可以省略，因為API 文件提供了以下幾個方法mapState、mapGetters、mapActions、mapMutations，然後在元件裡可以直接調取任何一步，還是專案小想怎麼呼叫都可以，專案大的時候，就要考慮vuex 使用的統一性，我的建議是不論多簡單的流程都跑完整個閉環，形成程式碼的統一，方便後期管理，在我的元件裡只允許出現dispatch 和mapGetters ，其餘的流程都在名為store 的vuex 資料夾中進行。

基於上面一條，說下每個流程裡面要做什麼，前後端資料一定會有不一致的地方，或是資料結構，或是欄位命名，那麼究竟應該在哪一步處理資料轉換的邏輯呢？有人會說其實哪一步都可以實現，其實不然，我的建議如下

1. #在發dispatch 之前就處理好元件內需要傳遞的參數的資料結構和欄位名稱

2. 到了action 允許我們做的事情很多，因為這部支援異步，支援state, rootState, commit, dispatch, getters，由此可見責任重大，首先如果後端需要部分其他module裡面的數據，要透過rootState 取值再整合到原有數據上，下一步發出請求,建議（async await axios），拿到數據後進行篩選轉換，再發送commit 到mutation

3. 这一步是将转换后的数据更新到 state 里，可能会有数据分发的过程（传进一个 object 改变多个 state 中 key 的 value），可以转换数据结构，但是尽量不做字段转换，在上一步做

4. 此时的 store 已经更新，使用 getter 方法来取值，token: state => state.token，单单的取值，尽量不要做数据转换，需要转换的点在于多个地方用相同的字段，但是结构不同的情况（很少出现）。

5. 在组件里用 mapGetters 拿到对应的 getter 值。

打包优化

上面说了代码方面的规范和优化，下面说下重点的打包优化，前段时间打包的 vender bundle 足足 1.4M，app bundle 也有 270K，app bundle 可以通过组件懒加载解决，vender 包该怎么解决？

有人会质疑是不是没压缩或依赖包没去重，其实都做了就是看到的 1.4M。

解决方法很简单，打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。

例如：

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> 
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> 
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

在 webpack 里有个 externals，可以忽略不需要打包的库

externals: { 
 'vue': 'Vue', 
 'vue-router': 'VueRouter', 
 'vuex': 'Vuex', 
 'axios': 'axios' 
}

此时的 vender 包会非常小，如果不够小还可以拆分其他的库，此时增加了请求的数量，但是远比加载一个 1.4M 的 bundle 快的多。

总结

本文谈的优化可以解决部分性能问题，实际开发细节很多，总之按着规范写代码，团队的编码风格尽量统一，处理细节上多加思考，大部分性能问题都能迎刃而解。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Webpack中如何加载SVG

webpack打包配置（详细教程）

在Javascript中自适应处理方法

以上是Vue專案優化需要注意哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！