[Vite] 优化前端打包

1. 按需加载组件
2. router 这里使用动态路由引入，如 component: () => import("@/views/Index.vue")
3. JPG、PNG、SVG 等图片资源的压缩
4. Gzip 压缩js、css、html，也要配置 Nginx 的 gzip

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import { visualizer } from "rollup-plugin-visualizer";
import viteCompression from "vite-plugin-compression";
import viteImagemin from "vite-plugin-imagemin";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      AutoImport({
        imports: ["vue", "vue-router", "@vueuse/core"],
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
      // 分析
      visualizer({
        open: false,
        filename: "visualizer.html"
      }),
      // 压缩
      viteCompression({
        deleteOriginFile: true // 源文件压缩后是否删除
      }),
      viteImagemin({
        // gif
        gifsicle: {
          optimizationLevel: 3, // 选择1到3之间的优化级别
          interlaced: false // 隔行扫描gif进行渐进式渲染
        },
        // png
        optipng: {
          optimizationLevel: 7 // 选择0到7之间的优化级别
        },
        // jpeg
        mozjpeg: {
          quality: 20 // 压缩质量，范围从0(最差)到100(最佳)。
        },
        // png
        pngquant: {
          quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
          speed: 1 // 压缩速度，1(强力)到11(最快)
        },
        // svg
        svgo: {
          plugins: [
            {
              name: "removeViewBox"
            },
            {
              name: "removeEmptyAttrs",
              active: false
            }
          ]
        }
      })
    ],
    css: {
      preprocessorOptions: {
        scss: {
          api: "modern-compiler"
        }
      }
    },
    build: {
      rollupOptions: {
        output: {
          chunkFileNames: "js/[name]-[hash].js", // 引入文件名的名称
          entryFileNames: "js/[name]-[hash].js", // 包的入口文件名称
          assetFileNames: "[ext]/[name]-[hash].[ext]" // 资源文件
        }
      }
    },
    esbuild: {
      drop: ["console", "debugger"]
    }
  };
});