Skip to content

Vite plugin

unplugin-vue-components / unplugin-auto-import 按需加载

  • 按需加载组件示例:
查看代码
js
// AntDesignVue、ElementPlus、Vant、Icons
import Components from 'unplugin-vue-components/vite'
import {
  AntDesignVueResolver,
  ElementPlusResolver,
  VantResolver,
} from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default {
  plugins: [
    Components({
      resolvers: [
        AntDesignVueResolver(),
        ElementPlusResolver(),
        VantResolver(),
        IconsResolver()
      ],
    }),
    Icons(),
  ],
}
  • vue2 按需加载element-ui组件
查看代码
js
import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import { fileURLToPath, URL } from 'url';
import Components from 'unplugin-vue-components/vite'
import { ElementUiResolver } from 'unplugin-vue-components/resolvers'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue2(),
    Components({
      resolvers: [ElementUiResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})
  • vue3 按需加载naive-ui组件 / 按需加载 vue api 、naive-ui api
查看代码
ts
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'url'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  plugins: [
    vue(),
    // 按需导入api
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
        },
      ],
    }),
    // 按需导入组件
    Components({
      resolvers: [NaiveUiResolver()],
      dts: 'src/shims/components.d.ts',
      deep: true,
      extensions: ['vue', 'ts'],
    }),
  ],
})

rollup-plugin-visualizer

  • 可视化并分析您的 Rollup 包,看看哪些模块占用了空间
js
import { visualizer } from "rollup-plugin-visualizer";
module.exports = {
  plugins: [visualizer()],
};

vite-plugin-babel

  • 主要作用:
    • build:构建时
    • runtime:运行时,支持es新特性(esbuild不支持的)
js
import { defineConfig } from 'vite';
import { babel } from '@rollup/plugin-babel';

export default defineConfig({
  plugins: [
    babel({
      babelHelpers: 'bundled', // 或者 'runtime',根据你的需求选择
      presets: [
        [
          '@babel/preset-env',
          {
            targets: '> 0.25%, not dead', // 根据你的目标浏览器调整
            useBuiltIns: 'usage', // 或者 'entry',根据你的需求选择
            corejs: 3, // 或者 2,根据你的需求选择
          },
        ],
      ],
    }),
  ],
});

@vitejs/plugin-legacy

  • 为 Vite 项目添加对旧版浏览器的支持
js
import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      polyfills: true,
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})