【前端开发】vue3+vite项目部分优化

npm i rollup-plugin-visualizer -S

import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";

npm i vite-plugin-compression -D

import compressPlugin from "vite-plugin-compression"; //静态资源压缩

compressPlugin({ //gzip静态资源压缩
        verbose: true,    // 默认即可
        disable: false,  //开启压缩(不禁用)，默认即可
        deleteOriginFile: false, //删除源文件
        threshold: 10240, //压缩前最小文件大小
        algorithm: 'gzip',  //压缩算法
        ext: '.gz', //文件类型
 }),

gzip on; 
gzip_static on; 
gzip_buffers 4 16k;
gzip_comp_level 8; 
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #压缩文件类型       
gzip_vary on;

npm i vite-plugin-imagemin -D

import viteImagemin from 'vite-plugin-imagemin'

 viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 20
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox'
            },
            {
              name: 'removeEmptyAttrs',
              active: false
            }
          ]
        }
      }),