import viteCompression from 'vite-plugin-compression';

// plugins 數(shù)組中添加
viteCompression({
  verbose: true, // 顯示壓縮日志
  threshold: 10240, // 超過(guò)10kb的文件才壓縮
  algorithm: 'gzip', // 算法可選brotliCompress
  ext: '.gz',
  deleteOriginFile: false // 根據(jù)服務(wù)器配置決定是否刪除源文件
})

import { viteStaticCopy } from 'vite-plugin-static-copy';

// 圖片壓縮（需安裝 vite-plugin-imagemin）
import viteImagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 65 },
      pngquant: { quality: [0.65, 0.9] },
      svgo: {
        plugins: [{ name: 'removeViewBox' }, { name: 'cleanupIDs' }]
      }
    }),
    // 靜態(tài)資源復(fù)制插件
    viteStaticCopy({
      targets: [
        { src: 'public/static-assets', dest: 'assets' }
      ]
    })
  ]
}

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            if (id.includes('vue')) return 'vue-core';
            if (id.includes('lodash')) return 'lodash';
            return 'vendor';
          }
          if (id.includes('src/components')) return 'components';
        },
        chunkFileNames: 'js/[name]-[hash].js'
      }
    }
  }
}

// 路由配置示例
const routes = [
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue')
  }
]

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()],
  dts: true // 生成類型聲明文件
})

export default {
  server: {
    hmr: {
      overlay: true, // 顯示錯(cuò)誤覆蓋層
      protocol: 'ws',
      host: 'localhost',
      port: 3000
    },
    watch: {
      usePolling: true // Docker環(huán)境需要開(kāi)啟
    }
  }
}

import path from 'path';

export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '#': path.resolve(__dirname, './types')
    }
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "#/*": ["./types/*"]
    }
  }
}

export default {
  build: {
    sourcemap: process.env.NODE_ENV === 'production' ? 'hidden' : true
  }
}

import { createHtmlPlugin } from 'vite-plugin-html';

export default {
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          cdnVue: '<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>'
        }
      }
    })
  ],
  build: {
    rollupOptions: {
      external: ['vue', 'vue-router'],
      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter'
        }
      }
    }
  }
}

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // ...其他配置
        },
        assetFileNames: 'assets/[ext]/[name]-[hash][extname]'
      }
    }
  }
}

// index.html 添加預(yù)加載
<link rel="preload" href="/assets/fonts/iconfont.woff2" rel="external nofollow"  as="font" type="font/woff2" crossorigin>

build: {
  assetsInlineLimit: 4096, // 4kb以下資源轉(zhuǎn)base64
}

server: {
  watch: {
    ignored: ['!**/node_modules/your-package/**'] // 忽略無(wú)關(guān)模塊監(jiān)聽(tīng)
  }
}

css: {
  postcss: {
    plugins: [
      require('postcss-critical-css')({
        outputPath: 'critical'
      })
    ]
  }
}

npm install rollup-plugin-visualizer -D

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

plugins: [visualizer({ open: true })]

// main.ts
import { performance } from 'perf_hooks';
if (import.meta.env.DEV) {
  performance.mark('app-start');
}