Vue、HTML、CSS、JS
Java、SpringBoot
Mysql
github
中间件
其他
Vue CLI(1): npm run build打包优化
原因一: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/mian.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文件小很多。浏览器如果支持
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具有缓存功能,计算结果(data依赖数据)发生变化时才会被调用;(结果相同即使多次调用也只执行一次) methods页面加载调用一次,主动触发就调用(只执行逻辑代码)
Vue.set(object, key, value)
vm.userProfile = Object.assign({}, vm.object, { 在vuex中可以这样修改
key: value,
key: value
})