Forgetting to minify assets before deployment

Skipping asset minification can significantly impact your application’s performance and user experience. Here’s how to properly handle asset optimization for production deployments.

Consequences of Unminified Assets

1. Larger bundle sizes increasing load times
2. Reduced performance due to unoptimized code
3. Exposed source code making it easier to reverse-engineer
4. Higher bandwidth costs for you and your users

Proper Minification Setup

1. Create React App (Automatic Minification)

# Production build includes minification by default
npm run build

2. Webpack Configuration (Custom Setup)

// webpack.config.prod.js
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          ecma: 2020,
          compress: {
            drop_console: true, // Optional: remove console logs
          },
          output: {
            comments: false,
          },
        },
      }),
      new CssMinimizerPlugin(),
    ],
  },
};

3. Vite Configuration

// vite.config.js
import { defineConfig } from 'vite';
import vitePluginMinify from 'vite-plugin-minify';

export default defineConfig({
  build: {
    minify: 'terser', // or 'esbuild' for faster builds
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  },
  plugins: [
    vitePluginMinify({}),
  ],
});

Verification Steps

1. Check bundle sizes:

   ls -lh build/static/js/*.js

2. Verify minification:

   head -n 1 build/static/js/main.*.js
   # Should show minified code (no comments, single line)

3. Use source map explorer:

   npx source-map-explorer build/static/js/main.*.js

Advanced Optimization Techniques

1. Code Splitting

// React lazy loading
const LazyComponent = React.lazy(() => import('./LazyComponent'));

2. Asset Compression

# Add brotli/gzip compression
npm install compression-webpack-plugin --save-dev

// webpack.config.js
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'brotliCompress',
      filename: '[path][base].br',
    }),
  ],
};

3. Image Optimization

npm install image-minimizer-webpack-plugin --save-dev

CI/CD Integration

# GitHub Actions example
name: Build and Deploy

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci
      - run: npm run build -- --prod
      - name: Verify minification
        run: |
          if grep -r "console.log" build/; then
            echo "Unminified code found!"
            exit 1
          fi

Common Pitfalls and Fixes

1. Problem: Minification breaks source maps

   // Fix: Configure source maps properly
   devtool: 'source-map', // in production

2. Problem: Missing CSS minification

   // Fix: Add CSS minimizer
   new OptimizeCSSAssetsPlugin({})

3. Problem: Third-party libraries not minifying

   // Fix: Check externals configuration
   externals: {
     react: 'React',
   }

Remember to always test your minified builds thoroughly as aggressive minification can sometimes break functionality. Consider implementing these checks in your deployment pipeline to catch minification issues early.