现象：

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