we are working in a webpack, react, redux, ... based project. Trying to minimize as much as possible the final bundled file we found that react-dom increases the file size in about 150kb.
We have made some tests creating a dummy app that only includes react and the final minimized+optimized size is about 20kb (something reasonable taking into account the minimized version of react.
Next if we also include react-dom the final bundled size is about 170kb.
Is really react-dom as big? Anybody has some experiences to share.
Thanks in advance.
Related
I have created a project whose build size is 26mb, then i removed useless packages, dead codes and much more useless stuffs from the project and it's code been reduced to 17mb but i want to reduce it further up to 10mb, idk which packages do i need here to compress the bundle size enter image description here
Add dependencies that you need only for development like react-testing-library, into devDependencies.
That should help.
Check for images and assets might help too
I am working in a monorepo which has been in development for a few years. The codebase is big and it is very hard to find components which are no longer in use. I did analyze the codebase with webpack bundle analyzer, but the report is not that helpful. We are trying to move them in a folder called deprecated. We tried to move unused react components manually, as much as possible but the process is very time consuming and fragile.
I am wondering is there any other tool or techniques that make finding these unused react components easy.
Any suggestions are appreciated.
there is a npm package called "react-unused-components" it can help
link : https://www.npmjs.com/package/react-unused-components
or you can take look into following repo
git : https://github.com/CVarisco/delete-react-zombies
reddit link : https://www.reddit.com/r/reactjs/comments/7z6bo0/cli_to_search_and_delete_unused_components_in/
I'm trying to implement an emoji picker with a text input, I came across a package called Emojimart it was really good and working effectively, but running it in production makes my bundle size too big,
so I'm wondering if there is anyone who used it in production and if there is any tips on how to make it production ready?
Or: if there is any other alternatives.
Note: Reproducing what I have will take only 2 steps
Create react app with create-react-app
Install emojimart
Then check the bundle size and performance of the app, you will notice the difference.
There was a discussion about that in the Emoji Mart project: https://github.com/missive/emoji-mart/issues/156 - unfortunately I don't see a solution that wouldn't require you to eject the app or use react-app-rewired.
Since you're using React, maybe you could give emoji-picker-react a try. The bundle size in a new project is around 120 KB (80 KB gzipped).
My expo apk file has a size of 45.8 MB.
Look at the apk size in the screenshot below.
App Info on Device
Expo apk size Vs android studio apk
How can I get a smaller APK-Size?
There are many way's to reduce the size of your distributed app.
I'm afraid you have to read & learn something about this, because this isn't a short & easy answer - at least, because there are many hooks where you can adjust your deployment-process to optimize your app(size).
But here some first suggestions:
If possible use React Native CLI to initialize your Project (instead of EXPO)
Don't use an existing React-Native Module for each stuff you do. Sometimes it gives you a lower footprint to code easy stuff by your own instead to import an npm-module from third-party
Keep your files (audio, video, images) bundled with your app as low as possible, think about to use SVG where possible.
Better use "app-bundle" for Android-Apps as general "apk-releases" (keyword: gradlew
bundleRelease vs gradlew assembleRelease)
Don't miss to read the Performance Section in React-Native Docs
build.gradle gives you additional Options to optimize your App for bundling-Process. Be sure that you use Proguard with shrinkRessources to minimize your apk / bundle (keywords: Proguard, seperateBuildPerCPUArchitecture)
PS: Best result you can gain, with lowest effort to spend (only for Android-Apps): Switch from APK to Bundle (AAP) see Docs
My src folder total size is 2.6 MB and the production build is 2.7 MB. It is taking too much time to load in the browser. I am generating a build using npm run build. I have started my project with create-react-app command. How to reduce the bundle size? Please help me.
I followed this link https://codeburst.io/how-i-cut-my-react-javascript-bundle-size-in-half-with-three-lines-of-code-fe7798ecbd3f as well but the result is same.
To increase loading performance of your app, another pointer could be using code splitting feature from webpack.
Or you can even consider Server-Side Rendering with react-based frameworks like nextjs or gatsby
You can increase your application perforce there are some methods to follow
We have to use React Js latest version or above 16
We have to Remove unwanted imports in the components
Using shouldComponentUpdate()we have to control the rendering method, if its necessary then only render the component
Re Usable of components
Using Lazy Loading Concept we can increase the performance