Total extension bundle size optimized and remains under 5MB

Extension bundle size directly affects install time, update time, and popup load time on every user's machine. A bloated bundle — caused by unminified libraries, uncompressed images, or unnecessary dependencies like full lodash or moment.js — forces users to download and parse megabytes of JavaScript the extension doesn't need. ISO 25010:2011 performance-efficiency.resource-utilisation identifies this as a defect. Chrome Web Store rejects extensions over 128MB, but the practical ceiling for perceived performance is far lower; extensions over 5MB noticeably slow popup initialization on mid-range hardware.

Enable production mode in your bundler to activate minification and tree-shaking, then audit the largest files and replace heavyweight dependencies with lighter alternatives.

// webpack.config.js
module.exports = {
  mode: 'production',       // Enables minification and tree-shaking
  optimization: { minimize: true },
  devtool: false,           // Exclude source maps from production build
};

Replace moment.js with date-fns, import lodash functions individually (import debounce from 'lodash/debounce'), and compress images with imagemin or squoosh before bundling. Run du -sh dist/* sorted by size to identify the largest offenders.

• ID: extension-ux-performance.bundle-memory.bundle-size-under-5mb

• Severity: critical

• What to look for: Examine the build output directory (dist/, build/, or the extension's unpacked root). Sum the sizes of all JS files, CSS files, image assets, and other included resources. Check package.json for bundler configuration — is minification enabled? Are source maps excluded from the production build? Look for large dependencies (UI framework bundles, charting libraries, ML models, large icon sets) that may be unnecessary or replaceable with lighter alternatives. Count every file in the extension package and enumerate the largest files by size. Report: X files totaling Y MB.

• Pass criteria: Total extension bundle (all files that would be packaged into the .crx) is under 5MB. Minification is enabled for production builds. Source maps, if present, are either excluded from the production package or their size is understood and accepted. Report even on pass: "Extension bundle is X MB across Y files. Largest file: Z (N KB)."

• Fail criteria: Total bundle size exceeds 5MB, or the bundle is approaching 5MB without clear justification. Minification not configured for production. Large unnecessary assets (uncompressed image libraries) present in the bundle. Do NOT pass if the bundle includes unminified libraries or development-only dependencies in the production build.

• Skip (N/A) when: Build output directory is not present (development-only codebase with no build step). In this case, evaluate source code size and flag as unable to determine final bundle size.

• Cross-reference: The no-unused-assets check verifies that the bundle size measured here does not include dead assets inflating the total.

• Detail on fail: Provide size breakdown. Example: "Total bundle: 8.3MB. Breakdown: vendor.js 5.1MB (includes full lodash and moment.js), icons/ 2.7MB (PNG files not optimized), popup.js 0.5MB" or "No minification configured in webpack.config.js — production build includes unminified 12MB source."

• Remediation: Reduce bundle size through multiple approaches:

  // webpack.config.js — enable minification
  module.exports = {
    mode: 'production',  // Enables minification and tree-shaking
    optimization: {
      minimize: true,
    },
    devtool: false,  // Exclude source maps from production
  };
  

  Replace heavy dependencies: use date-fns instead of moment.js, import only what you need from lodash (import debounce from 'lodash/debounce'), and compress images with imagemin or squoosh. The Chrome Web Store limit is 128MB for the uploaded zip, but user-visible bundle size should stay well under 5MB for fast install and load times.