vue[打包chunk-vendors.xxx.js文件过大，vue项目性能优化解决方案，前端性能优化知识总结]

虽然看上去这个内容也就2M左右的大小，但是在线上却出现需要加载10几秒的时间，这对于一个项目来说是非常的有问题的。因此解决方式如下：
首先得知道为什么这个文件比较大，chunk-vendors.xxx.js是一个保存着各种相关依赖的关系的文件，比如导入的elmentUI、echarts、vue、vue-router等各种依赖

vue项目性能优化解决方案

1.开启Gzip压缩

https://blog.csdn.net/qq_31677507/article/details/102742196

2.路由懒加载(按需加载)

3.压缩图片大小，压缩代码空间

// 使用webpack-bundle-analyzer检查打包加载的各种依赖大小与速度
cnpm install webpack-bundle-analyzer --save-dev

4.使用插件去除console、warnings、debugger等无用内容来减少文件大小

// 安装uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
// 具体使用百度

5.部分插件启用CDN加载资源

把那些不太可能改动的代码或者库分离出来，继续减小单个chunk-vendors，然后通过CDN加载进行加速加载资源。

// 修改vue.config.js 分离不常用代码库
module.exports = {
 configureWebpack: config => {
  if (process.env.NODE_ENV === "production") {
   config.externals = { // 不会被打包的库
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'moment': 'moment'
   }
  }
 }
}
// 然后在public文件夹的index.html 使用cdn加载
<!-- CDN -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

推荐实现相关的参考博客：
1.https://www.jianshu.com/p/aebfa267f7cd
2.https://www.jb51.net/article/150533.htm
3.https://blog.csdn.net/weixin_42604828/article/details/93324751
4.https://blog.csdn.net/D102601560/article/details/109025683

前端性能优化知识总结

1.减少http请求。如：合并css、js、

2.合理利用缓存功能。如：缓存常用图片和css、js资源

3.合理安排内容渲染顺序。如：css优先加载，js最后加载，部分资源按需加载

4.压缩合并资源。如：压缩图片和js、css资源

5.减少对cookie的使用。如：cookie会在服务器和浏览器之间传递，导致资源浪费

6.优化代码层面：如：尽量减少闭包和递归的使用，减少对DOM操作，避免嵌套循环和"死循环"，代码尽量低耦合高内聚，注意定时器的及时清理，能使用css完成的动画就不用js，