how to use JS components with minimal JS and CSS loaded?
To include the Syncfusion JS components in your application, use the script files ej.web.all.min.js (contains the script for all the web components) or ej.widgets.all.min.js (contains the script for both web and mobile components). These files are larger in size as they include the script for many components. In some cases, you may not use all the components. So, it is unnecessary to load the above mentioned complete script files because the script loading time is longer when compared to loading the script files of the necessary components.
When you use one component or a set components in your application, instead of loading the entire ej.web.all.min.js file, you can use the scripts necessary for that component in your application. This helps in reducing the script loading time, or in other words increase your application loading time.
Consider, that you are using the Autocomplete control from Syncfusion JS suite. Refer the following script files and theme files necessary for the Autocomplete component.
To get the above mentioned script files of individual components refer the following steps.
- Now, on the right side choose the option Explore Samples.
Figure 1: Essential Studio Dashboard
- It opens the location where the samples are installed locally. The path is similar to the following link.
- Now you can find folder structure as follows,
- olap samples
- report samples
- Open the assets folder and navigate using the folder structure as follows,
assets -> scripts -> web. In the “web” folder you get the minified version of all controls.
- To get access to ej.core.js file, navigate to assets -> web -> common folder. Common folder contains the common script files necessary for the JS components.
Getting access to unminified source of CSS file
From the version 18.104.22.168, you have shipped unminified CSS files of individual components. It is available in the location where the dashboard is installed in your machine. The path is similar to the following link,
Now you can find the folders for each supported themes. Under each theme folders there is an individual theme file for a particular component. Based on the components that you are using in your application you can load those individual theme files alone.
Ensure to include the “ej.widgets.core.css” file as it contains the core CSS required for our components.
How to identify the necessary scripts and dependencies of a particular component.
Using Essential JS Custom Script generator utility to get only the required scripts and theme files
Essential JS custom generator is a utility provided by Syncfusion to reduce the file size. You can use the following link to get in to the Custom script generator option
After logging in, you need to choose the version you are using. Then, select the components that you are using in your application and click the generate button. It generates a script file that contains only the necessary script files for the selected components. Along with the script file, it also provides the necessary theme for those selected components. You can now include the generated script and theme file to reduce the loading time.
Along with the generated to theme file, you need to include “ej.widgets.core.css” file
You can find the documentation for how to use the custom script generator from the following location