For more information please refer to the latest documentation
The general rules to get optimal JS performance is:
Keep the number of static file downloads less to avoid network latency
Keep individual file size to be around the same else the largest file will delay the page load.
Since JS files will be cached by the browser pages accessed after the home page will need lot less file downloads. Hence it’s important to put more attention on home page downloads.
With the above rules in mind, here’s the process to tune the JS partitions for optimal performance:
Create new file called adf-js-partitions.xml file in WEB-INF and copy the xml from the documentation URL above.
Remove all the features from the core partition that start with Adf*
Note: Remember to redeploy the application and clear browser cache everytime you need to test the adf-js-partitions.xml file.
Now test the home page and note the JS files downloaded. We prefer using firebug.
In order to create partitions look at the individual JS files downloaded by your page. The files starting with ‘Adf’ don’t have partitions defined, while files eg dnd-126.96.36.199 are partitions. Remove (or comment) all those partitions as well.
To know the feature name open the JS file in firebug. The createComponentClass usually gives the feature name.
Create a new partition (say custom-webcenter). Using the technique above add all the downloaded features to the new partition.
Here’s an example for how our partition looks like. Yours will be different depending on the content of home page.
<partition> <partition-name>custom-webcenter</partition-name> <feature>AdfRichDialog</feature> <feature>AdfRichSubform</feature> <feature>AdfRichForm</feature> <feature>AdfRichPopup</feature> <feature>AdfInlineEditing</feature> <feature>AdfRichPanelSplitter</feature> <feature>AdfPageCustomizable</feature> <feature>AdfRichShowDetailFrame</feature> <feature>AdfRichPanelGridLayout</feature> <feature>AdfShowPopupBehavior</feature> <feature>AdfRichCommandLink</feature> <feature>AdfRichCommandButton</feature> <feature>AdfRichDocument</feature> <feature>AdfRichPanelWindow</feature> <feature>AdfDragAndDrop</feature> <feature>AdfRichPanelCustomizable</feature> <feature>AdfDialogServicePopupContainer</feature> </partition>
There is a dependency between AdfUIEditableValue and AdfRichOutputLabel, hence AdfRichOutputLabel should be in core partition even when output label is not used on page. Else it with throw a hard to debug error: <FeatureUtils> <_resolveFeatures> Ignoring feature-dependency on feature "AdfDvtCommon". No such feature exists.
Remember to remove the features which you added to custom from the existing partitions.
Re-run the application to see the difference in number of downloads and (more important) time to render.
Now repeat the process for next complex page. Remember that since home page has downloaded most of the JS files they will be cached by browser and this time there will be lot less features to partition together.
This technique combined with OHS practices of compression and caching will make pages download much faster.
Attached is a PartitionTesterApp containing adf-js-partition.xml file