现象：
image.png
解决思路：
1、通过vue-cli-service --report分析打包后的文件信息：
原始分析结果
如上图所示，ant-design-vue占的大小达到包大小的一半，查看工程代码，发现只有（login.vue文件中使用了两个ant-designe-vue的组件，因此，将main文件中的全局导入ant-designe-vue的地方改成只导入使用的两个组件。减少包的大小。实际操作之后，再次分析结果如下：
修改后分析结果
压缩包gzip的总大小从573.88KB减少到278.65KB
2、因为浏览器并发请求数是有限制的，实际情况中在第一次并发请求之后，又出现多个小的文件的并发请求，且文件总大小以及时间小于第一次的并发请求时长，因此通过减少chunk数，让一次并发请求就尽量可以将文件请求结束
具体配置如下：在vue.config.js中添加如下代码：
const webpack = require('webpack');
module.exports = {
chainWebpack (config) {
config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin,[{
maxChunks:5, // 必须大于或等于 1
minChunkSize: 10000
}])
}
}
修改配置之前打包文件数如下：
修改前
修改之后打包文件数如下：
修改后
3、在没有做任何修改之前，不做缓存的情况下，并非开屏时间都长，因此这个应该不是因为前端代码包大小的问题。
仔细看浏览器的network后看到有两个文件的TTFB以及download content时长过长。
3.1、TTFB时长问题
详细描述见TTFB
通常服务器在访问静态资源的时候，TTFB时长是在50ms以下。
现有项目中TTFB时长较长的时候，明显有两个文件的TTFB时长过长，一个是vendor一个是css文件，具体时长如下图：
vendor文件
css文件
而接口请求时长均在可接受范围内，如下图：
接口访问1
接口访问2
因此，从上述现象中看，接口请求不需要优化，可以通过CDN加速静态资源文件的加载
