Native option to minify JSON files during the build process

[eltitobarte]

Which @angular/* package(s) are relevant/related to the feature request?

compiler-cli

Description

Currently, Angular's modern build system (@angular/build) optimizes, compresses, and minifies scripts, styles, and HTML, but it does not process or minify .json files located in assets (such as internationalization dictionaries, local datasets, or configuration files).

For multi-language applications or enterprise apps handling large structured data payloads, unminified JSON assets leave substantial whitespace, indentations, and formatting in production builds, unnecessarily increasing distribution sizes. Developers are currently forced to write custom post-build Node.js file-system scripts to bridge this gap.

Proposed solution

Introduce a native configuration property in angular.json (such as "minifyJson": true) within the application build options that automatically parses and strips whitespace from all output .json files during production builds.

Native integration in @angular/build would eliminate the friction of maintaining external post-compilation scripts and optimize production asset footprints out of the box.

import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

// Recreate __dirname for ES Modules scope
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// Define the target output directory to scan
const outputPath = path.join(__dirname, 'dist/public');

/**
 * Recursively traverses a directory and minifies all JSON files found.
 * @param {string} dir - The directory path to process.
 */
function minifyJsonFiles(dir) {
  // Exit early if the directory does not exist
  if (!fs.existsSync(dir)) return;

  // Read all entries in the current directory
  fs.readdirSync(dir, { withFileTypes: true }).forEach(entry => {
    const fullPath = path.join(dir, entry.name);

    if (entry.isDirectory()) {
      // Recursively process subdirectories
      minifyJsonFiles(fullPath);
    } else if (entry.isFile() && path.extname(entry.name) === '.json') {
      try {
        // Read, parse, and overwrite the file with its minified version
        const content = fs.readFileSync(fullPath, 'utf8');
        const minified = JSON.stringify(JSON.parse(content));
        fs.writeFileSync(fullPath, minified, 'utf8');
      } catch (e) {
        // Log clean error message if parsing or writing fails
        console.error(`Error minifying JSON file at ${fullPath}:`, e.message);
      }
    }
  });
}

// Execute the minification process
console.log('Minifying JSON files...');
minifyJsonFiles(outputPath);
console.log('JSON files minified successfully!');

Alternatives considered

• Writing custom post-build Node.js scripts to programmatically traverse the output directory and minify JSON assets using the file system module. This approach requires maintaining extra scripts and configuring custom hook commands in package.json.
• Manually minifying source JSON files before placing them in assets, which is completely unmaintainable and error-prone for dynamic or multi-language localization dictionaries.
• Integrating third-party bundler plugins, which often lack official support, complicate the build pipeline, and risk breaking compatibility with updates to Angular's @angular/build application builder.

[alan-agius4]

Hi @eltitobarte, thanks for the feature request!

We've decided not to add a native JSON minification option to @angular/build for two main reasons:

1. HTTP Compression (Brotli / Gzip): Static assets served in production are compressed over the wire. Because repetitive whitespace compresses with near-100% efficiency, the actual network transfer size difference between minified and unminified JSON is negligible (usually <1%).
2. Static Asset Invariant: Files in assets are designed to be copied verbatim. Parsing and re-stringifying them would risk breaking files with comments or trailing commas (JSONC/JSON5), or assets where formatting is intentional.

If you need JSON payloads minified at build time, consider importing them directly in TypeScript (import data from './data.json'), which allows esbuild to bundle, tree-shake, and minify them automatically.

Thanks again for the suggestion!