vite下的vue部分插件

@vitejs/plugin-legacy

vite插件@vitejs/plugin-legacy的作用是为打包后的文件提供传统浏览器兼容性支持

Vite作为一个基于浏览器原生ESM的构建，工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回，ie浏览器不支持原生ESM，所以看不到页面，只能打包后才能看见

import legacy from '@vitejs/plugin-legacy';
  plugins: [
    vue(),
    vueJsx(),
    legacy({
      targets: ['chrome 52'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.for-each',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all',
      ],
      modernPolyfills: ['es.string.replace-all'],
    }),
    AutoImport({
      imports: ['vue', 'vue-router'], // 自动导入vue和vue-router相关函数
      dts: 'src/auto-import.d.ts', // 生成 `auto-import.d.ts` 全局声明
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],

unplugin-auto-import

实现vue函数自动导入 自动导入composition [api]

  AutoImport({
      imports: ['vue', 'vue-router'], // 自动导入vue和vue-router相关函数
      dts: 'src/auto-import.d.ts', // 生成 `auto-import.d.ts` 全局声明
    }),

unplugin-vue-components

实现vue组件的自动按需导入

import { VantResolver } from 'unplugin-vue-components/resolvers';
Components({
      resolvers: [VantResolver()],
    }),

vite-plugin-compression

静态资源压缩 地址

rollup-plugin-visualizer

打包分析,可视化并分析构件报, 查询模块占用空间大小,以及模块依赖关系

import visualizer from 'rollup-plugin-visualizer'
visualizer({
open:true
})

vite-plugin-vue-setup-extend

借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，可以直接在script标签上定义name

npm i vite-plugin-vue-setup-extend -D

// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

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