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).
Related
I have been working with reactjs from last 7-8 months, I have always used create-react-app to get started with any react application. but, by exploring more ways to get started with a react application I came to know there is a thing called vite which is I guess is providing a faster and leaner development experience for modern web projects.
I used it once till now, not in production yet as I am not very confident about it. So, which is a better way to get a simple template for react app. which is also better in production environment. Does using any one affects in production?
CRA uses webpack to handle its core functionalities. In the development webpack repeats the bundling process every time there is a change in the code. As a result, when your source code grows larger, everything becomes sluggish. The time it takes to serve a dev server and build your projects increases significantly.
Vite only needs to pre-bundle your dependencies using esbuild the first time you start development before it begins to serve your app.
Vite doesn’t need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand, thus making it significantly faster than CRA.
https://blog.logrocket.com/vite-3-vs-create-react-app-comparison-migration-guide/#:~:text=Vite%20and%20CRA%20are%20not,and%20which%20modules%20are%20supported.
I am using create-react-app to create my react projects boilerplates but recently launching my projects with npm start is too slow and most recently hot reloading is slow take from 5 - 15 secs to rebuild the page after any change especially when rebuilding after an error.
I really don't know much about webpack, after some search i found that problem can be from webpack or webpack-dev-server but i don't know much about them
so i don't know from where should i move to solve this issue?
If you're developing a React project in a Windows Subsystem for Linux 2 (WSL2) environment, it's especially important that you work within the WSL2 directory structure for optimal I/O. For example, you'll want to put the project in "~/repos/my-project", not "/mnt/c/Users/my-username/repos/my-project". They aren't the same location. You can confirm this by running "explorer.exe ." from the terminal.
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
I am developing a SPFX app (SharePoint Framework) for SharePoint online using React JS. Everything was fine up until the point my app grew beyond 100 MB in size. Now, although I can upload the app to my app catalog site, I cannot update the app in my site collection. When I try, I get the following error:
the package stream exceeds the maximum allowed length of '104857600' bytes
I am using Gulp Bundle -ship and Gulp package-solution --ship commands to package my solution. Is there a more efficient way of packaging for production? Maybe an approach where the package file doesn't become as large?
After a few hours of hit and trial, found this solution which addresses the issue. The answer to the original question is still unknown i.e. I haven't found out how to add an app larger than 100 MB. But I have found a solution to why the app was more than 100 MB in the first place. Sharing it so it may help others like me who are beginning with React SPFX development.
Issue
My project has absolutely zero media files (no images, no videos). So it was baffling that the package was more than 100 MB. I had more than 25 components and 5 web parts though. I usually start my workbench (using Gulp Serve) and keep on making changes until it's ready for build. I then stop Gulp Serve and run my build commands (Gulp Bundle -ship & Gulp Package-Solution --Ship). What it does is increment the size of the .sppkg file with each build. It also adds a painful amount of delay in uploading and checking the app to app store (almost 10 minutes in the worst case scenario). And then when the package crosses 100 MB, you can't update it in your site collection any more.
Solution
I stumbled upon "Gulp Clean" by chance and thought to give it a try. I ran it before my build commands and voila! The package which was 100 MB just a few minutes back was now 1.3 MB (obviously since all that my solution contains are .ts, .tsx and .scss files). Now updating my app in app store takes less than a minute.
So I created a bat file to build my package every time I need to. The contents of the bat file is as shown below:
call gulp clean
call gulp bundle -ship
call gulp package-solution --ship
Additional Reference
I found this post from Waldek Mastykarz too late. Although the reasons for using "Clean" in his post were different than mine, it would have saved me a few hours if I had just seen this a little early.
Warning
I am still discovering Gulp Clean in detail and can't say for sure if it has no side effects.