vite3 package optimization

Package file classification

The files packaged before configuration are all sloppy

 build: {
    
    
    rollupOptions: {
    
    
      output: {
    
    
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  }

After configuration, each type of file will be placed in its own folder (but the package size remains the same)

large file split

At the end of the packaging, you may find

that it means that some packages exceed the maximum package size limit of 500k. You can set the upper limit of the package size, but it is useless. The overall package will not be minified

 build:{
    
    
    chunkSizeWarningLimit: 1500,
  }

The best solution is to cut large files

 build: {
    
    
    rollupOptions: {
    
    
      output: {
    
    
        manualChunks(id) {
    
    
          if (id.includes('node_modules')) {
    
    
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  }

In this way, you will package the large dependency package separately. Then you can perform targeted optimization. Like me, these two dependency packages are too big

Then compress the large file

 npm i vite-plugin-compression -D

//vite.config.ts
//开启压缩
import viteCompression from 'vite-plugin-compression'

plugins:[  viteCompression({
    
    
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
    })
    ]

Open it at this point and you will find that the compressed file has been generated

So since the compression configuration is turned on, nginx also needs to cooperate

 server {
    
    
        listen       8080;
        server_name  localhost;
        #gzip
        #开启gzip功能
        gzip on; 
        #开启gzip静态压缩功能
        gzip_static on; 
        #gzip缓存大小
        gzip_buffers 4 16k;
        #gzip http版本
        gzip_http_version 1.1;
        #gzip 压缩级别 1-10 
        gzip_comp_level 5;
        #gzip 压缩类型
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;
    }