When coding in a modern modular way with Webpack is done, it enters the deploy phrase. We minify assets to reduce the network transfer cost. While bundling is not necessary nowadays thanks to HTTP/2, minifying is still an important work, because in many cases we can reduce the size to transfer between servers and clients:
unreachable codes can be removed
comments code can be removed
images can be optimised losslessly
HTML and SVGs can be optimised
Here in Helijia, we use webpack to build mobile apps. Here are some notes from us on minifying with Webpack.
Webpack is shipped with some builtin plugins which can do the job well.
* Dedupe Plugin searches for similar files and deduplicated them in the output.
* UglyfiJS Plugin uses the famous UglifyJS to minify JS and CSS assets.
Tip: Use webpack stats to review your modules
Webpack can generate packing stats in json format while packing. We use Webpack visualizer to visualize it to find which part of our works can be optimized. It helps a lot by providing an detail view inside the bundled file.
Webpack provides a powerful way of web developing, we use some plugins to automating the deployment. and there are more out of our view. So let’s keep exploring and make web development more enjoyable.