Vue/HTML/CSS
Java / Spring
Mysql
GitHub
中间件
其他


原因一:vue-cli npm run build 命令打包时默认会把 dependencies 中的依赖统一打包,这就导致打包后的 vendor.js 文件过大,从而使得首次启动时下载 vendor.js 缓慢。
解决: vue、axios、element-ui、iView基本不再修改的依赖cdn引入不必要打包到 vendor.js 中
① 在项目根目录 index.html 使用 cdn 节点引入各种依赖
② 在项目根目录 build/webpack.base.config.js 中 module.exports 内添加 externals
③ 在项目根目录 src/main.js 中将以上通过 CDN 已经引入的依赖 import ... from ... 删除(如:import Vue from 'vue'),若没有删除则 webpack 还是会把对应的依赖进行打包。
原因二:vue-cli npm run build 命令打包时默认会生成相对应的 map(调试和日志代码) 文件,从而导致打包后的整个 static 文件夹过大(尤其是 vendor.js.map 最大),使得部署和上传缓慢。
解决: webpack打包时不产生map文件
在项目根目录 config/index.js 中 build 内找到 productionSourceMap: true, 把 true 改为 false。从而重新打包以后,系统就不会自动生成 map 文件了。
原因三:vue-cli npm run build 命令打包时压缩优化不彻底。这里 webpack 其实自带有一个优化打包的方法(Gzip 文件压缩),只是 vue-cli 默认没有使用。(在 Node 服务器中也可以使用 Gzip 压缩)
解决法案:webpack 自带优化打包的方法(Gzip 文件压缩)
① 在项目根目录 config/index.js 中 build 内找到 productionGzip: false,把 false 改为 true。与 productionSourceMap 刚好相反。
② 安装插件 compression-webpack-plugin。
注: 安装的时候带上版本号,现在 compression-webpack-plugin 2.0 已出,默认该命令安装最新版,最新版本和当前的 webpack 不匹配,要报错。
cnpm install --save-dev compression-webpack-plugin@1.1.12 // 1.1 最新版
③ compression-webpack-plugin 安装完成后,npm run build 执行后会发现 js 文件夹内每个 js 文件都有一个相对应的 gz 后缀文件,而且 gz 文件比相对应的 js 文件小很多。浏览器如果支持 gzip 会自动查找有没有 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 具有缓存功能,计算结果 (data依赖数据) 发生变化时才会被调用;(结果相同即使多次调用也只执行一次)
methods 页面加载调用一次,主动触发就调用 (只执行逻辑代码)
Vue.set(object, key, value)
vm.userProfile = Object.assign({}, vm.object, { // 在vuex中可以这样修改
key: value,
key: value
})