vue首页加载优化

vue项目将打包代码部署上线后访问项目,会发现页面会出现长时间的空白等待。这个严重影响了用户的体验。可以通过下面方法优化。
一、引入cdn。链接https://www.bootcdn.cn/
造成加载时间过慢的元凶是vendor文件，该文件存放的是项目中所有的第三方依赖。比如vuex、vue-router、jquery等。优化的一个要点就是分离第三方依赖。但是分离的时候要考虑到，即便将依赖分离后依赖文件仍然存在服务器上，而相对来说很多成熟类库会提供cdn结点，访问cdn会比访问自己的服务器要快，因此优化的第一步是对相关依赖用cdn方式引入。
1、index.html中

2、使用了CDN，webpack就不需要再打包这几个依赖，但是webpack会默认追踪所有依赖，因此需要配置过滤的依赖项。打开webpack.base.conf.js, 增加如下配置：

二、路由按需加载

三、vue图片懒加载
见我之前写的博客
四、减少http的请求个数
比如雪碧图，能合并接口请求的可通过promise.all并发请求。
五、gzip压缩
1、npm install -save gzip
2、webpack.prod.conf.js加入如下代