CTYPE html> 幻想日记
幻想日记
幻想日记

幻想日记

其实,我的愿望是世界和平!

毕业院校 惠州职业技术学院
所在城市 广东 广州
爱好 漫画 动漫 游戏

Vue、HTML、CSS、JS

Java、SpringBoot

Mysql

github

中间件

其他

文章
02

置顶 vue
2023-09-14 15:43:23

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文件然后本地解压并执行。

全部文章
03

2022年9月 2 2022年8月 2 2022年7月 3
数组的响应式检测:(解决方法:总是返回一个新数组)

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

置顶 vue 踩坑
1 2023-09-10 13:20:23
computed和method区别

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

vue 踩坑
1 2022-08-27 15:30:23
对象响应式属性的添加或删除(!!致使引导地址发生改变才会触发响应)

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

vue 踩坑
5 2023-07-10 10:43:23