search

scaleflex / filerobot-image-editor

Edit, resize, and filter any image! Any questions or issues, please report to https://github.com/scaleflex/filerobot-image-editor/issues
MIT License
1.26k stars 321 forks source link

Reduce bundle Js file size #467

Open mohammedfaisal opened 1 month ago

mohammedfaisal commented 1 month ago

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.

image

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 commented 1 month ago

@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 commented 1 month ago

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