add option to disable concatenateModules when build

[mix5003]

🚀 Feature request

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Description

my project build is too slow (in my computer it may 300 - 400s, but in bit bucket pipeline it may took 15 minute), so i try to find way to speed up.

i found that most of time use in ModuleConcatenationPlugin. so i just curious if i disable ModuleConcatenationPlugin can improve build speed up. so i edit node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js and add concatenateModules: false, to optimization section.

this is my test result when build 3 times. it improve speed around 30-50%. and it has same number of chunk (at least total *.js is equals

ModuleConcatenationPlugin	total *.js	time 1	time 2	time 3	Avg (ms)
enable	153	326157	304320	329917	320131.3
disable	153	214214	137226	129218	160219.3

and this is when i build on Google Cloud Build (because it slower than my PC) .as you can see it reduce time from 13 min to around 7 min.

ModuleConcatenationPlugin	time 1	time 2	time 3	Avg (ms)
enable	789887	770099	690083	750023
disable	434142	308942	307106	350063.3

downside of disable ModuleConcatenationPlugin it may increase bundle size. this is my project size. (from du -bcs )

Category	enable	disable	diff (bytes)
*.js	27342921	27547828	204907
*es5*.js	14036712	14139111	102399
*es2015*.js	13272068	13374576	102508

i am not sure but i think angular should not need ModuleConcatenationPlugin since angular handle chunk by lazy route module. i am not sure angular can get benefit from ModuleConcatenationPlugin? or may be i just misunderstand something?

Describe the solution you'd like

it would be nice if add option to disable concatenateModules in angular.json or build command

Describe alternatives you've considered

just run this command before build to disable concatenateModules

sed -i "s/noEmitOnErrors: true,$/noEmitOnErrors: true,concatenateModules: false,/" "node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js"

[poddarkhushbu07]

Curiosity about concatenateModules brought me here.
What is the use of concatenateModules in Angular?
And what are the positive and negative effect on my build and permformance of I disable concatenateModules

[alan-agius4]

Hi all,

concatenateModules is used for scope hoisting, which results in 2 things, smaller bundle sizes and faster code execution in the browser.

If really want to disable concatenateModules which is not recommended you can use ngx-build-plus.

From a CLI point of view, exposing a way to disable concatenateModules is out of scope, because we wouldn't like users to opt-out from key runtime performance and bundle size optimisations.

You can read more about this here: https://webpack.js.org/plugins/module-concatenation-plugin

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}