profile
viewpoint

Ask questionsadd option to disable concatenateModules when build

🚀 Feature request

Command (mark with an x)

  • [ ] new
  • [x] 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"
angular/angular-cli

Answer questions 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

useful!
source:https://uonfu.com/
answerer
Alan Agius alan-agius4 Malta Angular Team, Loves TypeScript, Build Tools, Food, Beer & Coffee 🇲🇹
Github User Rank List