Currently, I am using :
The file of compressed and minified file is getting larger and larger. So, how can I get away with it?
Please suggest.
There are couple of other things which you can do to improve the build size,
Also, have you removed the devtool option in production webpack config?
You should follow what @bebraw said. Also, I would like to highlight the point where he suggests turning on gzip on the server. This is a great step towards optimization and will further compress your minified code. Once gzip is on, you can use a tool like pingdom to see the gzipped size and compare both. For example, a minified JS resource with size 1.5mb, when served with gzip on, could take up only 600kb (just an example, results may vary).
One thing to do in order to reduce the bundle size is to import only the required components from a library and not the COMPLETE library.
Example of COMPLETE library import:
import { FlatButton } from 'material-ui';
Replace it with the component import:
import FlatButton from 'material-ui/lib/flat-button';
This way, you'll only import what you need each time. Try to do this for every library :)
Also, I found this, but I did not try it at the moment: github.com/robertknight/webpack-bundle-size-analy…
This may gives you some insight on how to reduce your bundle size.
The simplest way is to run webpack -p.
For an even smaller bundle, you probably want to run NODE_ENV=production webpack -p and tell React that you want a production build of the library by adding a custom plugin to your webpack config:
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': process.env.NODE_ENV !== 'production' ? JSON.stringify('development') : JSON.stringify('production'),
}
}),
Depending on whatever else you're doing in your webpack config, you may want to use process.env.NODE_ENV to enable/disable certain parts. I would highly recommend disabling sourcemaps in production. You can also create two separate webpack configs (one for dev and one for prod) and pass one in via webpack --config path/to/webpack.config.js.
Satyanarayan Dash
Front end Lead at Happay
webpack --json > stats.json. I like to use Webpack Visualizer to study the output myself as that gives a rough idea of what's going on. The official tool provides even more information.appand avendorbundle. The idea is that done right we can leverage user caching (load onlyapporvendor) as those change. The setup isn't trivial but this is one direction. If you can spot dependencies that are specific to some particular view, you can load them dynamically. In Webpack 1 that can be achieved throughrequire.ensure. Webpack 2 supportsSystem.importbased semantics (error handling, though you need to shimPromisefor this to work!).externalsto pull this off, but it's one direction. I recommend setting up a local fallback. The rough idea goes like this:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="js/jquery-1.8.3.min.js"><\/script>') </script>TLDR; Analyze, simplify, split, leverage caching, rinse and repeat.