diff --git a/e2e/fixtures/rspack-csr-css/rspack.config.js b/e2e/fixtures/rspack-csr-css/rspack.config.js index dd195e1..9fca205 100644 --- a/e2e/fixtures/rspack-csr-css/rspack.config.js +++ b/e2e/fixtures/rspack-csr-css/rspack.config.js @@ -29,6 +29,8 @@ module.exports = () => { options: { 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 504de7c..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', @@ -90,6 +102,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 +138,8 @@ export function normalizeOptions( const aot = options.aot ?? true; const advancedOptimizations = aot && normalizedOptimization; + validateChunkOptions(options); + return { ...DEFAULT_PLUGIN_ANGULAR_OPTIONS, ...restOptions, @@ -135,6 +150,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..faa946f 100644 --- a/packages/angular-rsbuild/src/lib/models/plugin-options.ts +++ b/packages/angular-rsbuild/src/lib/models/plugin-options.ts @@ -57,6 +57,9 @@ export interface PluginAngularOptions { hasServer: boolean; skipTypeChecking: boolean; useTsProjectReferences?: boolean; + namedChunks?: boolean; + commonChunk?: boolean; + vendorChunk?: boolean; stylePreprocessorOptions?: StylePreprocessorOptions; devServer?: DevServerOptions; } diff --git a/packages/angular-rspack/src/lib/config/create-config.ts b/packages/angular-rspack/src/lib/config/create-config.ts index 88aa835..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 @@ -157,48 +159,61 @@ 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: 'single', + splitChunks: { + chunks: 'async', + minChunks: 1, + minSize: 20000, + maxAsyncRequests: 30, + maxInitialRequests: 30, + cacheGroups: { + default: normalizedOptions.commonChunk && { + chunks: 'async', + minChunks: 2, + priority: 10, }, - format: { - comments: false, + common: normalizedOptions.commonChunk && { + name: 'common', + chunks: 'async', + minChunks: 2, + enforce: true, + priority: 5, + }, + vendors: false, + defaultVendors: normalizedOptions.vendorChunk && { + name: 'vendor', + chunks: (chunk) => chunk.name === 'main', + enforce: true, + test: VENDORS_TEST, }, }, - }), - ], - } - : { - 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 +303,61 @@ 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: false, + splitChunks: { + chunks: 'all', + minChunks: 1, + minSize: 20000, + maxAsyncRequests: 30, + maxInitialRequests: 30, + cacheGroups: { + default: normalizedOptions.commonChunk && { + chunks: 'async', + minChunks: 2, + priority: 10, }, - format: { - comments: false, + common: normalizedOptions.commonChunk && { + name: 'common', + chunks: 'async', + minChunks: 2, + enforce: true, + priority: 5, + }, + vendors: false, + defaultVendors: normalizedOptions.vendorChunk && { + name: 'vendor', + chunks: (chunk) => chunk.name === 'main', + enforce: true, + test: VENDORS_TEST, }, }, - }), - ], - } - : { - 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..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 @@ -96,6 +96,9 @@ export interface AngularRspackPluginOptions { optimization?: boolean | OptimizationOptions; outputHashing?: OutputHashing; stylePreprocessorOptions?: StylePreprocessorOptions; + namedChunks?: boolean; + vendorChunk?: boolean; + commonChunk?: boolean; devServer?: DevServerOptions; extractLicenses?: boolean; } @@ -107,6 +110,9 @@ export interface NormalizedAngularRspackPluginOptions index: NormalizedIndexElement | undefined; 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 4b35c3d..960d36a 100644 --- a/packages/angular-rspack/src/lib/models/normalize-options.ts +++ b/packages/angular-rspack/src/lib/models/normalize-options.ts @@ -221,6 +221,9 @@ export function normalizeOptions( hasServer: getHasServer({ server, ssr: normalizedSsr }), 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, };