vue3首屏速度优化

vue3项目部署到云服务器后，发现首屏速度很慢，在首屏时就下载了所有的资源，优化方案如下：

1.nginx开启gzip压缩

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 9;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

2.关闭prefetch

因为vuecli 3默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容， 在首屏会默认加载全部的js文件， 所以要关闭这个功能，在vue.config.js中设置

//vue.config.js
chainWebpack(config) {
    config.plugins.delete('preload') 
    config.plugins.delete('prefetch') 
  }

• Preload用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。
• Prefetch用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

当 prefetch 插件被禁用时，你可以通过 webpack 的内联注释手动选定要提前获取的代码区块

//router.js
component: () => import(/* webpackChunkName: "about",webpackPrefetch: true */ "../views/Home.vue"),

3.代码分割splitChunks

代码中所有的依赖包会集成到一起，生成chunk-vendors.js，如果发现这个js很大，可以通过分割，将大型代码库分割成多个较小的chunks（块）。这就在首次加载页面时，浏览器只需要下载和解析那些立即需要的代码块，而不是整个应用的所有代码，在vue.config.js中设置

optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 20000,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
            priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
            name(module) {
              // 设定分包以后的文件模块名字，按照包名字替换拼接一下
                
              if (!module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)) return;
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
              return `npm.${packageName.replace('@', '')}`;
            }
          }
        }
      }
    },