Lazy loading WebForm and split JS

Hello,
I'm writing a SPA with TMS Web.
Currently I am dynamically instantiating my TWebForm in HTMLDivs. Is it possible to load my TWebForm units dynamically so that the main JS file does not grow too large, a bit like the code splitting that can be seen when doing Javascript and Vue for example.
The ideal is to load the JS corresponding to my TWebForm unit at the time of instantiation :)
If this is not possible (what I think actually), is it in your projects?
Thank you!

First of all, there is the project option "Single JS file" that is default true
Set it to false, and each unit, i.e. also form units, will be separate.

Another approach could be to split your project in different separate projects each holding a number of form files and launch a different app from a main app when these forms are needed.

Hello Bruno,

Thank you for your response :slight_smile:

I thought about to split with several projects with common units but I don't like this solution because it must be correctly managed and add a layer of complications and it's not very clean in my opinion.

About JS Splitting I didn't know this option, I tried with the smile.
But I was disappointed because All JS are loaded at the same time at the beginning when loading page, not as needed. I understand this because my main unit references all secondary units in the uses section -> It's even worse than having just one JS file.

Is this improvement project possible?

  • specify if a unit is lazyloading (in the unit with a directive, for example)
  • if so, only load its interface in the main JS
  • if the implementation is requested during execution, then the JS implementation is loaded/injected and execution continues.
  • alternative could be to load implementation manually (because we know where in the source we need to use a secondary unit)
    This would allow for a true SPA with a main JS that grows very little (only the interfaces are integrated), and the "JS implementations" are loaded gradually.

Have a good day

Serge

At this moment, there is not a built-in option to do this automatically.
We'll need first to technically investigate the feasibility of this approach.
We've added it on our todolist to research this.

Thank you for adding this point :slight_smile:
I think this would be very useful for large projects.

Another alternative could be a decorator like "[RealTimeInjectUses]MyAnotherUnit.AFunction()", without integrating the interface into the main JS, but the compiler still has to check for the existence of this function. And I know that dependencies also have to be managed, which is not easy.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.