Why my Polymer2 build size is large as compared to Angular5 build?

I created two demo projects one for angular5 and second for polymer2.

For angular5 I run

npm new angular5-demo --service-worker --routing

and for polymer2

polymer init

Press the down arrow until polymer-2-starter-kit is highlighted and press the enter / return key to select.

and when i'm running projects by

ng serve --prod and polymer serve --open

and it's showing almost double size of polymer project as compared to angular

transfered data:

angular : 120-140kb

polymer : 240-250kb

rencenty i went though a many blogs for polymer and they are claiming that polymer build size is 4-5 times less as compared to angular

one blog link is mentioned here

So, is there something i'm missing to build for prod in polymer project from polymer site.

please help me to find out the issue.



polymer build

serve -g /build/es6-bundle

transferred data : 56.3KB

bundle size of zip file : 204KB


npm start --prod

transferred data : 64KB

bundle size of zip file : 67KB

1 answer

  • answered 2018-04-17 05:48 tony19

    It doesn't look like you're doing a fair comparison because:

    • The ng serve --prod command builds the production version of the code, including minification. The polymer serve --open command serves the raw unminified version of the project (no build done at all here). For polymer-cli to serve the build output directory, that directory must be specified as an argument.

    • You labeled the comparison "transferred data", so I'm assuming you compared the total bytes downloaded for the entire app and not specifically just the framework/library source (and you confirmed this in a comment). Unless you built an Angular clone of polymer-2-starter-kit, the size comparison will be skewed because they're two completely different apps.

    • The article you linked is comparing the size of Angular and Polymer themselves; not the apps created. Also note the versions are different from what you're testing, so the size difference may no longer be accurate. Here's a screenshot from the article/blog:

      screenshot from article

    The production build of polymer-2-starter-kit (generated from polymer build command) can be found in build/es6-bundled/. To serve that build output, run polymer serve build/es6-bundled. You'll notice the first view of the production build is 56KB transferred on Chrome and 387KB on Firefox (because the needed Web Components polyfills are loaded in the latter case).