We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

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.

http://www.syncfusion.com/downloads/support/directtrac/126098/99591211_4f1278e3.BMP

Figure 1: Essential Studio Dashboard

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

  1. Now you can find folder structure as follows,
  • assets
  • olap samples
  • report samples
  • Samples.
  1. 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.

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

C:\Users\Giftline\Desktop\img.jpgNote: 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.

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.

http://help.syncfusion.com/cr/js

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

http://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.

C:\Users\Giftline\Desktop\img.jpgNote: 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

http://help.syncfusion.com/ug/js/documents/essentialjscustomscr.htm

 

Article ID: Published Date: Last Revised Date: Platform: Control: Product Version:
3048 12/17/2014 12/18/2014 JavaScript General 12.1.0.43
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon