vue项目首屏加载过久处理笔记
1、启用gz 配置： 服务器开启gzip
会生成 gz 文件，现代浏览器基本都支持，会读取gz文件，。
开启配置：https://blog.csdn.net/baidu_35407267/article/details/77141871
2、解决依赖项的大小
npm run build --report 查看依赖内容，分析、优化
a、moment 过大，使用 date-fns代替
npm install date-fns --save
https://blog.csdn.net/fsxxzq521/article/details/85715213
b、vue核心包 使用运行时版本，vue.runtime.esm.js。节约 将近100k。
限制在于 只能用render来 运行时 生成，不能使用template 。开发不便。
https://cn.vuejs.org/v2/guide/installation.html#
c、zyby-ui组件，过大，有这样一个问题：一些组件依赖了vue，
？为什么mintui 导入了 但是没有加载vue呢。
答：打包时 使用了externals 配置选项
externals 名叫外部扩展，里面定义的东西 如果跟 import 的 from 同名时 打包时 不会打进去，而是在运行时 再去外部获取。
注意： externals 里的键名 跟 import from 的内容相同，而键名对应的值 为 真实 外部变量。externals相对于一个中转的作用，打包时 告诉webpack，遇到 from 内容 和 externals 键名相同时，是运行时从外部获取。
另，如mintui 的配置，如果 用到了按需加载，记得配置时 应按照 babel 转换后的语法去操作。
正确解决：去掉vue，mintui 用到的组件，互相依赖的自制组件，dependencies
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
小插曲：直接写出 vue: 'Vue'；结果 外部项目 多依赖了 一个 vue.runtime.esm.js 。
3、代码内去掉 console
生产模式下去掉
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
