Combine/Bundle JavaScript/CSS Files

Combine JavaScipt/CSS Files

Combining JavaScript and/or CSS files can reduce load times, as each call to the server requires additional time. To reduce the number of calls, you can bundle multiple files into one using the steps below.

Project Settings

To bundle JavaScript/CSS files, you must update settings on the project level. JavaScript and CSS files have to be bundled into separate files, and it is possible to enable bundling for each file type independently.

1.  Click on your project and click modify on the Details tab.
2.  Scroll down to the Layout section and select 'yes' from the dropdown menus for bundling JavaScript and CSS files.
 

3.  Specify the files that need to be bundled by listing them in the input boxes below the bundling dropdown menu. To keep the paths to the files relative you can use the following data objects:

• $(lncorepath) - for files located in the lncore directory of LogicNets. These files contain core functionality from LogicNets.
• $(frameworkpath) - for files that are placed in the framework project. These files contain functionality specific for a framework.
  
   

4.  After typing the path in the textbox press the '+' button to add another input box. Repeat these steps for all files that should be combined.
5.  Click save to save your updates.

Layout File

In addition to the changes to the project settings, it is important to update the project layout file to include a placeholder for the system-generated "includes" for JavaScript and CSS.

• If JavaScript bundling is enabled [[$jsincludes]] will be replaced by the Script that requires the bundle.js file.
• If JavaScript bundling is disabled [[$jsincludes]] will be replaced by multiple script tags, one for each of the separate JavaScript files that are defined in the 'JavaScript files' setting.
• If CSS bundling is enabled [[$cssincludes]] will be replaced by the reference to the bundle.css file.
• If CSS bundling is disabled [[$cssincludes]] will be replaced by a reference for all of the separate CSS files that are defined in the 'CSS files' setting.

Additional Information

If bundling has been enabled on a framework, this setting will overwrite the settings at the project level.

• To bundle for all projects using a framework, enable at the framework level. The system will ignore project-level settings.
• To bundle for specific projects only, disable bundling at the framework level and set bundling at the project level.