Angular2应用-删除渲染阻止JavaScript

Question

I have an angular2 firebase app.

I've noticed that when live it task 4 seconds to get 12 JavaScript libraries that I store locally in my prod build and then it shows the app.

I need to get this 4 second delay down to 2 seconds.

When I watch the sources in the console in chrome it just pauses for 4 seconds then loads. It seems to be render blocking JavaScript the correct term?

Things I've tried:

• HTML5 async and defer on the 12 JavaScript libraries.
• I tried combining the libraries into the same file but that gave me loads of errors.
• My CSS is fine and all minified.
• All the js 12 files are minified.
• The 12 JavaScript libraries are all stored locally and not requested from other servers.
• I have images on my website and they are all optimized and compressed and placed on a CDN.
  • I use cloudflare and all the performance toggles are on.
  • I host with Firebase.
  • The JavaScript files are below the and not in the header.

My PageSpeed Insights scoress from google: (Resource: https://developers.google.com/speed/pagespeed/insights/ )

• 61/100 for mobile.
• 83/100 for desktop.

I can't use webpack.

I just want an easy method for showing the user interface and then load the libraries.

Let me know if you have any further questions.

Answer 1

Angular 2 generates your user interface, so what you are asking seems impossible at first. But you are in luck: the angular 2 team is working on something to help you out. It is actually already ready to use, but i don't think you can use it in combination with Firebase hosting. Take a look at https://universal.angular.io/ . It allows you to render the initial view on the server side.