RichTextEditor bundle size more than doubled with the 18.4.x releases

[Wayne Fisher]

Hi there,

I was wondering why my application bundle size had increased from 2.6MB to 5.4MB in the space of one month.

Checking the @syncfusion/ej2-react-richtexteditor package size in Bundle Phobia I can see what happened . . .

From version 18.3.52 to 18.4.30 the package size increased from 1MB minified to 2.5MB minified.

Other Rich Text Editor packages (such as Slate, DraftJS, Quill) are now 89 - 97% smaller.

Is the reason for this bloat new functionality in the component?

Is there some way of tree shaking the package to minimise the amount my app uses?

kind regards

Nick

[Revanth Krishnan]

Hi Wayne, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Rich Text Editor bundle size more than doubled with the 18.4.30 release”. 

 

Yes, the bundle size of the Rich Text Editor increased with version 18.4.30. And this is because we have added new features in the Rich Text Editor with version 18.4.30. The below are the new feature that is added to the Rich Text Editor, 

 

• File Manager - This feature allows the editor to browse and insert the images from `FileManager` using various remote services. In ES5 `Rich Text Editor`, it is mandatory to include the ej2-filemanager dependency to render properly.
• Provided new property `removeUrl` in `insertImageSettings` API to trigger the image remove operation in the server, when the image is removed from the editor.
• Provided the support to return the Xhtml value in the `value` property when the `enableXtml` property is enabled in the Rich Text Editor.
• Provided the support to retain all the styles from MS Excel while pasting the content in the Rich Text Editor.

 

Release Notes: https://ej2.syncfusion.com/documentation/release-notes/18.4.30/#richtexteditor 

 

The main reason that the bundle file size increased is due to the `FileManager` feature where there is Grid component dependency. 

 

We are currently checking the possibilities of tree shaking the package to minimize size. We will let you know with further details once we find the way to tree shaking the package or any other solution on or before 29^th January. 

 

Regards, 

Revanth 

[Revanth Krishnan]

Hi Wayne, 

 

 

Good day to you. 

 

 

We have checked the possibilities of the tree shaking in the react platform. And the tree shaking can be done using the webpack in the react application. We have prepared a sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161745/ze/React-Webpack543371594 

 

Reference Link: 

https://imranhsayed.medium.com/set-up-react-app-with-webpack-webpack-dev-server-and-babel-from-scratch-df398174446d 

https://www.folio3.com/mobile/blog/tree-shaking-implementation-in-react/ 

 

Can you please check the above sample and the reference link for the tree shaking on the react application? 

 

Regards, 

Revanth 

[Wayne Fisher]

Hi there,

I've found in subsequent versions of the RTE component that the bloat has disappeared (with no changes required on my part).

Using source-map-explorer I can see that RTE component is no longer pulling in the grid component.

thank you

Nick

[Revanth Krishnan]

Hi Wayne, 

 

Thanks for the update. 

 

We are glad that the reported issue has been resolved, please let us know if you need any further assistance. 

 

Regards, 

Revanth 

[Jaun Mark]

Most formatting should be preserved when pasting text into the rich-text editor, but some formatting, such as colored text, may need to be inserted manually in the editor after pasting node js development company

[Gunasekar Kuppusamy]

Hi Wayne,

Currently, we are validating your reported query. We will update the further details within two business days on or before 18th October.

Regards,

Gunasekar

[Gunasekar Kuppusamy]

Hi Jaun,

Greetings from Syncfusion support.

We have validated your query "Most formatting should be preserved when pasting text into the rich-text editor, but some formatting, such as colored text, may need to be inserted manually in the editor after pasting node js development company" from our end.

Unfortunately, we are not facing any issues when pasting the content into the RichTextEditor.We have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/react-qwf9xu

  

  

If you are still facing the issue, please share the following details,  

• Share the content that pasted into the RichTextEditor,
• If possible, modify the above sample to reproduce the issue.
• Any video reference for issue reproducing scenario.
• The exact package version you are using.

  

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest.

Regards, 

Gunasekar