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
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
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.
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
It doesn't look like you're doing a fair comparison because:
ng serve --prodcommand builds the production version of the code, including minification. The
polymer serve --opencommand serves the raw unminified version of the project (no build done at all here). For
polymer-clito 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:
The production build of
polymer buildcommand) 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).