From 32535c5ced22e134242d1183d79a4c929860674e Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Tue, 11 Mar 2025 13:27:33 +0000 Subject: [PATCH 1/2] feat(angular-rspack,angular-rsbuild): add namedChunks option --- e2e/fixtures/rspack-csr-css/rspack.config.js | 1 + .../src/lib/models/normalize-options.ts | 6 + .../src/lib/models/plugin-options.ts | 2 + .../src/lib/config/create-config.ts | 164 +++++++++--------- .../models/angular-rspack-plugin-options.ts | 2 + .../src/lib/models/normalize-options.ts | 1 + 6 files changed, 98 insertions(+), 78 deletions(-) diff --git a/e2e/fixtures/rspack-csr-css/rspack.config.js b/e2e/fixtures/rspack-csr-css/rspack.config.js index dd195e1..9007e9c 100644 --- a/e2e/fixtures/rspack-csr-css/rspack.config.js +++ b/e2e/fixtures/rspack-csr-css/rspack.config.js @@ -29,6 +29,7 @@ module.exports = () => { options: { extractLicenses: false, optimization: false, + namedChunks: true, }, }, } diff --git a/packages/angular-rsbuild/src/lib/models/normalize-options.ts b/packages/angular-rsbuild/src/lib/models/normalize-options.ts index 504de7c..6819b65 100644 --- a/packages/angular-rsbuild/src/lib/models/normalize-options.ts +++ b/packages/angular-rsbuild/src/lib/models/normalize-options.ts @@ -90,6 +90,7 @@ export const DEFAULT_PLUGIN_ANGULAR_OPTIONS: PluginAngularOptions = { outputPath: normalizeOutputPath(process.cwd(), undefined), outputHashing: 'all', useTsProjectReferences: false, + namedChunks: false, skipTypeChecking: false, devServer: { port: 4200, @@ -125,6 +126,10 @@ export function normalizeOptions( const aot = options.aot ?? true; const advancedOptimizations = aot && normalizedOptimization; + if (options.namedChunks) { + console.warn(`The "namedChunks" option is not supported with Rsbuild.`); + } + return { ...DEFAULT_PLUGIN_ANGULAR_OPTIONS, ...restOptions, @@ -135,6 +140,7 @@ export function normalizeOptions( advancedOptimizations, aot, outputHashing: options.outputHashing ?? 'all', + namedChunks: options.namedChunks ?? false, fileReplacements: resolveFileReplacements(fileReplacements, root), hasServer: getHasServer({ server, ssr: normalizedSsr }), devServer: normalizeDevServer(devServer), diff --git a/packages/angular-rsbuild/src/lib/models/plugin-options.ts b/packages/angular-rsbuild/src/lib/models/plugin-options.ts index e9738e3..47f4666 100644 --- a/packages/angular-rsbuild/src/lib/models/plugin-options.ts +++ b/packages/angular-rsbuild/src/lib/models/plugin-options.ts @@ -57,6 +57,7 @@ export interface PluginAngularOptions { hasServer: boolean; skipTypeChecking: boolean; useTsProjectReferences?: boolean; + namedChunks?: boolean; stylePreprocessorOptions?: StylePreprocessorOptions; devServer?: DevServerOptions; } @@ -66,5 +67,6 @@ export interface NormalizedPluginAngularOptions extends PluginAngularOptions { devServer: DevServerOptions & { port: number }; optimization: boolean | OptimizationOptions; outputHashing: OutputHashing; + namedChunks: boolean; outputPath: OutputPath; } diff --git a/packages/angular-rspack/src/lib/config/create-config.ts b/packages/angular-rspack/src/lib/config/create-config.ts index 88aa835..fba3581 100644 --- a/packages/angular-rspack/src/lib/config/create-config.ts +++ b/packages/angular-rspack/src/lib/config/create-config.ts @@ -157,48 +157,52 @@ export async function _createConfig( normalizedOptions.devServer?.proxyConfig ), }, - optimization: normalizedOptions.optimization - ? { - minimize: true, - runtimeChunk: false, - splitChunks: { - chunks: 'async', - minChunks: 1, - minSize: 20000, - maxAsyncRequests: 30, - maxInitialRequests: 30, - cacheGroups: { - defaultVendors: { - test: /[\\/]node_modules[\\/]/, - priority: -10, - reuseExistingChunk: true, - }, - default: { - minChunks: 2, - priority: -20, - reuseExistingChunk: true, - }, - }, - }, - minimizer: [ - new SwcJsMinimizerRspackPlugin({ - minimizerOptions: { - minify: true, - mangle: true, - compress: { - passes: 2, + optimization: { + chunkIds: normalizedOptions.namedChunks ? 'named' : 'deterministic', + moduleIds: 'deterministic', + ...(normalizedOptions.optimization + ? { + minimize: true, + runtimeChunk: false, + splitChunks: { + chunks: 'async', + minChunks: 1, + minSize: 20000, + maxAsyncRequests: 30, + maxInitialRequests: 30, + cacheGroups: { + defaultVendors: { + test: /[\\/]node_modules[\\/]/, + priority: -10, + reuseExistingChunk: true, }, - format: { - comments: false, + default: { + minChunks: 2, + priority: -20, + reuseExistingChunk: true, }, }, - }), - ], - } - : { - minimize: false, - minimizer: [], - }, + }, + minimizer: [ + new SwcJsMinimizerRspackPlugin({ + minimizerOptions: { + minify: true, + mangle: true, + compress: { + passes: 2, + }, + format: { + comments: false, + }, + }, + }), + ], + } + : { + minimize: false, + minimizer: [], + }), + }, plugins: [ ...(defaultConfig.plugins ?? []), new NgRspackPlugin({ @@ -288,48 +292,52 @@ export async function _createConfig( scriptType: 'module', module: true, }, - optimization: normalizedOptions.optimization - ? { - minimize: true, - runtimeChunk: 'single', - splitChunks: { - chunks: 'all', - minChunks: 1, - minSize: 20000, - maxAsyncRequests: 30, - maxInitialRequests: 30, - cacheGroups: { - defaultVendors: { - test: /[\\/]node_modules[\\/]/, - priority: -10, - reuseExistingChunk: true, - }, - default: { - minChunks: 2, - priority: -20, - reuseExistingChunk: true, - }, - }, - }, - minimizer: [ - new SwcJsMinimizerRspackPlugin({ - minimizerOptions: { - minify: true, - mangle: true, - compress: { - passes: 2, + optimization: { + chunkIds: normalizedOptions.namedChunks ? 'named' : 'deterministic', + moduleIds: 'deterministic', + ...(normalizedOptions.optimization + ? { + minimize: true, + runtimeChunk: 'single', + splitChunks: { + chunks: 'all', + minChunks: 1, + minSize: 20000, + maxAsyncRequests: 30, + maxInitialRequests: 30, + cacheGroups: { + defaultVendors: { + test: /[\\/]node_modules[\\/]/, + priority: -10, + reuseExistingChunk: true, }, - format: { - comments: false, + default: { + minChunks: 2, + priority: -20, + reuseExistingChunk: true, }, }, - }), - ], - } - : { - minimize: false, - minimizer: [], - }, + }, + minimizer: [ + new SwcJsMinimizerRspackPlugin({ + minimizerOptions: { + minify: true, + mangle: true, + compress: { + passes: 2, + }, + format: { + comments: false, + }, + }, + }), + ], + } + : { + minimize: false, + minimizer: [], + }), + }, plugins: [ ...(defaultConfig.plugins ?? []), new NgRspackPlugin({ diff --git a/packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts b/packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts index ac1a1f6..39bb44e 100644 --- a/packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts +++ b/packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts @@ -96,6 +96,7 @@ export interface AngularRspackPluginOptions { optimization?: boolean | OptimizationOptions; outputHashing?: OutputHashing; stylePreprocessorOptions?: StylePreprocessorOptions; + namedChunks?: boolean; devServer?: DevServerOptions; extractLicenses?: boolean; } @@ -107,6 +108,7 @@ export interface NormalizedAngularRspackPluginOptions index: NormalizedIndexElement | undefined; devServer: DevServerOptions & { port: number }; extractLicenses: boolean; + namedChunks: boolean; globalScripts: GlobalEntry[]; globalStyles: GlobalEntry[]; optimization: boolean | OptimizationOptions; diff --git a/packages/angular-rspack/src/lib/models/normalize-options.ts b/packages/angular-rspack/src/lib/models/normalize-options.ts index 4b35c3d..3e92bb5 100644 --- a/packages/angular-rspack/src/lib/models/normalize-options.ts +++ b/packages/angular-rspack/src/lib/models/normalize-options.ts @@ -221,6 +221,7 @@ export function normalizeOptions( hasServer: getHasServer({ server, ssr: normalizedSsr }), skipTypeChecking: options.skipTypeChecking ?? false, useTsProjectReferences: options.useTsProjectReferences ?? false, + namedChunks: options.namedChunks ?? false, devServer: normalizeDevServer(options.devServer), extractLicenses: options.extractLicenses ?? true, }; From a6fb36c06c9e832e94cc87698a78aadbc2886a76 Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Tue, 11 Mar 2025 13:40:54 +0000 Subject: [PATCH 2/2] feat(angular-rspack,angular-rsbuild): add commonChunk and vendorChunk option --- e2e/fixtures/rspack-csr-css/rspack.config.js | 1 + .../src/lib/models/normalize-options.ts | 16 ++++-- .../src/lib/models/plugin-options.ts | 3 +- .../src/lib/config/create-config.ts | 52 +++++++++++++------ .../models/angular-rspack-plugin-options.ts | 4 ++ .../src/lib/models/normalize-options.ts | 2 + 6 files changed, 58 insertions(+), 20 deletions(-) diff --git a/e2e/fixtures/rspack-csr-css/rspack.config.js b/e2e/fixtures/rspack-csr-css/rspack.config.js index 9007e9c..9fca205 100644 --- a/e2e/fixtures/rspack-csr-css/rspack.config.js +++ b/e2e/fixtures/rspack-csr-css/rspack.config.js @@ -30,6 +30,7 @@ module.exports = () => { extractLicenses: false, optimization: false, namedChunks: true, + vendorChunk: true, }, }, } diff --git a/packages/angular-rsbuild/src/lib/models/normalize-options.ts b/packages/angular-rsbuild/src/lib/models/normalize-options.ts index 6819b65..a696c73 100644 --- a/packages/angular-rsbuild/src/lib/models/normalize-options.ts +++ b/packages/angular-rsbuild/src/lib/models/normalize-options.ts @@ -72,6 +72,18 @@ export function validateOptimization( ); } +function validateChunkOptions(options: Partial) { + if (options.namedChunks !== undefined) { + console.warn(`The "namedChunks" option is not supported with Rsbuild.`); + } + if (options.commonChunk !== undefined) { + console.warn(`The "commonChunk" option is not supported with Rsbuild.`); + } + if (options.vendorChunk !== undefined) { + console.warn(`The "vendorChunk" option is not supported with Rsbuild.`); + } +} + export const DEFAULT_PLUGIN_ANGULAR_OPTIONS: PluginAngularOptions = { index: './src/index.html', browser: './src/main.ts', @@ -126,9 +138,7 @@ export function normalizeOptions( const aot = options.aot ?? true; const advancedOptimizations = aot && normalizedOptimization; - if (options.namedChunks) { - console.warn(`The "namedChunks" option is not supported with Rsbuild.`); - } + validateChunkOptions(options); return { ...DEFAULT_PLUGIN_ANGULAR_OPTIONS, diff --git a/packages/angular-rsbuild/src/lib/models/plugin-options.ts b/packages/angular-rsbuild/src/lib/models/plugin-options.ts index 47f4666..faa946f 100644 --- a/packages/angular-rsbuild/src/lib/models/plugin-options.ts +++ b/packages/angular-rsbuild/src/lib/models/plugin-options.ts @@ -58,6 +58,8 @@ export interface PluginAngularOptions { skipTypeChecking: boolean; useTsProjectReferences?: boolean; namedChunks?: boolean; + commonChunk?: boolean; + vendorChunk?: boolean; stylePreprocessorOptions?: StylePreprocessorOptions; devServer?: DevServerOptions; } @@ -67,6 +69,5 @@ export interface NormalizedPluginAngularOptions extends PluginAngularOptions { devServer: DevServerOptions & { port: number }; optimization: boolean | OptimizationOptions; outputHashing: OutputHashing; - namedChunks: boolean; outputPath: OutputPath; } diff --git a/packages/angular-rspack/src/lib/config/create-config.ts b/packages/angular-rspack/src/lib/config/create-config.ts index fba3581..6d346a9 100644 --- a/packages/angular-rspack/src/lib/config/create-config.ts +++ b/packages/angular-rspack/src/lib/config/create-config.ts @@ -15,6 +15,8 @@ import { getStyleLoaders } from './style-config-utils'; import { getOutputHashFormat } from './helpers'; import { getProxyConfig } from './dev-server-config-utils'; +const VENDORS_TEST = /[\\/]node_modules[\\/]/; + export async function _createConfig( options: AngularRspackPluginOptions, rspackConfigOverrides?: Partial @@ -163,7 +165,7 @@ export async function _createConfig( ...(normalizedOptions.optimization ? { minimize: true, - runtimeChunk: false, + runtimeChunk: 'single', splitChunks: { chunks: 'async', minChunks: 1, @@ -171,15 +173,24 @@ export async function _createConfig( maxAsyncRequests: 30, maxInitialRequests: 30, cacheGroups: { - defaultVendors: { - test: /[\\/]node_modules[\\/]/, - priority: -10, - reuseExistingChunk: true, + default: normalizedOptions.commonChunk && { + chunks: 'async', + minChunks: 2, + priority: 10, }, - default: { + common: normalizedOptions.commonChunk && { + name: 'common', + chunks: 'async', minChunks: 2, - priority: -20, - reuseExistingChunk: true, + enforce: true, + priority: 5, + }, + vendors: false, + defaultVendors: normalizedOptions.vendorChunk && { + name: 'vendor', + chunks: (chunk) => chunk.name === 'main', + enforce: true, + test: VENDORS_TEST, }, }, }, @@ -298,7 +309,7 @@ export async function _createConfig( ...(normalizedOptions.optimization ? { minimize: true, - runtimeChunk: 'single', + runtimeChunk: false, splitChunks: { chunks: 'all', minChunks: 1, @@ -306,15 +317,24 @@ export async function _createConfig( maxAsyncRequests: 30, maxInitialRequests: 30, cacheGroups: { - defaultVendors: { - test: /[\\/]node_modules[\\/]/, - priority: -10, - reuseExistingChunk: true, + default: normalizedOptions.commonChunk && { + chunks: 'async', + minChunks: 2, + priority: 10, }, - default: { + common: normalizedOptions.commonChunk && { + name: 'common', + chunks: 'async', minChunks: 2, - priority: -20, - reuseExistingChunk: true, + enforce: true, + priority: 5, + }, + vendors: false, + defaultVendors: normalizedOptions.vendorChunk && { + name: 'vendor', + chunks: (chunk) => chunk.name === 'main', + enforce: true, + test: VENDORS_TEST, }, }, }, diff --git a/packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts b/packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts index 39bb44e..b8cbb28 100644 --- a/packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts +++ b/packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts @@ -97,6 +97,8 @@ export interface AngularRspackPluginOptions { outputHashing?: OutputHashing; stylePreprocessorOptions?: StylePreprocessorOptions; namedChunks?: boolean; + vendorChunk?: boolean; + commonChunk?: boolean; devServer?: DevServerOptions; extractLicenses?: boolean; } @@ -109,6 +111,8 @@ export interface NormalizedAngularRspackPluginOptions devServer: DevServerOptions & { port: number }; extractLicenses: boolean; namedChunks: boolean; + vendorChunk: boolean; + commonChunk: boolean; globalScripts: GlobalEntry[]; globalStyles: GlobalEntry[]; optimization: boolean | OptimizationOptions; diff --git a/packages/angular-rspack/src/lib/models/normalize-options.ts b/packages/angular-rspack/src/lib/models/normalize-options.ts index 3e92bb5..960d36a 100644 --- a/packages/angular-rspack/src/lib/models/normalize-options.ts +++ b/packages/angular-rspack/src/lib/models/normalize-options.ts @@ -222,6 +222,8 @@ export function normalizeOptions( skipTypeChecking: options.skipTypeChecking ?? false, useTsProjectReferences: options.useTsProjectReferences ?? false, namedChunks: options.namedChunks ?? false, + vendorChunk: options.vendorChunk ?? false, + commonChunk: options.commonChunk ?? true, devServer: normalizeDevServer(options.devServer), extractLicenses: options.extractLicenses ?? true, };