Reduce bundle Js file size

[mohammedfaisal]

For my application, I just need the tools present in the Adjust tab of the filerobot-image-editor. Features/tools from any of the other tabs are NOT required.

Since the tools belongs to the Adjust tab is some what 10-20% of the entire tools/features available in the image-editor, I would like to tree shake the dead-codes and reduce the size of the bundle js file. So I created a vite project using vanilla template and installed the following dependency as mentioned in the github documentation.

npm install --save filerobot-image-editor react-filerobot-image-editor

I have configured minimal image-editor by enabling only the Adjust tab. Everything works great.

Then I build the project for production using vite by executing the command: npm run build.
Unfortunately the built js file size is 963 kB, which is almost equal to the size of the CDN provided filerobot-image-editor.min.js (938 kB) file.

It seems tree shaking not worked here.

How can I reduce the bundle js file size ? Is it possible with the library ?

See the repo https://github.com/mohammedfaisal/image-editor-vanilla for an example of the issue described.

[AhmeeedMostafa]

@mohammedfaisal The tree-shaking doesn't work with the main default/main import as the default component already uses all the other components and modules and the JS lib already uses the default import.
if you need to apply tree-shaking u will need to import specific modules from the editor's folder (depends on your use-case, might be hard to achieve for different functionalities)
that's why we will improve the tree-shaking and module separation in the next major release for react version of the lib., and possible to consider it for the JS version also. we'll notify u once the new major release that contains these updates is available.

[mohammedfaisal]

Thank you.
Please consider tree-shaking and module separation for the vanilla js version as well.