Preload Variant for Bootstrapping

The preload variant for bootstrapping (library-preload.js) is used if you want to load all JavaScript modules of a library in advance with one single request for performance reasons. It provides the auto, sync and async parameters for synchronous or asynchronous loading of the modules.

Caution

An application must not reference this file. If the configuration option is set to preload, SAPUI5 automatically loads the file.

OpenUI5 runtime executes the code only if the application requires the module. Thus, the preload variant significantly reduces the number of roundtrips. To activate the preload variant, set the preload configuration parameter with one of the following values:

async (recommended)

If you set the preload configuration option to async, the runtime loads the modules for all declared libraries asynchronously. Thus, any code that follows the OpenUI5 bootstrap tag can not be sure that the OpenUI5 classes are available already. Therefore, the application must delay the access to the OpenUI5 APIs by using the Core.attachInitEvent method. OpenUI5 supports the async mode only for libraries that are loaded by the OpenUI5 core. Libraries that are loaded dynamically by using the sap.ui.getCore().loadLibrary() API will be preloaded with preload=sync.
sync

If you set the preload configuration parameter to sync, the runtime loads the modules for all declared libraries synchronously. After processing the bootstrap tag, all preload files of all libraries are loaded and the libraries are initialized as usual. The preload=sync mode should be transparent for most applications.
auto

The preload=auto configuration parameter is the default value. This mode checks whether OpenUI5 runtime uses optimized sources. If optimized sources are used, it enables the preload=sync option to further optimize the runtime. For normal or debug sources, the preload is deactivated.

Note Preload sources always have to be optimized. Therefore, using the preload variant with the debug configuration parameter is counterproductive and debug always overrides the preload configuration parameter.

You can easily check the preload variant with an existing application by specifying the sap-ui-preload=/mode/ parameter in the start URL by adding the data-sap-ui-preload attribute to the bootstrap tag:

#!html
<script 
    id="sap-ui-bootstrap"            
    src="resources/sap-ui-core.js" 
    data-sap-ui-libs="sap.ui.m"
    data-sap-ui-theme="sap_bluecrystal" 
    data-sap-ui-preload="async" >
</script>

Note The preload=async option requires active cooperation of the application. It is therefore not activated automatically, but only by configuration.

Note You can combine the preload configuration option with other bootstrap variants such as sap-ui-core-noJQuery.