Vite 优化配置方案

前言

Vite 是一个快速的前端构建工具，特别适用于现代前端框架如 Vue 和 React。为了进一步提升项目的性能和开发体验，我们可以对 Vite 进行一些优化配置。本文将介绍一些常见的优化策略，并提供详细的配置示例和注释。

1. 安装必要的插件

首先，我们需要安装一些常用的 Vite 插件来帮助优化项目：

yarn add unplugin-auto-import unplugin-vue-components vite-plugin-restart vite-plugin-imagemin postcss-preset-env @vitejs/plugin-legacy vite-plugin-compression rollup-plugin-visualizer -D

2. 配置 vite.config.js

以下是一个优化后的 vite.config.js 配置文件，并附有详细注释：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import ViteRestart from 'vite-plugin-restart';
import viteImagemin from 'vite-plugin-imagemin';
import PostcssPresetEnv from 'postcss-preset-env';
import legacy from '@vitejs/plugin-legacy';
import { visualizer } from 'rollup-plugin-visualizer';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    vue(),
    // 自动导入 Vue 和 Vue Router 的 API
    AutoImport({
      imports: ['vue', 'vue-router'],
    }),
    // 自动注册组件
    Components({
      dts: 'src/components.d.ts',
      dirs: ['src/components'],
    }),
    // 监听文件变化并自动重启 Vite
    ViteRestart({
      restart: ['.env', 'vite.config.js', 'jsconfig.json'],
    }),
    // 图片压缩
    viteImagemin({
      gifsicle: {
        optimizationLevel: 3,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4,
      },
      svgo: {
        plugins: [
          { name: 'removeViewBox' },
          { name: 'removeEmptyAttrs', active: false },
        ],
      },
    }),
    // 兼容旧版浏览器
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
    // 启用 gzip 压缩
    viteCompression({
      threshold: 1024000, // 仅压缩大于 1MB 的文件
    }),
    // 打包分析工具
    visualizer(),
  ],
  css: {
    postcss: {
      plugins: [PostcssPresetEnv()],
    },
  },
  server: {
    host: '0.0.0.0', // 允许外部访问
    port: 8848, // 自定义端口
    open: true, // 启动时自动打开浏览器
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置路径别名
    },
  },
  build: {
    outDir: 'dist', // 输出目录
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash:8].js',
        entryFileNames: 'js/[name]-[hash:8].js',
        assetFileNames: '[ext]/[name]-[hash:8].[ext]',
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      },
    },
  },
  esbuild: {
    drop: ['console', 'debugger'], // 移除 console 和 debugger 语句
  },
});

通过以上配置和优化策略，你可以显著提升 Vite 项目的构建速度和运行性能。