Need a solution to speed up Angular2!!

[butaixianran]

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

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.

[mgechev]

@butaixianran you can inline the component templates (for example you can try this gulp task by @ludohenin) and after that create a single bundle with all your scripts files.

This will reduce the number of requests dramatically.

[PatrickJS]

can you provide a github repo? perhaps a clone showing similar problems in case you can't share the current codebase. There are many ways to optimize initial loads include one method that is yet to be released

[devmark]

just minify js or html.

[S-YOU]

your server is just slow, it took 10s to download angular2.dev.js. (non-minified, no gzip)

while google cdn can serve it around 100ms for angular 1x (non-minified, with gzip)

what you can do is concat, minify, gzip etc as other said.

[pkozlowski-opensource]

@butaixianran I think that people in this thread have identified a number of optimizations that you can make today. At the same time @tbosch is working hard on the compiler changes that will make it possible to pre-compile all the templates as part of the build step. This means that you will be able to compile templates off-line and combine / minify resulting JS output.

But yeh, for now you need to bundle your files and make sure that your server performs reasonably.

Closing for now as the further startup optimizations are being worked on.

[butaixianran]

@pkozlowski-opensource , that's great news. And thanks guys. My target is Chinese people, my server is in China for now, so your visiting should be slow. For now, I may try gulp-inline-ng2-template, looks like just what I need

[butaixianran]

Update: after moving angular2.js, system.js, traceur-runtime and rx.js to cdn, now it's pretty fast. Http2 works very well with Angular2.

[ghost]

This is not an Angular issue it's a build issue with the same solutions as any other client-side framework. Putting 20 components on your landing page, on the other hand, is poor design. Nevertheless, use the template cache as suggested. Along with basic minification and bundling, and test as you go (rather than discovering your completed project takes too long to load in production).

[ps2goat]

@pkozlowski-opensource do you have a link to an issue regarding the template pre-compilation so we can track this?

[alzalabany]

@S-YOU did you notice you are comparing angular2.dev (3.1MB) to angular1 (2.5k) ?

angular2 is fat. and it will take time to load. try ionic2 which is based on angular2, empty project is nearly 7mb !

+1 for we need a solution to compress/ pick remove unused components from build

[CaptainCodeman]

If you are deploying and comparing dev versions then you are doing it wrong.

There are lots of tools to bundle an Angular 2 app and reduce the number of requests and the payload size. Don't assume that what you load while developing has to be the same thing that loads when deployed - you normally run through a bundling and optimization process.

As an example, here's a simple page that loads Angular 2 in a couple of hundred Kb and also uses versioned assets so they can be given long cache times (to speed up repeat visits, moved cached assets closer to users etc...), all packaged using webpack:
http://captain-codeman.appspot.com/

[S-YOU]

@alzalabany, see screen shots correctly, before doing stupid assumptions.

angular2 was 1.1M, and angular1 is 1M (after gzip its 253K), in my screenshots.

[donew]

@CaptainCodeman Can you please give an example of much complex project. With complex routing and view manipulation.

[CaptainCodeman]

Sorry, I did have a more complex project but I've since given up on Angular 2 and don't use it anymore.

There are simpler and better frameworks that don't require so much work and provide a much nicer dev + runtime experience (esp. without all the headaches of recent WebPack breaking changes).

I can strongly recommend looking at Polymer.

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