पाठ 16 / 25

Minification और compression

Terser और CssMinimizerPlugin से Webpack output छोटा करें, और build time, bundle size व compression का संतुलन बनाएँ।

Size reduction techniques

Minification functionality को बदले बिना unnecessary characters को remove करता है। Compression (gzip, brotli) servers द्वारा apply किया जाता है। Webpack production mode TerserPlugin को JS minification के लिए use करता है।

Minifiers को configure करें

Optimization के लिए minification settings को customize करें।

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

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

Output:

Bundles minified and optimized for production

Speed बनाम size को balance करें

Aggressive minification build time को increase करता है। Large projects के लिए parallel minification पर विचार करें। Server-side gzip/brotli compression essential है।

त्वरित जाँच

त्वरित जाँच: Minification क्या है?

  • Functionality को preserve करते हुए unnecessary characters को remove करना।
  • Code को समझना मुश्किल बनाना।
  • Bundles को smaller pieces में split करना।
  • सुरक्षा के लिए bundle को encrypt करना।
Answer

Functionality को preserve करते हुए unnecessary characters को remove करना। — Minification whitespace, comments को remove करके और variable names को shorten करके file size को reduce करता है।