vite一些好用的插件

Vue3 + Vite 开发中一些插件可以提高开发效率

1. unplugin-vue-components
   Vue 的按需组件自动导入，可以用来按需引入Ant Design

// 安装
cnpm i unplugin-vue-components -D
cnpm i ant-design-vue

在vite.config.ts中配置

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

export default defineConfig({
  plugins: [
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ]
})

2. unplugin-auto-import
   自动导入 Composition API，不用再次引用

// 安装
cnpm i unplugin-auto-import -D

在vite.config.ts中配置

import { defineConfig } from 'vite'
import autoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    autoImport({
      imports: [
        'vue',
        'vue-router',
      ],
      dts:'src/auto-import.d.ts' // 自定义路径下自动生成文件夹存放全局指令
    }),
  ]
})

// 不需要在引用关于vue的api，可以直接调用
import { computed, ref } from 'vue'

注：如果eslint标注为报错，有红色波浪线
解决办法：
在.eslintrc.js 文件中

extends: [
	'./.eslintrc-auto-import.json', 在这里配置生成的JSON文件 需要和vite.config.ts文件保持一致
],

在tsconfig.json文件中

"include": [
    "tests/**/*.ts",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts",
    "build/**/*.ts",
    "build/**/*.d.ts",
    "mock/**/*.ts",
    "vite.config.ts",
    "src/auto-import.d.ts" // 与上面生成的地址一致
  ],

关闭vscode重新打开报错就消失了

3. rollup-plugin-visualizer
   打包分析插件

// 安装
cnpm i rollup-plugin-visualizer -D

在vite.config.ts中配置

import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'

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

执行打包命令（yarn build）后，会在根目录下生成一个 stats.html文件
4. vite-plugin-compression
使用 gzip 或 brotli 压缩资源。打包优化的时候会使用到这个插件，减小打包体积

// 安装
cnpm i vite-plugin-compression -D

// 安装
cnpm i rollup-plugin-visualizer -D

在vite.config.ts中配置

import { defineConfig } from 'vite'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // gz格式
    compression({
      threshold: 1024 * 500,   // 体积大于 threshold 才会被压缩,单位 b
      ext: '.gz',   // 压缩文件格式
      deleteOriginFile: false   // 是否删除源文件
    })
    // br格式
    // compression({
    //   threshold: 1024 * 500,    // 体积大于 threshold 才会被压缩,单位 b
    //   ext: '.br',
    //   algorithm: 'brotliCompress',
    //   deleteOriginFile: false
    // })
  ]
})

参考：https://blog.csdn.net/qq_16525279/article/details/129594518