2

Sitecore auto created modules

To get a better understanding of the JSS library I ran the bundle analyzer on the Angular Sample project and I'm getting 169 modules on my main bundle. Does anybody knows where those 169 modules are coming from?

The total bundle size of my sample project looks like this:

bundle.js (polyfills) 59.7 kB 
main.bundle.js (main) 302 kB 
styles.bundle.css (styles) 51.6 kB
inline.bundle.js (inline) 796 bytes

Is that normal for a startup project using JSS, even after using the --prod flags?

Improve this question
4
  • 4
    I'm voting to close this question as off-topic because this is purely about Angular, not about Sitecore. – Jarmo Jarvi May 1 '18 at 18:35
  • I was wondering the same...the out-of-the box Angular + JSS production build is roughly TWICE the size as a hello world angular production build...and the bloat seems to be in main.ts with 169 modules, where the hello world main.ts only has ~20. – Cory May 1 '18 at 19:20
  • @JarmoJarvi I'm just wondering if there is a bug in the @sitecore-jss/sitecore-jss-angular library that is generating 149 extra modules, causing the main bundle to double in size. – user1807334 May 1 '18 at 19:45
  • Sounds like you are using the ModuleConcatenationPlugin, try commenting it out. – Alex Smagin May 2 '18 at 14:20
4

I've done some research and testing into this and it appears to be normal. The webpack-bundle-analyzer has issues with the ModuleConcatenationPlugin, as Alex Smagin pointed out (GitHub issue - note that angular-cli is not using Webpack 4)

To test, I hacked angular-cli's webpack config locally to remove the ModuleConcatenationPlugin. The bundle analyzer picture looks drastically different with concatenation off:

no-concat bundle analysis

Without the concatenation there is no huge-looking main.ts, because the system stuff being lumped into that is no longer there.

The bundle size with module concatenation off is about 50k larger than with it on, so the optimization is definitely doing something.

Note: I analyzed the Angular Advanced app.

Angular definitely is a pretty hefty library.

Methodology:

Angular config hacked: advanced-sample-angular\node_modules\@angular\cli\models\webpack-configs\production.js

Command to build (modified jss build:client-bundle): cross-env-shell ng build --target=production --environment=prod --base-href / --deploy-url $npm_package_config_sitecoreDistPath/browser --output-path=$npm_package_config_buildArtifactsPath/browser --prod --stats-json

Improve this answer
0

With Angular 8 if you set "optimization": false in angular.json, it will not concatenate. However, the bundle size will be substantially higher

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.