Nuxt 3/Vuetify应用加载重复请求脚本致内存错误求助

1. 检查Vuetify的自动导入与树摇配置 #

Vuetify默认自动导入配置不当会导致大量组件/指令被拆分为独立小脚本，务必在nuxt.config.ts里强制开启树摇并精准控制导入范围：

export default defineNuxtConfig({
  vuetify: {
    treeShake: true,
    autoImport: true,
    components: false, // 关闭全局组件注册，仅导入实际用到的组件
    directives: false // 关闭全局指令注册，按需导入
  }
})

同时避免在业务代码中全局导入Vuetify所有模块（如import * as Vuetify from 'vuetify'）。

2. 缩小Nuxt自动导入范围 #

Nuxt默认的组件自动导入如果未限制目录，会扫描所有组件目录生成冗余chunk，调整配置如下：

export default defineNuxtConfig({
  components: {
    dirs: [
      { path: '~/components', global: false }, // 仅导入用到的组件，不全局注册
      // 只保留实际用到的组件目录，避免扫描冗余路径
    ]
  }
})

另外检查modules配置，移除未使用的第三方模块，部分模块会自动注入大量冗余脚本。

3. 优化打包与代码分割策略 #

调整Nuxt的代码分割规则，合并过小的chunk，减少请求数量：

export default defineNuxtConfig({
  build: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000, // 增大最小chunk体积阈值，避免生成大量小脚本
      maxSize: 200000,
      cacheGroups: {
        vuetify: {
          test: /[\\/]node_modules[\\/]vuetify[\\/]/,
          name: 'vuetify',
          chunks: 'all'
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  nitro: {
    compressPublicAssets: true, // 开启静态资源压缩
    minify: true
  }
})

4. 排查第三方依赖与冗余脚本 #

• 清理package.json中未使用的依赖，用npm ls或yarn why分析依赖调用链，移除冗余依赖。
• 检查统计、广告类第三方SDK是否被全局注入，改为仅在需要的页面按需导入。

5. 分析打包产物定位问题 #

运行打包分析命令，查看chunk分布情况：

npx nuxt build --analyze

通过生成的可视化报告，定位生成大量小chunk的模块，针对性优化。

启动时请求数量截图 #

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