How to create a Component-preload.js file in a custom site template

To improve the performance of a custom site template and speed up it’s initial loading, it is recommended to create a Component-preload.js file.

In the following procedure, we explain how to create such a file for your project.

Steps:

1. In SAP Web IDE, create a new site template, based on the Basic Layout template.

Project name: anewtemplate

Site template name: mynewtemplate

For more information about how to create a site template, see Create a Site Template.

You should get the following project structure:

2. In your project folder, create the following files:

– package.json

– Gruntfile.js

3. Open the package.json file and add the following code:

{
  "name": "anewtemplate",
  "version": "0.0.1",
  "description": "",
  "private": true,
  "devDependencies": {
    "grunt": "1.0.3",
    "grunt-openui5": "^0.14.0"
  },
  "scripts": {}
}

NOTE: The name attribute must be the name of the project.

4. Open the Gruntfile.js file and add the following code:

module.exports = function (grunt) {
    grunt.initConfig({
		  "openui5_preload": {
		  }
    });
	grunt.loadNpmTasks('grunt-openui5');
    grunt.registerTask('default', ['openui5_preload']);
}

5. Inside the “openui5_preload” attribute, add a script that will create the Component-preload.

In the following example, a Component-preload is added to the AnchorNavigation page which is located under the pageTemplates folder:

module.exports = function (grunt) {
    grunt.initConfig({
	"openui5_preload": {
		"AnchorNavigation": {
                options: {
                  resources: {
                    cwd: 'mynewtemplate/pageTemplates/AnchorNavigation',
                    prefix: 'cpv2/templates/AnchorNavigationV2',
                    src:[
                        '**/*.js',
                        '**/*.fragment.json',
                        '**/*.fragment.xml',
                        '**/*.view.xml',
                        '**/*.properties'
                     ]
                    },
                    dest: "mynewtemplate/pageTemplates/AnchorNavigation"
                },
                components: '**'
            }
		}
    });
	grunt.loadNpmTasks('grunt-openui5');
	grunt.registerTask('default', ['openui5_preload']);
};

Note:

• The string that appears next to cwd and dest is a relative path to the site template that you’ve created. The path consists of “<your-template-name>/pageTemplates/<the-page-name>”.
• The string that appears next to prefix can be found in the Component.js file of the chosen page. For example, this is the prefix for the AnchorNavigation page, taken from the AnchorNavigation folder -> Component.js file: When you copy this prefix from the Component.js file, make sure to replace the dots with slashes and remove the word “Component”.
• The rest of the code in the Component-preload example should be copied as-is.

6. To add a Component-preload script to another page in the site template (in this example, the BlankPage), add another script block under the “openui5_preload” section, separated by a comma.

module.exports = function (grunt) {
    grunt.initConfig({
        "openui5_preload": {
            "AnchorNavigation": {
	      // Here goes the previous code
            },
            "BlankPage": {
                options :{
                  resources: {
                    cwd: 'mynewtemplate/pageTemplates/BlankPage',
                    prefix: 'cpv2/templates/Blank',
                    src:[
                        '**/*.js',
                        '**/*.fragment.json',
                        '**/*.fragment.xml',
                        '**/*.view.xml',
                        '**/*.properties'
                     ]
                    },
                    dest:"mynewtemplate/pageTemplates/BlankPage"
                } ,
                components: '**'
            }
        }
    });

7. Right-click the project -> Build -> Build Project.

The build might take a few minutes to complete.

After the build finishes successfully, you can find the Component-preload.js file under the pageTemplate folder.

8. Before deploying the project, you must delete the package.json file (and package-lock.json file, if exists).

9. Right-click the project-> Deploy -> Deploy to SAP Cloud Platform.

10. After the deployment finishes successfully, you can test your flow.

Open the Site Directory and create a site using the site template that you’ve created.

The new site template will load the Component-preload.js instead of Component.js and you should notice a faster loading!

In conclusion, we know how important performance is to our sites. The lack of Component-preload files in our custom site templates can harm the performance and slow things down. In this blog post, we’ve seen how easy it is to add Component-preload files to our custom site templates and rapidly increase the performance.

Hope this will help you make better sites with better performance!