Nuxt3集成Vuetify3开发环境加载过慢，如何优化？

你的问题根源在于当前全量导入了所有Vuetify组件和指令，导致dev模式下编译、加载耗时过长。以下是具体优化方案：

一、启用Vuetify自动按需导入（最有效） #

手动导入用到的组件虽然可行，但自动按需导入更高效，能大幅减少初始加载的资源体积：

1. 安装自动导入插件：

npm install unplugin-vuetify -D

2. 修改nuxt.config.ts配置：

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  css: [
    "vuetify/lib/styles/main.sass",
    "@mdi/font/css/materialdesignicons.min.css",
  ],
  app: {
    baseURL: process.env.API_BASE_URL,
  },
  build: {
    transpile: ["vuetify"],
  },
  runtimeConfig: {
    public: {
      API_BASE_URL: process.env.API_BASE_URL,
    },
  },
  components: true,
  // 新增Vuetify自动导入配置
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
  // 启用Nuxt开发工具，加快热更新速度
  devtools: { enabled: true }
});

3. 简化Vuetify插件文件（/plugins/vuetify.ts）：

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: true,
    // 不再需要手动导入components和directives，自动按需导入
  });

  nuxtApp.vueApp.use(vuetify);
});

二、手动按需导入（适合组件使用较少的场景） #

如果不想使用自动插件，也可以手动仅导入实际用到的组件和指令：

// 只导入你项目中用到的组件，比如VBtn、VCard
import { VBtn, VCard } from "vuetify/components";
// 只导入用到的指令，比如v-hover
import { VHover } from "vuetify/directives";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: true,
    components: { VBtn, VCard },
    directives: { VHover },
  });

  nuxtApp.vueApp.use(vuetify);
});

三、额外优化建议 #

• 确保@mdi/font只加载必要的图标：如果项目中只用到部分Material Design图标，可以单独导入所需图标，替换全量的@mdi/font/css/materialdesignicons.min.css，进一步减少资源体积。
• 清理项目中未使用的依赖和组件：移除冗余代码和依赖，降低dev模式下的编译负担。

关于预构建的说明 #

Nuxt在dev模式下默认会预构建第三方依赖，Vuetify已经包含在内，所以不需要额外配置预构建。核心优化还是通过按需导入减少初始加载的组件数量。

内容的提问来源于stack exchange，提问作者v-kessler