Hey there! Let's walk through setting up proper compression and asset optimization for your Nuxt project step by step—since you're new to Nuxt, I'll keep everything clear and actionable, and address why that nuxt-compress package might have failed you.

First, note that Nuxt 2 and Nuxt 3 have different optimization workflows. I'll cover both, but let's start with the most common scenario (Nuxt 2) since you mentioned nuxt.config.js (Nuxt 3 uses nuxt.config.ts by default).

1.1: Default JS/CSS Compression (Already Built-In!) #

You're right—yarn build already compresses JS and CSS by default in production. To verify or tweak this, add these settings to your nuxt.config.js:

export default {
  build: {
    // Ensure minification is enabled (default: true for production)
    minimize: true,
    // Customize JS compression with Terser
    terser: {
      terserOptions: {
        compress: {
          drop_console: true, // Optional: Remove console.log in production
          drop_debugger: true // Remove debugger statements
        }
      }
    },
    // Customize CSS compression with cssnano
    cssnano: {
      preset: 'default',
      discardComments: { removeAll: true } // Strip all CSS comments
    }
  }
}

No extra packages needed here—this is all part of Nuxt's default build pipeline.

1.2: Enable Gzip/Brotli Compression #

The nuxt-compress package is unmaintained, so switch to the official @nuxtjs/compression plugin instead:

1. Install the plugin:

   yarn add @nuxtjs/compression --dev
   

2. Add it to your nuxt.config.js modules and configure:

   export default {
     modules: [
       '@nuxtjs/compression'
     ],
     compression: {
       gzip: {
         threshold: 8192, // Only compress files larger than 8KB
         minRatio: 0.8 // Keep compressed files only if they're 20% smaller than original
       },
       brotli: {
         threshold: 8192 // Enable Brotli (better compression than Gzip)
       }
     }
   }
   

When you run yarn build, Nuxt will generate .gz and .br versions of your assets. Note: You'll need to configure your server (e.g., Nginx) to serve these compressed files to browsers that support them.

1.3: Merge JS/CSS Files (Use With Caution!) #

Nuxt defaults to code splitting (splitting assets into smaller chunks) for better caching and faster initial loads. If you really need to merge files (only recommended for small projects), add this to your nuxt.config.js build section:

export default {
  build: {
    // Disable code splitting entirely (merges most assets)
    splitChunks: {
      layouts: false,
      pages: false,
      commons: false
    },
    // OR: Merge only vendor dependencies into one file
    // splitChunks: {
    //   cacheGroups: {
    //     vendor: {
    //       test: /[\\/]node_modules[\\/]/,
    //       name: 'vendor',
    //       chunks: 'all'
    //     }
    //   }
    // }
  }
}

⚠️ Warning: Merging files can increase your initial page load time for larger projects—weigh the tradeoffs carefully.

1.4: Compress HTML #

Add the nuxt-html-minifier plugin to minify your production HTML:

1. Install it:

   yarn add nuxt-html-minifier --dev
   

2. Configure in nuxt.config.js:

   export default {
     modules: [
       'nuxt-html-minifier'
     ],
     htmlMinifier: {
       collapseWhitespace: true,
       removeComments: true,
       minifyCSS: true, // Compress inline CSS in HTML
       minifyJS: true, // Compress inline JS in HTML
       removeEmptyAttributes: true
     }
   }
   

If you're using Nuxt 3, most optimizations are built-in with Nitro (Nuxt 3's backend framework):

1. Add these settings to nuxt.config.ts:

   export default defineNuxtConfig({
     nitro: {
       compressPublicAssets: true, // Auto-generate Gzip/Brotli for static assets
       minify: true // Minify JS/CSS/HTML by default
     },
     vite: {
       build: {
         minify: 'terser', // Use Terser for better compression (default is esbuild for speed)
         terserOptions: {
           compress: {
             drop_console: true
           }
         }
       }
     }
   })
   

No extra plugins needed for basic compression—Nuxt 3 handles HTML minification and asset compression out of the box.

• Development (no compression, for debugging):

  yarn dev
  

• Production Build (runs all optimizations):

  yarn build
  

• Start Production Server:

  yarn start
  

• Generate Static Site (for static hosting like Netlify/Vercel):

  yarn generate
  

The nuxt-compress package is no longer maintained and has compatibility issues with newer Nuxt versions. Using the official @nuxtjs/compression (for Nuxt 2) or Nuxt 3's built-in Nitro settings is far more reliable.

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