vue[打包的chunk-vendors.xxx.js文件过大导致加载过慢问题]

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

解决方案：
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.cnd加速
把那些不太可能改动的代码或者库分离出来，继续减小单个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加载
<!-- CND -->
<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