如何移除构建后未使用的Vuetify CSS/JS，是否有自带配置支持

Vuetify 本身自带摇树优化（Tree Shaking）能力，无需额外接入第三方工具即可自动剔除未使用的CSS/JS代码，不同版本配置方法如下：

1. Vuetify 3.x 版本 #

3.x 版本默认支持自动摇树，仅需按官方规则配置对应插件即可：

• Vite 项目安装 vite-plugin-vuetify 插件，Webpack 项目安装 webpack-plugin-vuetify 插件
• 对应配置示例：

  Vite 项目 vite.config.js 配置 #

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
  
  export default defineConfig({
    plugins: [
      vue({ template: { transformAssetUrls } }),
      vuetify({ autoImport: true })
    ]
  })
  

  Webpack 项目 vue.config.js 配置 #

  const { defineConfig } = require('@vue/cli-service')
  const VuetifyPlugin = require('webpack-plugin-vuetify')
  
  module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
      plugins: [new VuetifyPlugin({ autoImport: true })]
    }
  })
  

开启配置后构建时只会打包项目实际用到的组件对应的JS、CSS代码，可直接消除99%的冗余体积。

2. Vuetify 2.x 版本 #

2.x 版本需手动配置按需引入规则：

• 安装 babel-plugin-transform-imports 插件
• 修改 babel.config.js 配置如下：

  module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins: [
      [
        'transform-imports',
        {
          vuetify: {
            transform: 'vuetify/lib/components/${member}',
            preventFullImport: true
          }
        }
      ]
    ]
  }
  

• 注意不要在入口文件手动引入Vuetify全量CSS文件vuetify/dist/vuetify.min.css，删除全量引入代码即可。

内容的提问来源于stack exchange，提问作者Unmy_