Angular-cli: main bundle size in MBs

[a5hik]

angular-cli: 1.0.0-beta.14 node: 6.2.1 os: darwin x64

I noticed that my app generates the main bundle in MBs .. here is my package.json dependencies entries.

"dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular2-material/button": "^2.0.0-alpha.8-1", "@angular2-material/button-toggle": "^2.0.0-alpha.8-1", "@angular2-material/card": "^2.0.0-alpha.8-1", "@angular2-material/checkbox": "^2.0.0-alpha.8-1", "@angular2-material/core": "^2.0.0-alpha.8-1", "@angular2-material/grid-list": "^2.0.0-alpha.8-1", "@angular2-material/icon": "^2.0.0-alpha.8-1", "@angular2-material/input": "^2.0.0-alpha.8-1", "@angular2-material/list": "^2.0.0-alpha.8-1", "@angular2-material/menu": "^2.0.0-alpha.8-1", "@angular2-material/progress-bar": "^2.0.0-alpha.8-1", "@angular2-material/progress-circle": "^2.0.0-alpha.8-1", "@angular2-material/radio": "^2.0.0-alpha.8-1", "@angular2-material/sidenav": "^2.0.0-alpha.8-1", "@angular2-material/slide-toggle": "^2.0.0-alpha.8-1", "@angular2-material/slider": "^2.0.0-alpha.8-1", "@angular2-material/tabs": "^2.0.0-alpha.8-1", "@angular2-material/toolbar": "^2.0.0-alpha.8-1", "@angular2-material/tooltip": "^2.0.0-alpha.8-1", "bootstrap": "^4.0.0-alpha.2", "c3": "^0.4.11", "clipboard": "^1.5.12", "core-js": "^2.4.1", "font-awesome": "^4.6.3", "hammerjs": "^2.0.8", "hover.css": "^2.0.2", "lodash": "^4.15.0", "ng2-accordion": "0.0.9", "ng2-bootstrap": "1.1.5", "ng2-file-upload": "^1.0.3", "ng2-slim-loading-bar": "^1.5.1", "randomcolor": "^0.4.4", "reflect-metadata": "0.1.3", "rxjs": "5.0.0-beta.12", "simplemde": "^1.11.2", "sortablejs": "^1.4.2", "ts-helpers": "^1.1.1", "zone.js": "^0.6.23" }

The main.bundle.js size is 2.5 MB in Prod mode and it was 6.7 MB in Dev mode. I feel its huge and any clues to reduce the size would be much appreciated.

[ng-darren]

Found out that the main.bundle.js is not minified. I run my own minification script and managed to reduce main.bundle.js from 3MB to 0.9MB.

I guess until the team add minification into ng build, you could just do it yourself for the time being.

[antonybudianto7]

did you run ng build -prod ?

[kylecordes]

Could this be a case of docs-could-be-better? The README says "...using the --prod flag in ng build --prod or ng serve --prod will also make use of uglifying and tree-shaking functionality", which is true and good. Maybe it should also use the more general word "minification" in addition to (or instead of) the specific "uglifying"? That way someone searching the docs for "minifi" would find it.

[a5hik]

The main.bundle.js is minified indeed in prod mode.
But still the minified version is 2.6 MB in size, looking for options to reduce it further.

I understand the AOT is still not supported in CLI, But what else I could do here to reduce the bundle size.

[a5hik]

@filipesilva Do you have any idea here?

[ghost]

Same story for me, the hello world is:
2.6 MB in dev.
815 kB in production.
186 kB when served via firebase (gzipp-ed) which still feels big.

Could someone enlighten us about why it's so big for an "empty" project ?

[elvirdolic]

And if you put some code in with some plugins like material the bundle size gets about 5mb in dev and 400kb gzipped. Looking forward for aot

[a5hik]

Found out that the WebPack Dev server is currently not serving the 'gzip' ed bundles. Thats the issue.

https://github.com/angular/angular-cli/issues/2028
https://github.com/angular/angular-cli/issues/2340

After adding the compress: true option the --prod mode gets served with gzip ed bundles.
And the size of the main bundle shows 208 B in the Browser.

[deebloo]

208 is the browser retrieving from cache. Gzipped for hello world is probably around 150kb

[a5hik]

@deebloo mine is not an hello world. would check the size.

[deebloo]

@a5hik I am just saying double check your bundle size. It isn't possible that the bundle is 208B.

[a5hik]

@deebloo Thanks!. sorry I didn't realise the K is missing from it.

Now it comes around 600KB of size, I can see that in the browser console. after clearing the Cache.

Still its a large size.

[cschroeter]

ng build --prod --aot

to the rescue

[a5hik]

Is this possible to do with beta.16?

[a5hik]

I had updated to beta.16

angular-cli: 1.0.0-beta.16 node: 6.2.1 os: darwin x64

And running ng build --prod --aot is causing me an other issue on compilation.

Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppThirdPartyModule in /src/app/app.thirdparty.module.ts, resolving symbol AppThirdPartyModule in /src/app/app.thirdparty.module.ts

@NgModule({ imports: [CommonModule, XXXXModule.forRoot()], declarations: [], exports: [ XXXXModule] })

I guess calling the XXXModule.forRoot() is causing the problem in module Imports.

[Delagen]

Seems to not support animation

Error encountered resolving symbol values statically. Calling function 'style', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol

 animations:  [
                   trigger("collapseAnimation", [
                       state("hidden", style({height: 0})),
                       state("visible", style({height: AUTO_STYLE})),
                       transition("* <=> *", animate("0.3s linear"))
                   ])
               ],

[filipesilva]

Sorry, but there isn't much I can do to help you on this issue. I don't see an actionable CLI problem here.

It's true that --aot helps with bundle size but it's not yet fully available as of beta.16.

[emaradevska]

Where did you add compress=true? @a5hik

[paqogomez]

@emaradevska, in webpack it looks something like this:

plugins: [
new webpack.optimize.AggressiveMergingPlugin(),
    new UglifyJsPlugin({
        sourceMap: false,
        uglifyOptions: {
            compress: {
                sequences: true,
                dead_code: true,
                conditionals: true,
                booleans: true,
                unused: true,
                if_return: true,
                join_vars: true,
                drop_console: true
            },
            mangle: {
                //except: ['$super', '$', 'exports', 'require']
            },
            output: {
                comments: false
            }
        }
})]

[angular-automatic-lock-bot[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._}