vite打包优化CDN压缩的分析实现

npm install rollup-plugin-visualizer -D
yarn add rollup-plugin-visualizer -D
pnpm install rollup-plugin-visualizer -D

plugins: [
    visualizer({
      open: false, // 注意这里要设置为true，否则无效
      filename: 'stats.html', // 分析图生成的文件名
      gzipSize: true, // 收集 gzip 大小并将其显示
      brotliSize: true, // 收集 brotli 大小并将其显示
    }),
]

// 安装插件
npm install vite-plugin-cdn-import
// 引入
import importToCDN from 'vite-plugin-cdn-import';
// 使用
importToCDN({
  modules: [
    {
      name: 'lodash',
      var: '_',
      path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
    },
  ],
}),

npm install vite-plugin-cdn-import -D
yarn add vite-plugin-cdn-import -D
pnpm install vite-plugin-cdn-import -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,
      },
    ],
  },
}),

// 安装
npm install vite-plugin-compression -D
yarn add vite-plugin-compression -D
// 引用
import viteCompression from 'vite-plugin-compression';
// 使用
viteCompression({
  verbose: true,
  disable: false,
  threshold: 10240,
  algorithm: 'gzip',
  ext: '.gz',
}),