ViteIt can be extended using plugins, thanks to Rollupthe excellent plugin interface design and some Viteunique extra options.
In Vue3 + Vitethe development , there are the following plug-ins to help, which is icing on the cake and an artifact in daily development.
1、unplugin-vue-components
VueThe on-demand components are automatically imported. github address
Automatically import UI library
Most common UI library parsers are built in. Take Ant Design Vue as an example.
- Install
pnpm add unplugin-vue-components -D
// 安装ant-design-vue
pnpm add ant-design-vue
- Vite configuration uses
// vite.config.js
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()]
})
]
})
- Use the plug-in to compare the code before and after
The template code remains unchanged:
<template>
<a-button>Add</a-button>
</template>
Before using the plugin, you need to <script>label importthe component, as follows:
<script setup>
import {
Button } from 'ant-design-vue'
</script>
After using the plug-in, there is no need to introduce it, and use ant-design-vuethe component .
2、unplugin-auto-import
Imported automatically Composition API. github address
- Install
pnpm add unplugin-auto-import -D
- Vite configuration uses
// vite.config.js
import {
defineConfig } from 'vite'
import autoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
autoImport({
imports: [
'vue',
'vue-router',
'pinia'
],
dts: false
})
]
})
- Use the plug-in to compare the code before and after
before use:
import {
computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
After use:
const count = ref(0)
const doubled = computed(() => count.value * 2)
3、rollup-plugin-visualizer
Package analysis plugins.
- Install
pnpm add rollup-plugin-visualizer -D
- vite configuration
// vite.config.js
import {
defineConfig } from 'vite'
import {
visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
visualizer()
]
})
- use plugin
After executing the packaging command ( pnpm build), a stats.htmlfile , which will be opened with a browser, as shown in the figure below:
4、vite-plugin-compression
Use gzipor brotlito compress resources. This plug-in will be used during packaging optimization to reduce the packaging volume. github address
- Install
pnpm add vite-plugin-compression -D
- vite configuration use
Two formats ( gzformat and brformat ) configuration.
// vite.config.js
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
// })
]
})
- Parameter Description
| params | type | default | default |
|---|---|---|---|
| verbose | boolean | true | Whether to output the compressed result in the console |
| filter | RegExp or (file: string) => boolean | DefaultFilter | Specify which resources are not compressed |
| disable | boolean | false | Whether to disable |
| threshold | number | 1025 | It will be compressed if the volume is larger than threshold, the unit is b |
| algorithm | string | gzip | Compression algorithm, optional [‘gzip’,‘brotliCompress’ ,‘deflate’,‘deflateRaw’] |
| ext | string | .gz | Suffix of the generated compressed package |
| compressionOptions | object | - | The parameters of the corresponding compression algorithm |
| deleteOriginFile | boolean | - | Whether to delete source files after compression |