项目中遇到vue首页加载十几秒的问题，一下几种方法，亲测好用，首页加载2秒左右。
1.路由懒加载
{
path: '/chinaWine',
name: 'chinaWine',
component: resolve => require(['./views/chinaWine'], resolve)
},
此方法会把原本打包到一个app.js文件分开成多个js文件打包，这样会减小单个文件的大小，但是不会减小整个js文件夹的大小。
通过这种方式可以做到按需加载，只加载单个页面的js文件。
2、打包文件中去掉map文件
打包的app.js过大，另外还有一些生成的map文件。先将多余的map文件去掉，
找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可
3、CDN引入第三方库
在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，
但也会有一些不能按需引入，我们可以采用CDN外部加载，
在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，
在externals中加入该组件，这是为了避免编译时找不到组件报错。
4、终极大招，gzip打包
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。
html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
1、npm i -D compression-webpack-plugin
2、在vue.config.js中配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})]
}
}
},
3、在NGINX中配置
http {
gzip on;
gzip_min_length 1k;
gzip_buffers 4 8k;
gzip_http_version 1.0;
gzip_comp_level 8;
gzip_proxied any;
gzip_types application/javascript text/css image/gif;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
#以下的配置省略...
}
nginx -s reload ：修改配置后重新加载生效
