前言
最近在公司开了一个新的小项目，基本全权有我负责，只有7、8个页面。开发的也很快，也很快就做出来了，到了用户那边说首屏打开有点慢，后台看使用成功率也就60多，所以就开始研究了一些关于vue的优化，项目是使用vue3。
说实话，现在有点后悔使用vue3，最开始也只是想着用新技术爽爽，其实留下了一个大坑，在android 5运行不了。项目是服务于印尼国家，国外的手机大多数是安卓，最主要是手机老，不像国内，vue3的兼容性真的对老手机真的不友好。所以如果项目是服务于国外，兼容性真的是个急需优先考虑的，用户用不了，那做的在牛b都没啥用。国外项目还是考虑jq或者react，最终还是重构成jq。
正文
开启gzip压缩
优化里面最有效和占比最大的就是开启gzip，如果优化总共占比100份，那么开启gzp压缩可以占比5分之3吧，我自己感觉，反正是站大头。开启gzip需要后端配合或者运维配合。前端可以在vue.config里配置，具体如下：
npm install compression-webpack-plugin -s-d
const CompressionPlugin = require('compression-webpack-plugin')
为什么说gzip占比大，可以从两方面看具体数据看，一个是我们run build的时候，就有用在gzip压缩情况下文件的大小，和没有gzip压缩的大小对比，后面那一列，基本文件大小都减半，如图：
第二个就是可以通过webpack的占比图，可以很直观的查看，可以在package.json里配置
"report": "vue-cli-service build --mode production --report"
打包后会生成一个report.html,在游览器打开，可以直观看到包的占比大小。
使用CDN
像vue、vue-router、vur-i18n等大文件，可以通过CDN引入，大大减少包内存，这算是优化里的第二个大头。可以在html直接引入，也可以配置在vue.congif的chainWebpack里，配置在config里其实更好点，我们本地还是要依赖npm包来开发的，通过判断只要不是本地环境，我们都可以使用cdn。
同时还需要在public.html里进行遍历引入，像引入script标签一样，放在body里面，其实之前我在这里有个疑问，就是引入htmlWebpackPlugin，html文件里没有这个玩意，可以运行成功吗，即使运行成功，这是为啥？最后是配置成功了，这个疑问就过去了。
后面我对cdn还有一系列的疑问，公司也没人可以解答，在网上也搜索了一些，也没找到答案。
1、项目是在印尼国家上线的，之前使用的cdn是国外免费的cdn，我想把他放在自己的服务器上，那放在国内的服务器和放在印尼的服务器上有区别吗？
2、是否有必要把cdn放在自己的服务器上？
3、国外cdn是有节点的，那放在自己服务器上，这个这个节点属性是不是没了，那访问速度是否有保证
4、现在cdn放在印尼的服务器上，服务器是否也是有节点这一说法
加载前的loading或骨架屏
我这里是使用loading，原理就是在加载之前进行一个loading展示，当div id=app加载出来之后，会把loading里的内容给替换了，这可能是一个比较直观的优化，肉眼可见的。网上提供的loading代码很多，也可以自己写一下。
loading写在id=app里面，然后在配置一些动画样式，像我这个简单的，如下效果图
代码分包
这里主要是对代码进行切割，像切蛋糕一样，分成多块，整体还是一块。个人感觉分包在加载过程更像是线性过渡，配置主要是在vue.config，其产生的优化效果不咋强，渲染页面的时间没改变多少，也有可能是我没咋研究，这是的配置算是全局性的。
图片压缩
个人感觉这个挺有必要，压缩的话这里主要是通过网站对图片的大小进行压缩，大小基本可以减半。
TinyPNG，好就好在图片命名不变，直接替换就行，最主要大小也缩小了很多。
使用hook
代码层面，vue3对hook是值得一用的，比如我这项目有两个页面其实有两个页面需要每10秒重复调用接口来判断订单的状态，这里就可以将定时器使用hook抽取一下。
框架
其实框架的选择远大于前面那么优化，jq打开真的快很多，兼容性也吊打其他，项目不大还是jq合适，不过jq在国内市场很小了，但是在国外好像用的还挺多的。其实我挺不情愿使用jq的，不过最后输给自己的技术不够和资本哈哈哈。
