Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

main bundle size in MBs #2281

Closed
a5hik opened this issue Sep 21, 2016 · 20 comments
Closed

main bundle size in MBs #2281

a5hik opened this issue Sep 21, 2016 · 20 comments

Comments

@a5hik
Copy link

a5hik commented Sep 21, 2016

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
Copy link

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
Copy link

did you run ng build -prod ?

@kylecordes
Copy link

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
Copy link
Author

a5hik commented Sep 24, 2016

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
Copy link
Author

a5hik commented Sep 26, 2016

@filipesilva Do you have any idea here?

@ghost
Copy link

ghost commented Sep 27, 2016

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
Copy link

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
Copy link
Author

a5hik commented Sep 28, 2016

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

#2028
#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
Copy link
Contributor

deebloo commented Sep 28, 2016

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

@a5hik
Copy link
Author

a5hik commented Sep 28, 2016

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

@deebloo
Copy link
Contributor

deebloo commented Sep 28, 2016

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

@a5hik
Copy link
Author

a5hik commented Sep 28, 2016

@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
Copy link

ng build --prod --aot

to the rescue

@a5hik
Copy link
Author

a5hik commented Sep 29, 2016

Is this possible to do with beta.16?

@a5hik
Copy link
Author

a5hik commented Sep 30, 2016

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
Copy link

Delagen commented Oct 3, 2016

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
Copy link
Contributor

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
Copy link

emaradevska commented Mar 2, 2017

Where did you add compress=true? @a5hik

@paqogomez
Copy link

paqogomez commented Jan 23, 2018

@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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests