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.
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 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.
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'm trying to migrate to webpack from grunt and trying to figure out the best way to bundle less files during development .
Is there a way to configure webpack to build less files into a bundle without having to use imports ?
The issue here is that the project is based on es5 Javascript.
Here is my project structure
My goal is to generate stylus files into css, compile the jade files into HTML and image optimization. There is nothing much happening in the js folder, the js files need to be minified and in some instances, need to be combined into a single js file into dist/js folder. However I intend to use AngularJS, KendoUI and BrowserSync onto this project. I usually use Gulp to achieve the task. I would like to know if Webpack can make my life easier. Can I achieve the same using Webpack instead of Gulp. Is it worth the effort?
Yes you can use webpack!
Webpack can do much more then gulp, gulp is a only task runner on the other hand webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
I used gulp before webpack and i have to admit it did the job but was very complicated for with all those tasks and now i let webpack to do the hard job :-)
Learn more about webpack
Simple configuration from my seed