Code compression strategies and tool selection

The Necessity of Code Compression

Code compression is an indispensable part of modern front-end build processes. As project scales grow, uncompressed code can lead to increased loading times, negatively impacting user experience. Compressed code significantly reduces file size, improves transmission efficiency, and to some extent, protects source code.

Webpack's Built-in Compression Solution

Starting with version 4.0, Webpack has integrated TerserPlugin as the default JS compression tool. The basic configuration is straightforward:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

This configuration automatically enables multi-process parallel compression and applies default optimization strategies. TerserPlugin supports ES6+ syntax and correctly handles modern JS features like arrow functions and class declarations.

Advanced Compression Strategies

Multi-process Parallel Compression

For large projects, configure the parallel parameter to improve compression speed:

new TerserPlugin({
  parallel: true,  // Enable multi-process
  // Or specify the exact number of threads
  // parallel: 4,
})

Custom Compression Options

Use terserOptions to deeply customize compression behavior:

new TerserPlugin({
  terserOptions: {
    compress: {
      drop_console: true,  // Remove all console statements
      pure_funcs: ['console.log'], // Only remove console.log
      passes: 3,  // Multiple passes to improve compression rate
    },
    mangle: {
      properties: {
        regex: /^_/,  // Only mangle properties starting with an underscore
      },
    },
  },
})

Conditional Compression

In some cases, specific files require different compression strategies:

optimization: {
  minimizer: [
    new TerserPlugin({
      test: /\.m?js(\?.*)?$/i,
      exclude: /\/node_modules\/lodash/,
    }),
  ],
}

CSS Compression Solutions

CssMinimizerPlugin

Webpack 5 recommends using CssMinimizerPlugin for CSS processing:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        parallel: 4,
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),
    ],
  },
};

Advanced CSS Optimization

Combine with PostCSS for smarter CSS compression:

const PostcssPresetEnv = require('postcss-preset-env');

new CssMinimizerPlugin({
  minimizerOptions: {
    processorOptions: {
      postcssOptions: {
        plugins: [
          PostcssPresetEnv({
            stage: 3,
            features: {
              'nesting-rules': true,
            },
          }),
        ],
      },
    },
  },
})

HTML Compression Solutions

HtmlWebpackPlugin Integration

Configure compression options directly in HtmlWebpackPlugin:

new HtmlWebpackPlugin({
  minify: {
    collapseWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true,
    minifyCSS: true,
    minifyJS: true,
  },
})

Custom HTML Compression

For more complex requirements, use specialized tools like html-minifier-terser:

const HtmlMinimizerPlugin = require('html-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new HtmlMinimizerPlugin({
        minimizerOptions: {
          collapseWhitespace: true,
          removeComments: true,
          caseSensitive: true,
          keepClosingSlash: true,
        },
      }),
    ],
  },
};

Resource Compression Strategies

Image Compression

Use image-minimizer-webpack-plugin for image resources:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  plugins: [
    new ImageMinimizerPlugin({
      minimizerOptions: {
        plugins: [
          ['gifsicle', { interlaced: true }],
          ['jpegtran', { progressive: true }],
          ['optipng', { optimizationLevel: 5 }],
          [
            'svgo',
            {
              plugins: [
                {
                  removeViewBox: false,
                },
              ],
            },
          ],
        ],
      },
    }),
  ],
};

Font File Compression

Although font files are usually already compressed, further optimization is possible:

const FontminPlugin = require('fontmin-webpack');

module.exports = {
  plugins: [
    new FontminPlugin({
      autodetect: true,
      glyphs: ['你', '好', '世', '界'], // Include only specific characters
    }),
  ],
};

Advanced Optimization Techniques

AST-based Optimization

Use Babel plugins for optimization during the compilation phase:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              ['transform-remove-console', { exclude: ['error', 'warn'] }],
              'transform-remove-debugger',
            ],
          },
        },
      },
    ],
  },
};

Code Splitting and Compression

Combine with SplitChunksPlugin for smarter compression:

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    maxSize: 244000,
    minChunks: 1,
  },
  minimizer: [
    new TerserPlugin({
      extractComments: false,
    }),
  ],
}

Balancing Performance and Quality

Compression Level Adjustment

Different environments can use different compression levels:

const isProduction = process.env.NODE_ENV === 'production';

new TerserPlugin({
  terserOptions: {
    compress: {
      ecma: 2015,
      warnings: false,
      comparisons: false,
      inline: isProduction ? 2 : 1,
    },
    mangle: {
      safari10: true,
    },
    output: {
      ecma: 2015,
      comments: false,
      ascii_only: true,
    },
  },
})

SourceMap Handling

Properly handle SourceMaps during compression:

new TerserPlugin({
  sourceMap: true,
  terserOptions: {
    output: {
      comments: /^\**!|@preserve|@license|@cc_on/,
    },
  },
})

Monitoring and Analysis

Compression Effect Analysis

Use webpack-bundle-analyzer to evaluate compression results:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'report.html',
      openAnalyzer: false,
    }),
  ],
};

Build Performance Monitoring

Track time spent in the compression phase:

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // Webpack configuration
});

Special Scenario Handling

Special Treatment for Third-party Libraries

Some libraries require special compression configurations:

new TerserPlugin({
  terserOptions: {
    compress: {
      defaults: false,
      unused: true,
    },
    mangle: false,
    format: {
      beautify: true,
      comments: true,
    },
  },
  include: /[\\/]node_modules[\\/]some-library[\\/]/,
})

Preserving Specific Comments

Retain special comments like legal notices:

new TerserPlugin({
  extractComments: {
    condition: /^\**!|@preserve|@license|@cc_on/i,
    filename: (fileData) => {
      return `${fileData.filename}.LICENSE.txt${fileData.query}`;
    },
    banner: (licenseFile) => {
      return `License information can be found in ${licenseFile}`;
    },
  },
})

Modern Compression Techniques

ESBuild Integration

Use esbuild-loader for ultra-fast compression:

const { ESBuildMinifyPlugin } = require('esbuild-loader');

module.exports = {
  optimization: {
    minimizer: [
      new ESBuildMinifyPlugin({
        target: 'es2015',
        css: true,
      }),
    ],
  },
};

SWC Compression

Leverage SWC's compression capabilities:

const SwcMinifyPlugin = require('swc-minify-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new SwcMinifyPlugin({
        ecma: 2015,
        compress: {
          unused: true,
        },
      }),
    ],
  },
};

Continuous Optimization Practices

Automated Benchmarking

Establish compression effect benchmarks:

const { execSync } = require('child_process');

function getSizeStats() {
  const output = execSync('du -sb dist').toString();
  return parseInt(output.split('\t')[0], 10);
}

const beforeSize = getSizeStats();

// After build completion
const afterSize = getSizeStats();
console.log(`Compression rate: ${((beforeSize - afterSize) / beforeSize * 100).toFixed(2)}%`);

Progressive Compression Strategy

Apply different compression levels in stages:

const defaultMinimizer = new TerserPlugin({
  terserOptions: {
    compress: {
      defaults: true,
    },
  },
});

const aggressiveMinimizer = new TerserPlugin({
  terserOptions: {
    compress: {
      passes: 3,
      pure_getters: true,
      unsafe: true,
      unsafe_comps: true,
    },
  },
});

module.exports = {
  optimization: {
    minimizer: [
      process.env.AGGRESSIVE_MINIFY === 'true' 
        ? aggressiveMinimizer 
        : defaultMinimizer,
    ],
  },
};