Vite plugin

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

• 按需加载组件示例：

查看代码

// 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组件

查看代码

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

查看代码

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 包，看看哪些模块占用了空间

import { visualizer } from "rollup-plugin-visualizer";
module.exports = {
  plugins: [visualizer()],
};

vite-plugin-babel

• 主要作用：
  • build：构建时
  • runtime：运行时，支持es新特性（esbuild不支持的）

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 项目添加对旧版浏览器的支持

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'

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