VUE 单页应用首页加载特别慢的解决方法，（我自己没百度之前，想的是路由懒加载，图片懒加载，压缩cssjs）
百度之后，才发现菜鸡
我们一般打包后把 生成的dist文件夹下面的这两个东西拖到服务器下面就行了
首先你要想到拖到服务器，减少这个文件的体积，看他的构造，index.html没发变小了才1kb;
就要在static里面下文章了，打开static,
打开js,可以看到，里面有许多.map文件，而且很多都很大，如图最后一个3M多，map文件是什么鬼？这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不生成这些文件。
意思就是有了map文件我们就会知道比如报错是哪个页面报的错，console.log就能打印出来具体的第几行数据
如图所示，说白了就是起一个辅助调试的作用，一般线上不需要这个.map文件，所以为了避免部署包过大，通常都不生成这些文件。
在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件
没去掉之前static是6.26M大小去掉之后是1.89M 我擦这尼玛减少这么多；
去掉.map文件之后的js文件夹
在下一步:
vue-router 路由懒加载
懒加载即组件的延迟加载，通常vue的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。
使用懒加载可以将页面中的资源划分为多份，从而减少第一次加载的时候耗时。
懒加载配置：
非懒加载路由配置：（平时我都是这么写的，艹原来是不标准的写法）
路由懒加载打包后static-->js文件夹
如图所示为通过非懒加载和懒加载后打包的js文件。而非懒加载的打包后一般只有一个app.js 文件。
非懒加载打包后
这个1-10.js就相当于你的10个路由对应的文件我是这么理解的哈（使用路由的按需加载，可把app.js分隔成多个小的js文件）
注意这个vendor.js文件很大这个怎么搞？每次打开会发现这个js很耗时，它是项目所有依赖的集成（包括vue vue-router axios echarts ele等）
vendor.js一般是将所有引用的库打包在了一起，首先就需要确定是哪些库文件太大，可以参考 vue打包优化分析工具，其实这个插件没啥用（装逼用的）
如下图你打包完成之后，哪些文件大 有个big提示
// 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 然后配置一下： plugins: [ new BundleAnalyzerPlugin() ] // 3. 在package.json文件中配置： "scripts": { "analyz": "NODE_ENV=production npm_config_report=true npm run build" } // 4. 运行（会自动在浏览器打开：http://127.0.0.1:8888/） npm run build
然后就会出现一张类似这样的图片
这几个英文
stat size（统计尺寸）
parsed size（解析大小）
Gzipped size（压缩大小）
vendorjs中是项目中所有引用的依赖包，即使用的vue、eleui、axios、echarts等等插件框架什么的都在这里边。解决办法
# cdn引入插件
# 打包时使用Gzip
没解决之前是
现在来解决它看能不能变小
先来试一下压缩，
webback.prod.config.js 中添加如下代码。（文件大小 10.5MB-->3.5MB）
webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, // deleteOriginalAssets:true, //删除源文件 minRatio: 0.8 }) )
使用CDN加载
通过在index.html 中直接引入第三方资源来缓解我们服务器的压力，其原理是将我们的压力分给了其他服务器站点。
包后需要去掉代码中的console.log ，防止打开f12 的时候输出日志（可webpack配置也可以手动删除）
***********cdn**
我这个项目小所以vendeor 请求响应时间少，别个项目大的情况下 这个文件请求响应时间就长了如上图5秒，这是要死人的，慢
解决方法
1、这里我们把import导入的方式删掉
2、通过cdn方式去引入import需要导入的库（我们不是不用import，而是换了另一种方式去引入，这样可以减轻vendor.js的负担）
3、这一步配置非常重要，我们在目录build/webpack.base.conf.js文件中配置externals
externals(翻译：外部环境)的作用是从打包的bundle文件中排除依赖。
换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script（CDN）的方式去访问这些依赖。
亲自测试一下
我这里把vue 用上面的方法引入,快一点点（这个我刷新的时候又是100多，还与他妈的网速有关我擦）
总结一下就是：1去掉map文件 2 路由懒加载 3 压缩文件 使用cds加载 4去掉console.log(其实这个不算吧)
这里又发现一个问题 cdn 卧槽我一直不是很理解cdn,求解百度
CDN的全称是Content Delivery Network，内容分发网络
CDN加速简单的来说，就是把原服务器上数据复制到其他服务器上，用户访问时，哪台服务器近访问到的就是哪台服务器上的数据。
CDN加速优点是成本低，速度快。适合访问量比较大的网站
参考：https://www.cnblogs.com/xidian-Jingbin/p/10643391.html
https://www.cnblogs.com/shifeng-/p/10832022.html
https://blog.csdn.net/qq_35610214/article/details/93645771
这里还有一种解决vendeor 。js的方法（扩展）
https://blog.csdn.net/blueberry_liang/article/details/80320607