More lightweight Primefaces

[jacekzwroclawia]

Description

Actually Primefaces JS files (components.js, jquery-plugin.js) are bigger and bigger along with following releases. In our company we use only few primefaces components, and we want our front to be as fast as possible - yes I know that in that case Primefaces is not the best option, but still we want to stay with it because of many reasons.

Describe the solution you would like

Maybe it will be possible to choose widgets we can enable or disable in settings and then on the front side only needed JS code will be loaded in both components.js and jquery-plugin.js.

Additional context

No response

[tandraschko]

currently this is completely by design and in the past even more JS were aggregated to one big files instead of multiple smaller files.
the biggest files are jquery-plugins and component.js and we are working on it to remove as many as possible from jquery ui in all releases

we can remove some not common components from components.js and we can also create issues for deprecate/remove/rewrite single components which uses jquery plugins

[tandraschko]

i think we could split up components.css/js in some files:

• core.js
  already exists; move growl, message, messages
• data.js
  datatable, datagrid, treetable, tree and so on
• containers.js
  tabview, wizard, panel, dialog, sidebars
• menu.js
  all menus
• forms.js
  all inputs, picklist, orderlist, autocomplete, chips, spinner
• misc.js
  splitter, notificationbar, chip, resizable, spotlight, blockui, sticky, tagcloud, progressbar ...

[melloware]

i like this idea a lot!

[stolp]

I really do not think that this would be worth the effort, both for the maintainers and the consumers.

From a short glimpse we would probably omit at most one of these files per page. So we would probably just skip using dedicated JavaScript files. It is also cumbersome to maintain this per page.

The ideal solution IMHO would be, that the server side is dynamically generating a per-page js/css file according to components referenced on a page. I have my doubts that this would be feasible.

[tandraschko]

yeah
its unlikely that you only use components from 2 of 6 jS files

but -1 for the dynamic approach, at least in PF; this is better placed in OmniFaces or JSF impls

[melloware]

The only other option is to do it like PFE does it where each component generates its own JS file like "creditcard.js" and then it makes it per page dynamic of just what components you are using the page.

It makes it way more network requests if you have a lot of components but I use OmniFaces CombinedResourceHandler anyway to pack everything on my page to 1 JS file. This is more like the modern idea of Tree Shaking in modern JS frameworks: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking

[tandraschko]

i dont think that the 1:1 component/js is a good way
that makes it "unusable" without CombinedResourceHandler

therefor either leave it as it is or split it up a bit more

also the even the 1400kb components.js is just ~480kb with gzip

maybe even splitting up components.js into 2 files much better
some thing like components-common.js and components-uncommon.js

[melloware]

Agreed I was just throwing it out there.

Even when I compare the GZIPPED stuff from one my production PrimeFaces JSF apps it scores high only Google Lighthouse with all our optimization tricks.

So to me we could gain a little bit by breaking it up but @jacekzwroclawia your better bet might be to try my Optimization Guide: https://github.com/melloware/wildfly-faces#optimizations

[jacekzwroclawia]

Thank you guys for fast brainstorm about the topic.

I wrote this post because I saw that in PF10 jquery-plugin.js was 256KB, and in PF11 it is 354KB. My concern was that if there will be more and more components in PF in the future, jquery-plugin.js and components.js are going to be bigger and bigger. I always like that jQuery UI has this option to create custom package contains only widgets that you actually need: https://jqueryui.com/download/

Thank you, @melloware for some seo optimization use cases, could you also put your Google Lighthouse scores for mobile with PF? I wonder how good performance could you got with PF on mobile what is important in actual SEO world.

[melloware]

Mobile Score:

[melloware]

@jacekzwroclawia we switched to a new Optimizer plugin for PF 12.0.0 and I just tweaked it so jquery-plugins actually went from 354KB down to 319KB in 12.0.0

[stolp]

@tandraschko wrote:

maybe even splitting up components.js into 2 files much better some thing like components-common.js and components-uncommon.js

I like this. To spin the idea further, maybe separating the deprecated components in a release could make sense? Yet I am not sure how much this will gain though.

[jacekzwroclawia]

