SpreadJS bundle optimizations

SpreadJS bundle optimizations

Posted by: lpagliaro on 23 February 2021, 12:29 am EST

• 

  lpagliaro

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 February 2021, 12:29 am EST - Updated 3 October 2022, 12:56 am EST

  Hello! We are using the Spread Sheets Designer for React. We wanted to know if there is a way to reduce the bundle size since it is too large and making the build process extremely slow.

  As you can see in the attachment, the Spread Sheets packages in our bundle is taking 83.4% of the whole node modules bundle, having a size of 11.85 MB (without compression). When we start the build process, the node modules gets gzipped and ends up taking 3.25 MB, which is still large, and takes approximately 7 minutes to finish.

  Is there a way this can be optimized? Maybe by importing only needed features.

  Thanks. Regards.

  

  1910×932 26.8 KB

  

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 23 February 2021, 10:35 pm EST

  Hi Luis,

  This feature is already in our enhancement backlog. Further, We have asked regarding the updates on this case. We will update once we have any information regarding this issue. The internal ID for this issue will SJS-3005.

  Regards
  
  Avinash

• 

  lpagliaro

  • Post Options:
  • Link
    Copy

  Posted 24 February 2021, 1:39 am EST

  Thanks for your reply, looking forward to hear from the enhancements. In the meantime, is it possible to access the minified scripts needed for the designer to work via CDN? This way we can try to keep the libraries outside our application bundle and try to load them using script tags.

  Regards.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 24 February 2021, 8:23 pm EST

  Hi Luis,

  Please refer to the following download link and some steps to use the designer with CDN links and let us know if you face any issues.

  The recommended way to use designer with CDN links

  • "

  • “make sure all the spread package is added before the Designer link”

  • "Add the Designer component using the Designer constructor "

  "

  Further, you may also refer to the attached sample that demonstrates the same.

  SpreadJS v14.0.7: http://cdn.grapecity.com/spreadjs/14.0.7/Files/SpreadJS.Release.14.0.7.zip

  Regards
  
  Avinash

  reactSample.zip

• 

  lpagliaro

  • Post Options:
  • Link
    Copy

  Posted 25 February 2021, 2:15 am EST

  Thank you very much. I was able to use that and have the app working. Do you have an example on how to do the same but for the gc.spread.sheets.react library? I tried this:

  https://www.grapecity.com/spreadjs/docs/v14/online/UsingSpread.SheetswithReact.html#b

  but doesn’t seem to work on my end.

  Regards.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 25 February 2021, 11:54 pm EST

  Hi Luis,

  This issue needs further investigation hence we have escalated his issue to the concerned team for further investigation we will update you once we have any information. The internal tracking ID for this issue will be SJS-7780.

  Regards
  
  Avinash

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 3 March 2021, 3:05 pm EST

  Hi Luse,

  Please refer to the following attached sample that demonstrates the basic implementation of SpreadJS with react and let us know if you face any issues.

  Regards
  
  Avinash

  index.zip

• 

  datta

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 5:12 pm EST

  Hi Avinash , can you please elaborate what is the job of serviceWorker.js provided in the sample you attached? Is it required? Also let me know if cdn way of getting the library recommended approach?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2023, 3:36 pm EST

  Hi,

  In React, service workers are automatically added when you create your application through the create-react-app command, through SWPrecacheWebpackPlugin. Service workers ensure that the network is not a bottleneck to serve new requests.

  In the sample that Avinash Earlier provided, there is no use of ServiceWorker.js file in the sample. It is not required in the sample. You could exclude it.

  Also, the CDN approach was earlier used when the bundle sizes were large. With the SpreadJS V16.2.0, you could use the SpreadJS with individual modules to reduce the bundle size. Kindly refer to the following docs on using SpreadJS with Individual Modules: https://www.grapecity.com/spreadjs/docs/javascript_frameworks/spreadjs-with-individual-modules

  Please note that this feature is available with V16.2.0 and above only. Please let me know if you face any issues. If you are using any previous version, kindly upgrade to the latest version.

  Regards,

  Ankit