总的来说和 webpack 优化思路相通 更多社区插件：https://github.com/vitejs/awesome-vite#plugins

分析构建

安装 rollup-plugin-visualizer 插件，该插件用于分析依赖大小占比。

npm install  rollup-plugin-visualizer @types/rollup-plugin-visualizer -D
///在vite.config.ts中引入并使用它。
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  // ...
  plugins: [
    // 将这个visualizer插件放到最后的位置中
    visualizer()
  ]
});

复制代码 配置完毕之后，下一次npm build项目时，会在目录下创建一个stats.html，里面即是项目中的分析结果。分析可以将空间占比比较大的文件进行适当的优化。

代码压缩

安装vite-plugin-compress插件，对项目中的代码进行gzip压缩或brotli压缩

npm install vite-plugin-compress -s
// 在vite.config.ts中引入并使用
import compress from 'vite-plugin-compress'
export default defineConfig({
  // ...
  plugins: [
    compress(),
  ]
});

图片压缩（会导致项目启动时间延长）

vite-plugin-imagemin

npm i vite-plugin-imagemin -D
// 在vite.config.ts中引入并使用
import viteImagemin from 'vite-plugin-imagemin'
复制代码
export default defineConfig({
  // ...
  plugins: [
    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
          }
        ]
      }
    }),
  ]
});

lodash 优化

将lodash替换成lodash-es,就可以一行引入方式

export { cloneDeep, throttle, debounce } from 'lodash'

lodash-es为ES modules版本的库，可以依赖tree-shake优化，只打包使用到的函数

兼容

部分旧版浏览器不支持ESM，需要使用@vitejs/plugin-legacy来兼容旧版的浏览器 安装@vitejs/plugin-legacy

npm install @vitejs/plugin-legacy -s
// 在vite.config.ts中引入并使用它。
import legacy from '@vitejs/plugin-legacy'
复制代码
export default defineConfig({
  // ...
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
});

基础配置

// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示：
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  base: '/foo/', // 开发或生产环境服务的公共基础路径
  optimizeDeps: {
    force: true // 强制进行依赖预构建
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局变量文件
      }
    },
    postcss: {
      plugins: [
        // viewport 布局适配
        postcssPxToViewport({
          viewportWidth: 375
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路径别名
    },
    extensions: ['.js', '.ts', '.json'] // 导入时想要省略的扩展名列表
  },
  server: {
    host: true, // 监听所有地址
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  },
  build: {
    outDir: 'build', // 打包文件的输出目录
    assetsDir: 'static', // 静态资源的存放目录
    assetsInlineLimit: 4096 // 图片转 base64 编码的阈值
  },
  plugins: [
    vue(),
    viteMockServe()
  ]
})