vue之性能优化

一、源码优化

1. 模块化
   封装成组件，减少代码冗余，每个组件有明确含义，复用性越高越好，可配置性越高越好，包括css。

2. for循环设置key
   循环时添加key，便于呢行代码更好找到该条数据，新旧值相比时可以更快的定位到diff。

3. 路由懒加载
   首屏渲染时能够加快渲染速度

4. 避免内存泄漏
   使用过后的全局变量在组件销毁后重新置为null。

5. keep-alive
   对组件进行缓存，节省性能。

6. v-if 和 v-show
   看场景，自行选择

7. 减少watch的数据
   数据变化量大的时候会有卡顿现象,可以换换computed

二、打包优化

1. 修改vue-config-index.js配置项
   把productionSourceMap设置为false（否则会生成map文件，像未加密的代码一样，准确的输出是哪一行哪一列有错）；
   把productionGzip设置为true，开启gzip压缩，使打包过后体积变小。

2. 使用cdn加载外部资源；
   比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。
   
   

3. 减少图片使用，使用雪碧图（多个icon在一块）或css样式；

4. 按需引入
   

5. console语句过滤
   webpack.config.js 的 plugins 里面加上

new webpack.optimize.UglifyJsPlugin({
	compress:{
		warnings: false,
		drop_debugger: true,
		drop_console: true
	}
})

或

	new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_debugger: true,
          drop_console: true //就是这个玩意儿，看见没，就它，省了多大事儿
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),