vue 項目優化

其實vue的性能自己就是很good了，要說再進一步優化，可能有一下幾個注意點，僅僅是注意點哦！

一、不要在模板裏面寫過多表達式

以下：

v-if="isShow && isAdmin && (a || b) " {{haorooms?haorooms:(resource?resource:"haoroomsresource")}}

相似上面這樣的表達式，能夠是能夠，可是過多，就要經過其餘方式，例如能夠經過methods 或computed 封裝方法。用方法的好處是方便咱們在多處判斷相同的表達式，其餘權限相同的元素再判斷展現的時候調用同一個方法便可。

二、循環調用子組件時添加 key

這一點相信不少人都能作的到，用vscode開發的時候，假如不加key，編輯器也會出現警告！循環key最好以下： (item, index) in arr，而後 :key="index"，假如數組數據是這樣的 ['a' , 'b', 'c', 'a'],使用 :key="item" 顯然沒有意義。

三、v-show，v-if 的使用

頻繁切換的使用 v-show，不頻繁切換的使用 v-if。

注意：v-if一個組件，可讓組件從新渲染，經過v-if，咱們可讓組件按照必定執行循序執行。

四、儘可能不使用 float 佈局

儘可能少用float，能夠用flex或者grid佈局。

五、Object.freeze()去除Observer

長久不變的大數據，能夠用Object.freeze()去除Observer監聽。使用了Object.freeze()這個方法，更改數據，視圖也是會變的。例如以下：

export default { name: 'haorooms test', data () { return { list: Object.freeze([ { value: 1 }, { value: 2 } ]) } }, created(){ this.list[0].value = 100; console.log(this.list); this.list=[]; console.log(this.list); } }

如上圖輸出，Object.freeze能夠取消監聽，可是仍是能夠改變數值改變dom的。

給list從新賦值以後，又恢復了監聽。

六、慎用deep watch

數量量大，開啓deep監聽的話，極可能形成更大的開銷。

七、vue-router

路由優化，能夠看路由懶加載

或者以下：

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

八、減小沒必要要的依賴包

例若有些項目用到了圖表（echarts）,能夠選擇加載依賴包，不用加載整個echarts庫。

九、按需加載

能夠用require或者import()按需加載你須要的組件，關於require和import，請看：http://www.haorooms.com/post/vue_project_cg 最後的動態加載依賴項。

十、vue中使用keep-alive

vue2.0提供了一個keep-alive組件，用來緩存組件,避免屢次加載相應的組件,減小性能消耗

<keep-alive> <component> <!-- 組件將被緩存 --> </component> </keep-alive>

使用router. meta屬性

// 這是目前用的比較多的方式 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>

router設置

... routes: [ { path: '/', redirect: '/index', component: Index, meta: { keepAlive: true }}, { path: '/common', component: TestParent, children: [ { path: '/test2', component: Test2, meta: { keepAlive: true } } ] } .... // 表示index和test2都使用keep-alive

keep-alive是一把雙刃劍，確實須要緩存組件的時候才使用!

十一、善於運用事件代理

咱們用 v-for 渲染大量的一樣的 DOM 結構時，每一個上面都加一個點擊事件，這樣不是很好，能夠考慮經過 HTML5 的 data 的自定義屬性作事件代理。，方式以下：

<template> <div @click="clickfn"> <component v-for="(item,index) in 1000" :key="index" data-click="clickName"></component> </div> </template> <script> export default { data () { return { } }, methods: { clickfn(e) { if(e.target.dataset.click == 'clickName') { console.log('經過事件委託拿到了自定義屬性,這裏能夠寫事件了！') } } } } </script>

注：具體狀況具體分析，假如click事件要傳遞參數等，這種方式可能不是很適合了！

webpack相關

webpack功能太強大的，關於跨域，webpack提供了http-proxy-middleware。webpack也提供了css打包去重的一些方法：optimize-css-assets-webpack-plugin

如何減小webpack打包體積，加快webpack的打包速度呢？

解決方法很簡單，打包 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 包會很是小，若是不夠小還能夠拆分其餘的庫，此時雖然增長了請求的數量，可是遠比原來的快了不少！