feat(angular-rspack): add statsJson plugin (#79)

Author: Coly010

e2e/fixtures/rspack-csr-scss/rspack.config.js

@@ -14,6 +14,7 @@ module.exports = () => {
           tsConfig: './tsconfig.app.json',
           polyfills: ['zone.js'],
           assets: [{ glob: '**/*', input: 'public' }],
+          statsJson: true,
           styles: ['./src/styles.scss'],
           stylePreprocessorOptions: {
             includePaths: ['../shared/styles/src'],

packages/angular-rspack/package.json

@@ -51,6 +51,7 @@
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
     "@babel/core": "7.26.10",
+    "@discoveryjs/json-ext": "0.6.3",
     "@nx/angular-rspack-compiler": "workspace:*",
     "@nx/devkit": "21.0.0",
     "autoprefixer": "10.4.21",

packages/angular-rspack/src/lib/config/config-utils/common-config.ts

@@ -1,4 +1,5 @@
 import { type Configuration, javascript } from '@rspack/core';
+import { resolve } from 'node:path';
 import {
   JS_ALL_EXT_REGEX,
   TS_ALL_EXT_REGEX,
@@ -11,6 +12,7 @@ import {
 import { getStylesConfig } from './style-config-utils';
 import { getCrossOriginLoading } from './helpers';
 import { configureSourceMap } from './sourcemap-utils';
+import { StatsJsonPlugin } from '../../plugins/stats-json-plugin';
 
 export async function getCommonConfig(
   normalizedOptions: NormalizedAngularRspackPluginOptions,
@@ -29,6 +31,7 @@ export async function getCommonConfig(
 
   const defaultConfig: Configuration = {
     context: normalizedOptions.root,
+    profile: normalizedOptions.statsJson,
     mode: isProduction ? 'production' : 'development',
     devtool: normalizedOptions.sourceMap.scripts ? 'source-map' : undefined,
     output: {
@@ -111,6 +114,17 @@ export async function getCommonConfig(
     },
     plugins: [
       ...sourceMapOptions.sourceMapPlugins,
+      ...(normalizedOptions.statsJson
+        ? [
+            new StatsJsonPlugin(
+              resolve(
+                normalizedOptions.root,
+                normalizedOptions.outputPath.base,
+                'stats.json'
+              )
+            ),
+          ]
+        : []),
       ...(i18n.shouldInline
         ? [
             {

packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts

@@ -224,6 +224,10 @@ export interface AngularRspackPluginOptions extends PluginUnsupportedOptions {
         entry: string;
         experimentalPlatform?: 'node' | 'neutral';
       };
+  /**
+   * Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.
+   */
+  statsJson?: boolean;
   stylePreprocessorOptions?: StylePreprocessorOptions;
   styles?: ScriptOrStyleEntry[];
   /**

packages/angular-rspack/src/lib/models/normalize-options.ts

@@ -287,6 +287,7 @@ export async function normalizeOptions(
     skipTypeChecking: options.skipTypeChecking ?? false,
     sourceMap: normalizeSourceMap(options.sourceMap),
     ssr: normalizedSsr,
+    statsJson: options.statsJson ?? false,
     stylePreprocessorOptions: options.stylePreprocessorOptions,
     subresourceIntegrity: options.subresourceIntegrity ?? false,
     supportedBrowsers: getSupportedBrowsers(root, { warn: console.warn }),

packages/angular-rspack/src/lib/models/unsupported-options.ts

@@ -40,7 +40,6 @@ export interface PluginUnsupportedOptions {
   progress?: boolean;
   watch?: boolean;
   poll?: number;
-  statsJson?: boolean;
   budgets?: BudgetEntry[];
   allowedCommonJsDependencies?: string[];
   appShell?: boolean;
@@ -54,7 +53,6 @@ export const TOP_LEVEL_OPTIONS_PENDING_SUPPORT = [
   'progress',
   'watch',
   'poll',
-  'statsJson',
   'budgets',
   'allowedCommonJsDependencies',
   'appShell',

packages/angular-rspack/src/lib/plugins/stats-json-plugin.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { createWriteStream } from 'node:fs';
+import { mkdir } from 'node:fs/promises';
+import { dirname } from 'node:path';
+import { pipeline } from 'node:stream/promises';
+import type { RspackPluginInstance, Compiler } from '@rspack/core';
+import { assertIsError } from '../utils/misc-helpers';
+import { addError } from '../utils/rspack-diagnostics';
+
+export class StatsJsonPlugin implements RspackPluginInstance {
+  constructor(private readonly statsOutputPath: string) {}
+
+  apply(compiler: Compiler) {
+    compiler.hooks.done.tapPromise(
+      'AngularRspackStatsJsonPlugin',
+      async (stats) => {
+        const { stringifyChunked } = await import('@discoveryjs/json-ext');
+        const data = stats.toJson('verbose');
+
+        try {
+          await mkdir(dirname(this.statsOutputPath), { recursive: true });
+          await pipeline(
+            stringifyChunked(data),
+            createWriteStream(this.statsOutputPath)
+          );
+        } catch (error) {
+          assertIsError(error);
+          addError(
+            stats.compilation,
+            `Unable to write stats file: ${error.message || 'unknown error'}`
+          );
+        }
+      }
+    );
+  }
+}