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. Image for the cookie policy date

Modular Loading of the JS files

Hi,
I'm trying to figure out how to load only the files required to render the Elements of a page.
Different Razor pages may use different controls, so ideally I'd like to run a central configuration (such as cldr data and locale) in the shared _Layout file, and include the required components on a page level.
All files from npm's syncfusion-javascript 16.4.0.42 are available in wwwroot/lib/syncfusion-javascript.

Looking at the browsers network tab, I can see that the total file size of ej2.min.js is 7.22 MB, but it shows "transferred" as 1.52 MB - which is is way more acceptable than 7.22 MB when I only need a schedule and a few select boxes... The CDN server appears to leverage HTTP/2. Does the CDN already do what I need?


I've seen the CRG https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator/ but that would still require to create bundles of individual files when I'd like to use individual components on a per page basis. If you could confirm my assumptions above then it appears that the CDN is the better way to approach this.

Thank you very much,
Stefan

4 Replies

NR Nevitha Ravi Syncfusion Team January 16, 2019 03:30 PM UTC

Hi Stefan, 

We can refer the script files of scheduler component alone downloaded from CRG  in individual razor files which will reduce the file size, refer the following sample for your reference. 


 

Kindly check the sample and let us know if you need further assistance. 

Regards, 
Nevitha. 



ST Stefan January 16, 2019 05:01 PM UTC

Hi Nevitha
thanks for your reply. Unfortunately this does not answer my question. I did mention that I'm aware of the CRG and wondered

a) whether the CDN server, by using the HTTP/2 protocol, already manages my requirement; or 

b) since the individual files already appear to include AMD (asynchronous module definitions) statements, how to leverage this in an ASP Net core environment. I'm not certain on how to go about using require.js or similar with the structure of the files, and can't find documentation explaining the structure of the components. The only reference I could find it to the CRG, which is inconvenient in times where we have npm and gulp.

Thank you for pointing me into the right direction.


KK Karthigeyan Krishnamurthi Syncfusion Team January 17, 2019 12:38 PM UTC

Hi Stefan,  
 
Thanks for your update. 
 
Please find the below responses. 
 
  1. We have the ej2.min.js compressed file in zip format for size optimization in the CDN link. This will be automatically extracted by the browser and get the complete content of ej2.min.js file, which is the reason for the lesser size of 1.52 MB while the whole file size if 7.22 MB.
 
  1. CRG file is better than NPM and Gulp. By using CRG, we can generate the particular control script file with particular modules. For example, if no resize and Drag & drop feature is used in your sample, you can generate the Schedule script file without those module code examples unlike NPM and Gulp. If you wish to use require.js in Core application, kindly revert, we will check and provide further details.
 
Regards, 
Karthigeyan 
 
 



ST Stefan January 17, 2019 01:19 PM UTC

Hi Karthigeyan
thank you for your reply.

I find the CRG rather inconvenient - presently I can update a line in my packages.json and get a new version, which is then copied to the wwwroot/lib through a gruntfile.

Say that most of my pages only use an autocomplete, a dropdown and a toast, then I'd like to render a partial view that includes exactly those scripts and css.

Another page may then load a bigger component, such as the Schedule, where again I may have included a dropdown and an autocomplete as well.
On that page, I may want to render a different partial to only load those components.

Using the CRG, I'd have to re-do this for any combinations of files that may be required, and also lose the option of caching individual file that may have been in use before. So a user who visited page one will already have requested the js file for autocompletes and dropdowns before, those would be in his cache. 

I am very interested in your suggestion number 2; to either use webpack or require.js or similar methods to leverage the Async module loading that appears to be available.

Thank you very much!

Loader.
Live Chat Icon For mobile
Up arrow icon