I have a number of modules that I want to lazy load on to a single page. They may load into any one of several pages in different configurations. They may be pretty heavy, so I don't want them to all load initially. Router wouldn't be appropriate for this situation. How do I lazily load them manually without router?
Related
I am looking for a way to speed up my website by loading content that is not required to display the main DOM afterwards.
My webpage is loading 2.8MB of ressources where 879kB are actually transferred. (gzip)
I am aware of the possibility of loading only the required components, but if I do so, I'll have the same problem after a user clicks any link to another component.
Basically what I want to do is loading my main component and displaying the DOM immediately.
After DOM is loaded, I want to load the other components as usual.
Is there a NPM package that does this?
If not, how can I realise my desire?
Use lazy loading modules to load them only if needed. It will greatly decrease bundle size:
https://angular.io/guide/lazy-loading-ngmodules
Application should be split to separate modules and routing is modified not to load them eagerly
What you are describing sounds like server side rendering. You should check out Angular Universal.
https://angular.io/guide/universal
I'm trying to implement separate layouts for guest home page and admin page in an Angular 6 application.
The thing is, I have two different templates, each with their js and css files.
I found a way to use styles on a component level, but for the scripts, I cannot find any way instead of having some method that will load all the scripts where I need them and when I need them.
It's like, my guest home page uses totally different set of css styles and script files than my admin page. I know I should probably split my app into modules and then lazy load my modules, but I don't get it how I can make it to use different styles and scripts based on the page I'm currently visiting, or route. For now, i put my styles into a component that is my guest home page component, and I can do the same for admin and then separate them using parent and child routes, but how can i achieve the same for scripts and styles, without having loading them on the component level. Thank you.
i'll answer here and say that i've solved it by using separated service for loading scripts and will just inject the service in the component where i need it and provide id with an array of scripts that I need to have on that page.
For example, if I have 3 routes in the routes.js file compared to that of 10 routes in the same file. Will the file containing 10 routes take longer time to load? Supposing every route import the same size of the component. Or the component will be imported after we've enter the route?
The first page load might be slightly longer than usual (still probably not even noticeable in most cases), but after that, the page will be entirely cached, resulting in super fast load times, since the browser will remember everything.
If you bundle your app (e.g. with webpack) and you are not lazy-loading your components, then the components itself won't add up to your load time. But probably on your performance.
But when all of your - let's say - 10 components load resources over a RESTful API, then of course your components will indeed add up to your load time.
This could be prevented by using GraphQL + Relay though.
I have doubts on how to create a login page for the template BlurAdmin.
The Template has the index.html as masterpage. It has header, footer, sidebar, ... and the pages are loaded as template (ui-view).
But I would like to use login page the independent of index.html, I think the best way to create it using another ngApp, different from index.html, but how should I do? I looked much about, but the login.html is always loaded as a template (ui-view).
If you want to divide your application into few steps, it could be useful. So you can create separate index.html file which will include all html from logins template. Of course, you can also add another angular to this separate page to handle logic, but keep in mind how much logic you will need to add to this page, maybe it will be easier to use something with less weight for the login page.
Anyway, as a result, you should have the second separate application with included scripts and styles as it already implemented in the main application. So the answer to your question - you should handle building process for the second application which will be you login SPA, and you will have two single page applications with different scripts in each, they can use different angular versions or even different Frameworks.
I have an application with multiple Backbone models / views. I'm running into an issue where the application tries to load all of the scripts on every page, however I only need them to load on specific pages.
What is the correct way to address this? Should I use a router?
First you have to organize your application code into small modules (require.js). Here is a brief introduction Organize your backbone application using modules. Load only modules that are required in current page. For details about requirejs requirejs.
You can use routers in combination to decide which modules of your application to load.