gulp build generates extremely large .js file of nearly 1mb file size?

[RohitRane]

Description

Fountain webapp angular 2 with webpack / system js generates very large main.js/index.js file.
I used in combination with angular/router.

Using such a large file in production even before adding any substantial views and functionality causes loading speed to drop.

Copy the content from .yo-rc.json:

  "generator-fountain-angular2": {
    "version": "1.0.0-rc1",
    "props": {
      "framework": "angular2",
      "modules": "systemjs",
      "js": "typescript",
      "ci": [],
      "css": "scss",
      "resolved": "/home/kpatra/.local/install/node/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular2/generators/app/index.js",
      "namespace": "fountain-angular2",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "todoMVC",
      "router": "router"
    }
  }
}

[Swiip]

Did you measured the dist version (to be sure). The dev version is giant cause of doc and debug mode.

If yes, the only thing that we can do is to activate Tree Shaking but that's not that easy.

[RohitRane]

Yes. I am talking ( and concerned) only about the main-*.js file in the dist directory.
You said "If yes, the only thing that we can do is to activate Tree Shaking but that's not that easy."
How do I do this? Is it a webpack feature?
I am new to webpack. I would be grateful if you could nudge me in the right direction.

[micaelmbagira]

@RohitRane Do you have a huge number of code lines as well ?

[RohitRane]

@micaelmbagira , @Swiip : not really.. I explored further. Even the default "Working landing page" built using your generator create a build file (main.js) of size : 1 Mb

This is a snapshot of the steps I followed :
yo fountain-webapp

 _-----_     
|       |    ╭──────────────────────────╮
|--(o)--|    │    Welcome to Yeoman,    │

---------´ │ ladies and gentlemen! │ ( _´U_ ) ╰──────────────────────────╯
/A\ /
| ~ |
'..'_
´ |° ´ Y

Out of the box I include by default Gulp 4, ESLint, Browsersync and Karma.

? Which JavaScript framework do you want? Angular 2
? Which module management do you want? Webpack with NPM
? Which JS preprocessor do you want? TypeScript
? Which CSS preprocessor do you want? SASS
? Which Continuous Integration platform do you want? (Press to select, to toggle all, to inverse selection)
? Do you want a sample app? A working landing page
? Would you like a router? @angular/router

After generating an app this way. I did 'gulp build' and this is what I get on doing ls -ltr on the dist folder :
ls -ltr dist
total 1044
-rw-rw-r-- 1 kpatra kpatra 729 Dec 7 12:39 index.spec.js
drwxrwxr-x 3 kpatra kpatra 4096 Dec 7 12:43 app
-rw-rw-r-- 1 kpatra kpatra 1048468 Dec 7 12:44 main-e56cd8470847eb9280d0.js
-rw-rw-r-- 1 kpatra kpatra 1347 Dec 7 12:44 vendor-e56cd8470847eb9280d0.js
-rw-rw-r-- 1 kpatra kpatra 609 Dec 7 12:44 index.html
-rw-rw-r-- 1 kpatra kpatra 1847 Dec 7 12:44 index-e0b8835a8299a27aa837b1ae67b55321.css

As you can see without any of my own person code itself we have build of 1 mb. Any further views that I add to the SPA will only further bloat the application..

And this I got on choosing :
? Do you want a sample app? A working landing page

If I choose a TodoMVC app it gets even bigger.

I thought Angular 2 was suppose to be sleaker and lighter than Angular 1. At this rate.. It take

7428 milliseconds to render this page with a throttling of :
Regular $G( 20ms, 4.0 Mb/s,3.0 Mb/s) with Chrome dev tools.

Hope this info helps.

[RohitRane]

@micaelmbagira , @Swiip : Also note that the generate bundle main.js has the MIT license repeating 250 + times :

• @license
• Copyright Google Inc. All Rights Reserved.
• Use of this source code is governed by an MIT-style license that can be
• found in the LICENSE file at https://angular.io/license
  */

If you could limit the appearance of this license to once maybe you'll save a lot more space.

[micaelmbagira]

Hi @RohitRane currently we have the source code and the vendors in the main.js. If you analyze it with https://github.com/th0r/webpack-bundle-analyzer (for the Webpack version) you can see that 1Mb is quite "normal" because of Angular ang rxjs.
Regarding the comments, that's a bug indeed! This should fix it FountainJS/generator-fountain-webpack#66

[drapadubok]

I think I've got similar issue, and when I look at dist/index.js I see no minification/uglification etc. Is that expected?