Vue3+Vite4项目进行性能优化的配置方案

import vitecompression from 'vite-plugin-compression';

// plugins 数组中添加
vitecompression({
  verbose: true, // 显示压缩日志
  threshold: 10240, // 超过10kb的文件才压缩
  algorithm: 'gzip', // 算法可选brotlicompress
  ext: '.gz',
  deleteoriginfile: false // 根据服务器配置决定是否删除源文件
})

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' }]
      }
    }),
    // 静态资源复制插件
    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, // 显示错误覆盖层
      protocol: 'ws',
      host: 'localhost',
      port: 3000
    },
    watch: {
      usepolling: true // docker环境需要开启
    }
  }
}

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 添加预加载
<link rel="preload" href="/assets/fonts/iconfont.woff2" rel="external nofollow"  as="font" type="font/woff2" crossorigin>

build: {
  assetsinlinelimit: 4096, // 4kb以下资源转base64
}

server: {
  watch: {
    ignored: ['!**/node_modules/your-package/**'] // 忽略无关模块监听
  }
}

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');
}