webpack4.0 some tricks when packing.

The Webpack of 4.0 is not a little bit stronger than the previous version.

I did a lot of optimizations when I was packing.

And say some interesting tricks that have been discovered during this time.

1. The packaging of the file is very large, do not know what the reason can be used Webpack-bundle-analyzer

Very good analysis tools, you can know that the packaging of the files are from where, each of how to use the method is very simple 1. Introduced 2. Put it in the plugin.

Const Bundleanalyzerplugin = require ('webpack-bundle-analyzer'). Bundleanalyzerplugin;

Config.plugins.push (new  bundleanalyzerplugin ())

Then the page will pop up in the browser after packing.

Like I'm telling me this is highlightjs too big, more than 700 KB This solution is generally a way to get away from a part highlight

This thing is very cool, very convenient, highly recommended

2. Public module separation

optimization: {splitchunks: {cachegroups: {commons}: {chunks: ' /c0>'Initial', Minchunks:2, Maxinitialrequests:5, MinSize:0}, Vendor: {//extract the third-party moduleTest:/node_modules/, chunks:'Initial', Name:'Vendor', Priority:Ten,//PriorityEnforce:true                }            }        }    }

Webpack4.0 of the split has become more humane, can be very convenient to node_modules public functions out, pull out will not be wrong, the client cache up, this part is not changed

3. Compression Code Compression-webpack-plugin

The use of mode=production itself is compressed, but this compression is only code compression, and the browser is actually supported Gzip and other various formats of compressed files, we can give the browser a compressed package

Compressing into gzip with this plugin will make the code one or two times times smaller. It's easy to use.

Const Compressionwebpackplugin = require ('compression-webpack-plugin')

 config.plugins.push ( new   Compressionwebpackplugin ({asset:   " [path].gz[query]  "    " gzip   '  

Of course, the premise of this thing is to have a server support.

The general practice is that when we request a JS resource, the configuration is returned as a compressed package instead of JS

Just introduce these three, if your webpack has not used these three kinds of optimization, then try it quickly.

webpack4.0 some tricks when packing.