1

Angular 2 is really wonderful in many ways, but A BIG problem is: It's tooo slow when you open an Angular 2 page for the first time.

Here is an example: (in Chinese) https://771dian.com/danmu

2015-09-23 11-10-03

This simple page includes nearly 20 angular2 components, each one with a .js file and a html template.

Which means, when somebody open this simple page, server need to send more then 40 files to client, including angular.js, system.js and traceur-runtime.js.

That's really too many files even with SPDY or HTTP/2.

The example site above is using SPDY, but I still need to wait for a long time before chrome shows anything. (By the way, for the server side, I'm using node.js with KOA web framework, which should be fast.)

And think about an index page for a CMS, it's gonna be more than 50 components for a single page, which means when you open that page, server need to send more than 100 files to client.

Is there a solution for this "too many files problem"? Thanks.

butaixianran
  • 301
  • 1
  • 2
  • 6
  • cannot assure nothing, but try to use a compressed version of angular2: http://imgur.com/WtOMAYe – Sombriks Sep 23 '15 at 03:32
  • I would start by moving all of your javascript script tags to the bottom instead of in the head. http://stackoverflow.com/questions/5329807/benefits-of-loading-js-at-the-bottom-as-opposed-to-the-top-of-the-document – BenH Sep 23 '15 at 07:03
  • thanks guys, using angular2.min.js will be helpful a little, but it's not the final solution for "too many files" problem. I asked the same question at Angular2's issue list, and get 2 good solution for that – butaixianran Sep 24 '15 at 11:37
  • concat them into one file and minify?? – Ilia Choly Aug 03 '16 at 14:48

1 Answers1

1

I asked the same question at Angular2's issue list. And I got some good solution for this "too many files" problem.

  1. using this tool: gulp-inline-ng2-template

https://github.com/ludohenin/gulp-inline-ng2-template

  1. pkozlowski-opensource metioned that tbosch is working hard to make it possible to pre-compile all the templates as part of the build step, which will be helpful.

https://github.com/angular/angular/issues/4328

Again, thanks guys

butaixianran
  • 301
  • 1
  • 2
  • 6