vue前端性能优化之分包策略、异步组件、Gzip压缩

    项目的性能优化是有完整项目经历的开发者都会遇到得一个问题。这是整个项目开发最后的一步，也是最关键的一步，做一个项目并不是单单完成功能就算结束了，作为开发者，更要站在用户角度去进行项目体验，响应快速的程序交互会直接提升程序的印象分。反之，如果页面间的交互响应缓慢、时常卡顿，无论程序功能再多再强大，让人很难去想去体验第二次。这个时候，性能优化尤为重要。

一、Gzip压缩

1.服务端nginx Gzip压缩配置

    nginx开启gzip压缩后，就会帮你来把数据（静态资源 和 接口数据）进行压缩，然后传入到客户端，客户端来解压，然后在进行代码的读取，经过测试之后，发现资源包体积会被压缩到原来的20%左右，这样大大减少了资源的请求时间，提升了页面的响应速度。Gzip压缩是项目必备的优化方法，也是最直观有效的。

// nginx.conf ​
http {   
    gzip on; // 开启gzip压缩 
    gzip_types *; // 对响应的MIME types在text/html的基础上进行扩展配置，*匹配所有MIME types ...             
    gzip_static  on; // 开启gzip_static压缩
    // 详细的配置信息可以参考nginx官网： http://nginx.org/en/docs/http/ngx_http_gzip_module.html 
}

2.客户端插件Gzip压缩

    webpack项目使用的compression-webpack-plugin插件

// 这里使用的 vue.config.js, webpack.config.js 里面内容大部分相同，只是vue.config.js里面是链式调用的。
  const compressionWebpackPlugin = require('compression-webpack-plugin')
  configureWebpack: {
    plugins: [new compressionWebpackPlugin({
      filename: '[path].gz[query]', //压缩后的文件名
      algorithm: 'gzip', // 压缩格式 有：gzip、brotliCompress,
      test: /.(js|css|svg)$/,
      threshold: 10240,// 只处理比这个值大的资源，按字节算
      minRatio: 0.8, //只有压缩率比这个值小的文件才会被处理，压缩率=压缩大小/原始大小，如果压缩后和原始文件大小没有太大区别，就不用压缩
      deleteOriginalAssets: false //是否删除原文件，最好不删除，服务器会自动优先返回同名的.gzip资源，如果找不到还可以拿原始文件
    })],

    vite项目使用的vite-plugin-compression插件

// vite.config.ts
import viteCompression from 'vite-plugin-compression';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      ...
      viteCompression({
          verbose: true, // 默认即可
          disable: false, //开启压缩(不禁用)，默认即可
          deleteOriginFile: false, //删除源文件
          threshold: 10240, //压缩前最小文件大小
          algorithm: 'gzip', //压缩算法
          ext: '.gz', //文件类型
      })
      ...
  ],
})

二、vue异步组件

   异步组件在需要渲染的时候才会被加载，同时延迟加载其余组件，从而提高了首次加载速度，减轻了页面渲染负担，并且也减轻了服务器压力。在项目打包后，如果一个vue页面import了太多的资源，那么这个页面生成一个js资源包而且体积很大，所以进入页面的时候需要下载完这个资源包才会渲染，这样服务端的压力很大，可能出现响应时间长、请求阻塞等问题。使用异步组件后，打包后会将这些组件打包为单独的js包，这样就将一个资源分割成了n个，服务端可以发起多个http请求来下载资源，大大提升了响应时间与渲染速度。

     1.vue2异步组件

    使用 

Vue.component

方法与

resolve => require(['./yourComponent.vue'], resolve)

结合使用。

require

语法将会告诉 webpack，自动将你的构建代码切割成多个包，这些包会通过 http 请求加载。

Vue.component('async-component', function(resolve) {
  require(['./components/AsyncComponent.vue'], resolve)
})

    2.vue3异步组件

    使用vue3提供的 

defineAsyncComponent

方法

import { defineAsyncComponent } from "vue"
const LoginPopup = defineAsyncComponent(() => import("./components/LoginPopup.vue"))

使用异步组件之前主页面打包完资源包6M

使用异步组件之后主页面打包完资源包，把页面挂载的组件单独打包

三、分包策略

     其实异步组件就是vue的一种分包策略，但是由于前期考虑不足，导致开发完成后遇到严重的性能问题，这时候才考虑性能的优化方案，使用vue异步组件之后，发现存在bug，因为引入组件都使用了ref标记，由于ref在组件没有实例的时候是获取不到的，所以会报undeifiend。没办法只能通过vite工具来实现，在vite运行时是基于ESMoudle，打包是基于rollup，所以配置rollup打包即可。如下设置即可分割单个vue文件，比较过后与异步组件分割的文件大小几乎一致。

// vite.config.ts
build: {
    // rollup 配置
    rollupOptions: {
        output: {
            manualChunks(id: any): string {
                if (id.includes("style.css")) {
                    // 需要单独分割那些资源 就写判断逻辑就行
                    return 'src/style.css';
                }
                if (id.includes("HelloWorld.vue")) {
                    // 单独分割hello world.vue文件
                    return 'src/components/HelloWorld.vue';
                }
                //  最小化拆分包
                if (id.includes("node_modules")) {
                    return id
                            .toString()
                            .split("node_modules/")[1]
                            .split("/")[0]
                            .toString();
                }
            }
        }
    }
}

   分包之前，只有一个主页js+css两个资源包，首屏加载请求时间需要1.5s，点击登录等2s才有反应，而且这个时间是对网速有一定要求的，网络延迟高甚至要等7-8s，这对于用户体验来说是非常差的。

   分包之后响应时间不到1s，虽然还很慢，但是请求高并发使请求时间趋于稳定，最大的文件体积不到原来的1/10，更多的是文件的编译时间，请求资源时间不会有太大影响。

最后

     前端的优化方案肯定不止这些，还有许多包括webpack的代码优化插件、删除打包后的map文件、脚本优化、静态资源优化、懒加载、预编译、SSR渲染等等方案，但是大的方面弄好这三个就可以了，其他都是需要在编码过程中需要注意与优化的细节。