Vue项目基本优化

1、路由懒加载，这个基本上每个项目必须。

 

2、Ui框架按需引入，也就是要用哪些组件引入哪些组件

 

3、关闭Map文件的生成，没关闭的vue项目打包后就会有很多的.map文件。这些文件主要是帮助我们线上调试代码，查看样式。脚手架2是在index.js。脚手架3就vue.config.js里面。将productionSourceMap 改为false。

 

4、使用cdn

webpack配置

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

/public/index.html 的 head 元素中引入相关的 cdn 

<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>

 

*以上这几个方法，基本上就是能做到整个项目的大体优化，但是写代码的时候很多细节也能为项目整体提升流畅度。比如以下

v-if 和 v-show分场景使用

v-if 才是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为false，则什么也不做。直到条件第一次变为true时，才会开始渲染条件块。

v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css的display属性进行切换。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景，v-show 则适用于需要非常频繁切换条件的场景。

 

computed 和 watch区分使用场景

computed ： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算。

watch ： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作。

    当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

还有事件销毁等等，，，很多可以从细节优化的地方