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 包会很是小，若是不够小还能够拆分其余的库，此时虽然增长了请求的数量，可是远比原来的快了不少！