how to use JS components with minimal JS and CSS loaded?

Problem

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.

Solution

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.

HTML

    <!--Contains the core CSS required for our components-->
    <link href="themes/ej.widgets.core.css" rel="stylesheet" />
    <!--Contains the theme required for Autocomplete component alone-->
    <link href="themes/ej.autocomplete.css" rel="stylesheet" />
    <!--necessary dependency script files-->
    <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.easing.1.3.min.js" type="text/javascript"></script>
    <!--scripts neccessary for autocomplete component-->
    <script src="scripts/ej.core.min.js" type="text/javascript"></script>
    <script src="scripts/ej.data.min.js" type="text/javascript"></script>
    <script src="scripts/ej.autocomplete.min.js" type="text/javascript"></script>
    <script src="scripts/ej.scroller.min.js" type="text/javascript"></script>

To get the above mentioned script files of individual components refer the following steps.

1. Open the Essential Studio dashboard. On the left side of the dashboard, choose the JavaScript platform.
2. Now, on the right side choose the option Explore Samples.

Figure 1: Essential Studio Dashboard

3. It opens the location where the samples are installed locally. The path is similar to the following link.

[Installed Drive]:\Users\lab\AppData\Local\Syncfusion\EssentialStudio\Version\JavaScript

4. Now you can find folder structure as follows,

• assets
• olap samples
• report samples
• Samples.

5. 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.

6. 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 12.1.0.49, 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,

[Installed Drive]:\Program Files (x86)\Syncfusion\Essential Studio\Version\JavaScript\Src\css\web

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.

How to identify the necessary scripts and dependencies of a particular component.

Refer the following class reference link for JavaScript, and click on the required component name. Under the heading Requires, you can find the required script files for that component.

https://help.syncfusion.com/cr/javascript

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

https://csg.syncfusion.com/

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.

You can find the documentation for how to use the custom script generator from the following location

https://help.syncfusion.com/js/overview