如何在保留SSR的前提下缩小Nuxt 3网站的打包体积？

当然可以在保留SSR功能的前提下缩小Nuxt 3入口文件体积，以下是针对性的优化方案：

1. 先做体积分析，定位冗余代码 #

• 直接运行npx nuxt build --analyze生成体积分析报告，能清晰看到哪些模块（比如第三方依赖、未使用的组件）占用了大量空间，方便针对性优化。

2. 利用Nuxt 3内置优化配置 #

• 确保自动代码分割与Tree Shaking生效：Nuxt 3默认开启，但可以在nuxt.config.ts中明确配置强化：

export default defineNuxtConfig({
  nitro: {
    minify: true,
    treeshake: true
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            // 把第三方依赖单独拆分打包，避免塞进入口文件
            if (id.includes('node_modules')) {
              return id.split('node_modules/')[1].split('/')[0].toString();
            }
          }
        }
      }
    }
  }
})

• 用异步组件加载非首屏内容：把不是首屏必须的组件改成异步导入，这样它们不会被打包进入口文件，而是按需加载：

const HeavyComponent = defineAsyncComponent(() => import('~/components/HeavyComponent.vue'))

3. 优化第三方依赖 #

• 替换重体积库：比如用轻量的lucide-vue-next图标库替代font-awesome，用date-fns替代体积庞大的moment.js，能大幅减少打包体积。
• 按需导入依赖：对于支持按需加载的库（如lodash-es），不要全量导入，比如用import { debounce } from 'lodash-es'代替import _ from 'lodash'。

4. 强化Tree Shaking与死代码消除 #

• 尽量使用ES模块语法（避免CommonJS），Vite对ES模块的Tree Shaking支持更好。
• 在nuxt.config.ts中启用Terser压缩，进一步清除死代码和冗余内容：

export default defineNuxtConfig({
  vite: {
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true, // 生产环境移除console日志
          drop_debugger: true
        }
      }
    }
  }
})

5. 开启静态资源与传输压缩 #

• 启用Gzip/Brotli压缩：在Nitro配置中开启，让服务器返回压缩后的文件，减少实际传输的体积：

export default defineNuxtConfig({
  nitro: {
    compressPublicAssets: true,
    brotli: {
      threshold: 1024 // 大于1KB的文件启用brotli压缩
    }
  }
})

• 移除不必要的polyfill：Nuxt 3默认适配现代浏览器，不需要额外的polyfill；如果必须兼容旧浏览器，通过browserslist精准配置，避免冗余的polyfill打包。

6. 精简入口文件代码 #

• 检查app.vue或全局布局文件，移除首屏不需要的逻辑、组件或样式，把非核心功能移到异步加载的模块里。
• 不要在入口文件中全局注册大量组件，改用局部注册或异步注册的方式。

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