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
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.
HTML webpack plugin can help minifying HTML. Here is an example config:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
we are currently using svgo-loader to keep SVGs clean.
1 2 3 4 5
Minifying bitmap Images
Image-webpack-loader can save a lot bandwidth.
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.