I am using the create-react-app toolchain to get started. Everything works fine but its build size is a little over the top.
In my app, there are 8 components and 2 small contexts measuring 60kb total. So all code in my src folder is 60kb. But with npm run build it generated 900KB app chunk.
Then I saw a video on youtube where the guy decreased his 700 kb chunk to 100 kb using webpack config. He didn't explain his webpack config much. What he said though is that react-scripts build includes lots of debugging tools that are not required in production. This command in particular did the magic
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
I have tried several methods to reduce the size of my chunk like code splitting using react.lazy() but that also didn't make much difference.
Can someone suggest a generic webpack config for the production build using above command.
The production build included in CRA removes those extra debugging tools and is optimized for production.
Related
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).
I'm thinking about an app that uses electron, react and webpack. But I'm not sure if it make sense to use webpack on electron. I'm definitely sure that using webpack to the react part of an app could benefit a lot but I would like to know if it is the same thing with the electron part of an app.
Why do you need webpack for some cases even in node.js? Because CJS module resolution can cost a lot depends on your code:
https://twitter.com/samccone/status/1010584941355077632
Friendly reminder that Node startup time due to module runtime parse and compile is non-trivial. Illustrated below is the hello-world webpack common chunks example, As we can see the actual work takes < 1/4th of the time, the rest is lost to the javascript parse ghoul
This applies to Electron because it shares the exact same module resolution.
https://twitter.com/_ojkwon/status/933046538762207232
CJS without bundling
with webpack bundled
Still, it means development / deployment pipeline will change entirely, and this is not the guaranteed path of improving cost of module loading. You have to analyze your dependencies, and decide proper path for best performance.
Webpack is separate from electron. Webpack is used to bundle js files if you want to bundle your code together. There is a similar question that goes into additional detail here.
I am using React with Webpack for my project. My project is very very huge. It consists of 10-12 modules and bundling of one module related JS files is taking 460KB file size. I am worried that it may take up to 5MB bundle size after I wrote code for all the modules in my project.
How can I reduce the bundle size or any suggestions to bundle for large scalable project with React and Webpack.
Thanks in advance!
You could use tree shaking of your project after you finish it.
Take a look at the official webpack docs for this: https://webpack.js.org/guides/tree-shaking/
Things you can do to keep the bundle size at minimum.
Code splitting
Production configuration optimization e.g webpack --mode production
gZip compression
minify (uglify) code
This will reduce your bundle size drastically.
Say the webpack config is as follows
{
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
Now the build from webpack is
and the build from react-scripts build ( static contains css, js and media in seperate folders )
Question: Is there any specific advantage of webpack over react-scripts build? ( including but not limited to performance )
NOTE: package.json is edited to achieve this.
Webpack is a general purpose bundler, with applications beyond React. Before create-react-app, the web was full of examples of setting up a brand new React project which uses webpack as the bundler. It is extremely flexible and can handle things including and beyond what a React application would need. It works for Angular, Vue, NodeJS and even Web Assembly.
But it used to take a while to setup. You will need to understand its working and configure it so that you can transpile your React+ES6 code into plan-vanilla JS. You would need to decide the output structure you like and configure webpack for it. And then also add hot-module-reloading and code-splitting support yourself. During this, you will also need to add other plugins required by Webpack to support all the above :).
This naturally caused some fatigue with folks who were starting with React.
So facebook created cra which internally uses webpack, pre-configured to include all the nice tools to take care of these basics and help you focus on the React part of your code. It hides webpack from you as much as possible, otherwise the build process may break if the configuration is changed by the user.
With that aside, the structural conventions which cra uses should not be having any performance impact over a bare-bones webpack setup. It's just a convention.
Your question should then be, when would I use create-react-app and when would I use Webpack?
As a beginner you might want to stick to cra as you focus on your react app. Eventually there would come a time where what you want to do is not supported by the webpack configuration cra is managing under the hood. A very common example is if you want to write a component library to reuse in other apps. This cannot be done by cra (it's about the whole app :)). You can then switch over to webpack and start learning it.
react-scripts hides all of the webpack configs behind the scenes. The advantage of this is it makes it cleaner and since create-react-app is regularly updated, its easy to stay up to date with React, Webpack, and Babel. The community automatically fixes the issues for you.
In terms of performance, should be the same regardless with react-scripts or with webpack.
Advantages of running only webpack:
Full control of your environment
Can do custom things like server-side rendering easily (still possible with create-react-app
Knowledge of webpack as a skill
Disadvantages of webpack only
Full in charge updating and maintenance of webpack (some webpack versions are not backward compatible or future compatible)
Can be intimidating and can be a headache if you are trying to learn to react quickly.
If you want to customize create-react-app, here is some info
https://auth0.com/blog/how-to-configure-create-react-app/
Here is server-side rendering with create-react-app
https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff
TLDR: Use create-react-app / react-scripts if you want to go to 0-100 as quick as possible for whatever reason
Use just webpack if you enjoy messing around under the hood
Recently I started learning react and I saw a tutorial where they used Webpack to create the production and development builds. But there was no explanation on what the difference between those two builds is and which one you have to use when. I searched the internet but didn't find anything that helped me. Does anyone have a tutorial or an explanation that I missed/didn't read?
The development build is used - as the name suggests - for development reasons. You have Source Maps, debugging and often times hot reloading ability in those builds.
The production build, on the other hand, runs in production mode which means this is the code running on your client's machine. The production build runs uglify and builds your source files into one or multiple minimized files. It also extracts CSS and images and of course any other sources you're loading with Webpack. There's also no hot reloading included. Source Maps might be included as separate files depending on your webpack devtool settings.
What specifically separates production from development is dependent on your preferences and requirements, which means it pretty much depends on what you write in your Webpack configuration.
The webpack-production documentation is very straight-forward.
Also, the article Webpack 3 + React — Production build tips describes the process of creating production builds for React with Webpack pretty good.
The very basic difference is that Production Build has ugly, minified(compressed) version of your javascript code, so this makes rendering of file on end user's browser very quick and performance enhancing.
You can also verify if production build is being used in the website by applying a google plugin extension, which when activated on your browser, will always tell you if the website is using react js on the front end and also tells whether the build type is production or development.
when react is development build,
production-ready versions of React and React DOM as single files are available as well,
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
NOTE: Remember that only React files ending with .production.min.js are suitable for production.
The production and development build come into the picture just because of performance impact in real life deployed the application. Also, it happens that the location where the application is deployed is another continent altogether, so rendering development build js files on UI will take a hell of a time as compared to production version which is very crisp, compact, compressed, uglified for better user experience and loading on UI. for information CLICK HERE
react.development.js provides us extra features like debugging, hmr(Hot module reloading) and lots of other stuffs that you might
use while developing app with the help of bundlers like webpack, parcel, vite. This bundler bundles and minifies our code to be
deployed on production
These minified files will be deployed on production which removes lots of unnecessary files which will not be used by our app
for this we have react.production.js to make our much faster(as bundlers and lots of other files have done there work and are not required now)