vue3.x脚手架首页加载慢的问题

项目中遇到vue首页加载十几秒的问题，一下几种方法，亲测好用，首页加载2秒左右。https://wuxiaohuaer.github.io/

1.路由懒加载

{
  path: '/chinaWine',
  name: 'chinaWine',
  component: resolve => require(['./views/chinaWine'], resolve)
},
此方法会把原本打包到一个app.js文件分开成多个js文件打包，这样会减小单个文件的大小，但是不会减小整个js文件夹的大小。
通过这种方式可以做到按需加载，只加载单个页面的js文件。

2、打包文件中去掉map文件

打包的app.js过大，另外还有一些生成的map文件。（1）先将多余的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  ：修改配置后重新加载生效