Influencing the order of combined JavaScript files

RE: Influencing the order of combined JavaScript files

2019-04-17T14:32:24Z

Hi Andrew,

thanks for various approaches to share JS libraries, good to know.

In my case all those modules/portlets will end up on a single page, kind of dashboard. In this controlled environment I can afford the luxury to bring the tight dependency of my portlets (mostly charts) to a base one, which contains all required dependencies (moment.js, chart.js, chartjs-plugin-datalabels.js, in the correct order) and it is placed before the rest of components.

I've already implemented this for few portlets and it seems to be a viable option.

Thanks,

Jan

RE: Influencing the order of combined JavaScript files

2019-04-16T19:54:30Z

Hi Jan,

This looks similar to what you are asking/said --

https://community.liferay.com/blogs/-/blogs/sharing-js-across-modules

If you need it on all pages, but don't want to (or can't) include it in the theme you could use this trick. It's for an older version of Liferay but it still applies in 7+ -- I've used static portlets more than once in this new OSGI world

https://community.liferay.com/blogs/-/blogs/adding-a-javascript-to-every-page

Does any of this help?

As an aside, I know it seems odd (and broken) to have the resources loaded on every page but you have to consider the fact that in the portlet world it's no uncommon to encapsulate everything the portlet needs to work as part of the package right? Technically there is no way to know if two portlets that share a resource will be on the same page since technically speaking you should think of each portlet as it's own application. I understand what you want to do of course, and there are lots of people out there fighting to build SPAs on portals. I think the more common approach for what you are trying to do though is to have one (monolith) portlet on the page so that the resources are only loaded once and then use Angular, or VUE, or NPM or React or whatever to update the sections. So your individual portlets become the components of those JS framworks and you package the whole kits as a single portlet.

RE: Influencing the order of combined JavaScript files

2019-04-16T12:51:45Z

After various tests I can see some correlation between the order and Module/Portlet names.

The more serious thing is observation same libraries referenced from different modules are bundled multiple times. So I either need to keep all portlets in same module or to move javascript libraries into dedicated module/portlet, which needs to be placed to any page with the instance of my script-less portlet.

Influencing the order of combined JavaScript files

2019-04-15T16:14:39Z

There are multiple portlets on a single page, all of them have some com.liferay.portlet.header-portlet-javascript entries, which are combined together into a single bundle.
However, in my case the order matters. Unfortunately, the portlet placement is not taken into an account, so some libs from second portlet are bundled before the first portlet which breaks some functionality.

Is there any solution for this?

My only (crazy) idea is to create dummy potlet cummulating all libs used on that page and remove javascript references from other portlets.