Develop Reference

Is it inefficient to import all my web components with individual <script> tags?

I'm making a site using Express + EJS. I need the site to be server side rendered so I'm using web components without shadow dom. I use a separate EJS view per page type (e.g. home, post, page).
If I'm loading the post.ejs view when I visit example.com/post/my-post, I need to import the web component classes to register my web components on the page, for example if my HTML has:
<navbar-element>, <big-button>, and <clock-element>
how bad is it to put
<script src="/javascript/components/navbar-element.js" defer></script>
<script src="/javascript/components/big-button.js" defer></script>
<script src="/javascript/components/clock-element.js" defer></script>
in my head? I'm concerned because in the event that I have, say, 50 components on a single page, that's 50 additional HTTP requests to download all those scripts. Right now the performance is better than using javascript modules, but I'm not sure if a page with a lot of components making many HTTP requests to download all those scripts is bad. If there are faster yet still simple alternatives, I'd love to hear them. Thanks!

It all depends on the number of components and their size. Even 50 components is not a big problem for a modern browser, which is very efficient in loading static assets in parallels. The difference almost always will be negligible if you do not have a heavy Single Page application.
However, if you MEASURED your performance in 50 separate files vs putting it all in one file, and decided that it is indeed a problem, you can use tools like Webpack to package all of your JS files into one automatically, while keeping the source files as separate files.
However, it is yet another dependency for your project, and introducing another step in your development process, so called BUILD, and you need to think hard on whether it is worth it in your case.

Load Angular data after DOM

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

Do async components speed up load time?

I am using Vue and Webpack in a large project and I am looking to optimize the loading of some components. I am already lazy loading my pages but I wonder if I can take a step further and dynamically load subcomponents inside those pages.
I want to load a subcomponent ("my-modal" in the exemple below) after the main component (the page) is rendered (to speed up the load time of the page). This sub-component is relatively heavy and means to be frequently open, but is hidden by default (its a modal). So my strategy is to load it right after the page is loaded but not with the page, so the page can load faster.
I came across vue's Async Components but I am not sure if it can help, does-it ?
Here is an exemple of what I was doing with an old school "static" import :
// page.vue
<script>
import myModal from "#/components/my-modal";
export default {
components: {
myModal,
},
}
</script>
Here is an exemple of how I am dynamically importing my sub-component (aka "async components") :
// page.vue
<script>
export default {
components: {
myModal: () => import("#/components/my-modal"),
},
}
</script>
I am registering my component locally (local registration), but I am not sure if its the best way, maybe its another question...

Importing dynamically will generate a new file, and this new file will only be downloaded when the user goes to that specific page, not when the user goes to /.
That increases load speed and decreases the bytes that the user has to download at the moment one access your site.

For all intents and purposes...probably not.
With today's modern devices, browsers, and Internet access, that component would have to be pretty significant in order to provide a speedup overall to page load. If it's just markup and code, I'd have a hard time believing that one component would even come close to approaching say, 700Kb in size (especially if minified and compressed). In all but the worst Internet connectivity, the browser is going to handle this with no problem at all, especially if the component is include in the main bundle for the site.
However, if your component does some heavy computational work upon arrival, then maybe there would be a speedup to loading it async (as the browser can "get on with" loading the page while waiting for the modal to arrive).
However however, most browsers only allow a number of XHR requests running to a single domain at a time (I think Chrome is 4 by default). Lazy loading a file would mean the requests made by the page itself take priority, but having more files to load over multiple requests rather than lumped into one may be overall slower.
However however however, browsers are excellent at caching these requests, so subsequent visits to your site probably wouldn't have this problem to consider.
Lazy loading modules really provides a speedup when you are able to lazy load entire sections of your site only when the user needs to access them, like on routes.
The final however, though, is that it's good practice to not burden browsers and mobile devices with needless bloat, and while lazy loading that module may not have a noticeable speed difference, it may overall be a decent idea depending on your needs and when you load it. If a visitor never needs to view the modal, and you load the modal when it's needed...there's a lot to consider, as that may cause a delayed UI but be better for an overall greater percent of your users.
If you're trying to make your site more accessible to those with poor Internet, and you know the modal will be used frequently, it'd be probably better to load it with the page because it's part of page functionality.

Advantage of using lazyload?

So i stumble on this component called lazyload.
What does it do and advantage and disadvantage of using it ??
Just curious about it because i watch some of john papa's videos and he keep mentioning it.

They idea of lazy load is that you only load something when you need it.
For example: at startup of your application you might not need a library to validate your form fields. (you only need it when someone actualy fills in a form and submits it).
Lazy loading makes sure its only loaded when needed.
The Plus:
Reduced start/load times & size.
Packages/data that are not used by the current user, will not be loaded.
Minus:
You have to have more seperate packages you can't minify and bundle them together.
More request to the server (because you can't bundle them).
could have a load on first use experience, the first time user does something the application needs to load some extra stuff.
conclusion & advice
So consider the size and the lifecycle of your application. If the application is small and you package all in one. probably the simplest approach would be to package everything in one. it's a bit of a longer load time, but after that the javascript gets cached in the browser anyways so it doesn't matter after first load.
Reasons you want to lazy load:
You want to be able to update seperate parts of the applications (thus not bundle it)
Application becoming problematically big. you want to cut it up in smaller parts.
You don't bundle your javascript files (great example here before angular was requirejs).
You have a lot of different types of users using the system each with completely different set of scripts.
Every page uses completely different set of javascript. (not likely when you use angular)

How to load a module in Angular 2+ dynamically without router?

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?