Action speak louder than words .

Vue CLI(1): npm run build打包优化

原因一：vue-cli npm run build 命令打包时默认会把 dependencies 中的依赖统一打包，这就导致打包后的 vendor.js 文件过大，从而使得首次启动时下载 vendor.js 缓慢。

①在项目 根目录 index.html 使用cdn节点引入各种依赖
②在项目 根目录 build/webpack.base.config.js 中 module.exports 内添加 externals
③在项目 根目录 src/mian.js 中将以上通过CDN已经引入的依赖 import ... from ... 删除(如：import Vue from 'vue')，若没有删除则webpack还是会把对应的依赖进行打包。

原因二：vue-cli npm run build 命令打包时默认会生成 相对应的map(调试和日志代码)文件，从而导致打包后的整个 static文件夹 过大(尤其是vendor.js.map最大)，使得部署和上传缓慢。

在项目 根目录 config/index.js 中 build 内找到 productionSourceMap: true,　把 true改为false。从而重新打包以后，系统就不会自动生成 map文件了。

原因三：vue-cli npm run build 命令打包时 压缩优化不彻底。这里 webpack 其实自带有一个优化打包的方法(Gzip 文件压缩)，只是 vue-cli 默认没有使用。 (在node服务器在中也可以使用Gzip压缩)

①在项目 根目录config/index.js 中 build 内找到 productionGzip: false， 把 false改为true。与 productionSourceMap 刚好相反。
②安装插件 compression-webpack-plugin
注:安装的时候带上版本号，现在 compression-webpack-plugin 2.0已出，默认该命令安装最新版，最新版本和当前的webpack不匹配，要报错。
cnpm install --save-dev [email protected] //1.1最新版
③compression-webpack-plugin安装完成后，npm run build 执行后会发现js文件夹内每个js文件都有一个相对应的gz后缀文件，而且gz文件比相对应的js文件小很多。浏览器如果支持 g-zip 会自动查找有没有gz文件，找到了就直接加载gz文件然后本地解压并执行。

数组的响应式检测：(解决方法：总是返回一个新数组)

Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue) // vm.$set是Vue.set方法的一个别名
vm.items.splice(indexOfItem, 1, newValue)

computed和method区别

computed具有缓存功能，计算结果(data依赖数据)发生变化时才会被调用；(结果相同即使多次调用也只执行一次) methods页面加载调用一次，主动触发就调用(只执行逻辑代码)

对象响应式属性的添加或删除(！！致使引导地址发生改变才会触发响应)

Vue.set(object, key, value)
vm.userProfile = Object.assign({}, vm.object, { 在vuex中可以这样修改
key: value,
key: value
})