In components.js there are 84 widgets, do you know how many of them are deprecated?

[melloware]

I will take a shot at this tomorrow splitting between two sets of components JS. There are only a couple of deprecated and the largest one is jqury charts which is already in its own Js file.

[jacekzwroclawia]

Additionally, it is quite easy to choose desired widgets from jquery ui (https://jqueryui.com/download/) - maybe we don't need that much jQuery UI widgets in Primefaces? In PF10 we included 36 jQuery UI (1.12) widgets, and in PF11 we include 47 jQuery UI (1.13) widgets.

PF10 - 35 jQuery UI Widgets

/*! jQuery UI - v1.12.1 - 2017-08-09
* http://jqueryui.com
* Includes: widget.js, position.js, data.js, disable-selection.js, focusable.js, form-reset-mixin.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/draggable.js, widgets/droppable.js, widgets/resizable.js, widgets/selectable.js, widgets/sortable.js, widgets/datepicker.js, widgets/mouse.js, widgets/slider.js, effect.js, effects/effect-blind.js, effects/effect-bounce.js, effects/effect-clip.js, effects/effect-drop.js, effects/effect-explode.js, effects/effect-fade.js, effects/effect-fold.js, effects/effect-highlight.js, effects/effect-puff.js, effects/effect-pulsate.js, effects/effect-scale.js, effects/effect-shake.js, effects/effect-size.js, effects/effect-slide.js, effects/effect-transfer.js
* Copyright jQuery Foundation and other contributors; Licensed MIT */ 

PF11 - 47 jQuery UI widgets

/*! jQuery UI - v1.13.0 - 2021-09-05
* http://jqueryui.com
* Includes: widget.js, position.js, data.js, disable-selection.js, focusable.js, form-reset-mixin.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/draggable.js, widgets/droppable.js, widgets/resizable.js, widgets/selectable.js, widgets/sortable.js, widgets/accordion.js, widgets/autocomplete.js, widgets/button.js, widgets/checkboxradio.js, widgets/controlgroup.js, widgets/datepicker.js, widgets/dialog.js, widgets/menu.js, widgets/mouse.js, widgets/progressbar.js, widgets/selectmenu.js, widgets/slider.js, widgets/spinner.js, widgets/tabs.js, widgets/tooltip.js, effect.js, effects/effect-blind.js, effects/effect-bounce.js, effects/effect-clip.js, effects/effect-drop.js, effects/effect-explode.js, effects/effect-fade.js, effects/effect-fold.js, effects/effect-highlight.js, effects/effect-puff.js, effects/effect-pulsate.js, effects/effect-scale.js, effects/effect-shake.js, effects/effect-size.js, effects/effect-slide.js, effects/effect-transfer.js
* Copyright jQuery Foundation and other contributors; Licensed MIT */

[tandraschko]

@stolp about deprecated components: we should just move them into a seperate file for each component
for calendar this would be our widget, the jquery plugin and our jquery plugin hacks -> calendar.js

and this i would do for all depracted first, then we can go further and check if it makes a huge difference in splitting up components.js into common/uncommon

UPDATE: calendar e.g. removes ~100kb from jquery plugins

[melloware]

Ok I will do this today @tandraschko

@jacekzwroclawia yes I just grabbed all jquery widgets when upgrading. I will see if I can make it match 10.0.

[melloware]

By changing the following things was able to significantly reduce the size of the 2 major JS files

• Jquery Plugins only download the 35 necessary widgets
• Calendar now contains all the hacks and Jquery DatePicker/TimePicker in its own JS file
• Lightbox moved to its own JS file since it is deprecated
• Datatable moved to its own JS since its the largest component at 200KB

Version	jQuery Plugins	Core	Components
10	262 KB	55 KB	477 KB
11	363 KB	90 KB	500 KB
12	146 KB	88 KB	396 KB

[melloware]

Updated for PF 14

Version	jQuery Plugins	Core	Components
10	262 KB	55 KB	477 KB
11	363 KB	90 KB	500 KB
12	146 KB	88 KB	396 KB
13	147 KB	59 KB	500 KB
14	147 KB	66 KB	518 KB