Vite 常用插件推荐

在使用 Vite 构建项目的过程中，合理选择和配置插件可以显著提升开发效率和应用性能。本章将介绍一些常用的 Vite 插件，并提供它们的安装方法和基本使用示例。

1. vite-plugin-vue2 和 vite-plugin-vue3

尽管 Vite 官方支持 Vue 3，但对于那些需要兼容 Vue 2 的项目来说，vite-plugin-vue2 是一个很好的选择。同时，对于使用 Vue 3 的项目，vite-plugin-vue3 则是更合适的选择。

安装方法：

npm install vite-plugin-vue2 --save-dev
# 或者
npm install vite-plugin-vue3 --save-dev

基本使用示例：

// vite.config.js
import { defineConfig } from 'vite'
import vue2 from 'vite-plugin-vue2'
import vue3 from 'vite-plugin-vue3'

export default defineConfig({
  plugins: [vue2(), vue3()]
})

需要注意的是，这两个插件不能同时使用，应根据你的项目所使用的 Vue 版本选择合适的插件。

2. vite-plugin-purgecss

vite-plugin-purgecss 可以帮助我们从 CSS 文件中移除未使用的样式，从而减小最终打包文件的体积，提升加载速度。

安装方法：

npm install vite-plugin-purgecss --save-dev

基本使用示例：

// www.javascriptcn.com code example
// vite.config.js
import { defineConfig } from 'vite'
import purgecss from 'vite-plugin-purgecss'

export default defineConfig({
  plugins: [
    purgecss({
      content: ['./index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
      defaultExtractor: content => content.match(/[\w-:/]+(?<!-)/g) || []
    })
  ]
})

3. vite-plugin-imagemin

为了进一步优化项目性能，减少图片资源的体积，可以使用 vite-plugin-imagemin 插件对图片进行压缩处理。

安装方法：

npm install vite-plugin-imagemin --save-dev

基本使用示例：

// www.javascriptcn.com code example
// vite.config.js
import { defineConfig } from 'vite'
import imagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      pngquant: {
        quality: [0.65, 0.9],
        speed: 4
      },
      mozjpeg: {
        quality: 80,
      }
    })
  ]
})

4. vite-plugin-eslint

代码质量检查对于任何项目都至关重要。vite-plugin-eslint 提供了一种方便的方式来集成 ESLint 到 Vite 项目中。

安装方法：

npm install vite-plugin-eslint --save-dev

基本使用示例：

// www.javascriptcn.com code example
// vite.config.js
import { defineConfig } from 'vite'
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.vue'],
      exclude: ['node_modules/**'],
      cache: true
    })
  ]
})

5. vite-plugin-svgr

SVG 图标在 Web 开发中越来越受欢迎，但直接使用 SVG 文件会增加 HTTP 请求的数量。vite-plugin-svgr 允许我们将 SVG 文件作为 React 组件导入，从而简化 SVG 图标的使用。

安装方法：

npm install vite-plugin-svgr --save-dev

基本使用示例：

// www.javascriptcn.com code example
// vite.config.js
import { defineConfig } from 'vite'
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [
    svgr()
  ]
})

以上就是一些常用的 Vite 插件及其使用方法。通过合理利用这些插件，我们可以大大提高开发效率和最终产品的性能。当然，除了上述提到的插件外，还有很多其他优秀的插件可供选择，开发者可以根据项目的具体需求来决定是否引入以及如何配置这些插件。