This is the fifth day of my participation in Gwen Challenge

Lynne, a front-end development engineer who can cry, love and laugh forever. In the Internet wave, love life and technology.

preface

Webpack + Terser implementation tree-shaking analysis is here!

Terser is a JavaScript parser and Mangler/Compressor toolkit for ES6+.

If you’ve read the issue, you’ll know that more and more people are abandoning Uglify for Terser, and it’s clear why:

  • Uglify is no longer maintained and does not support ES6+ syntax
  • Webpack comes built-in with the Terser plug-in for code compression by default

Terser seems to have tripled the compression speed, and switching from Uglify to Terser only took about 2 minutes. That’s a good deal, isn’t it? Without further ado, get up ~~

The configuration uses the -terserWebPackPlugin

Like the Uglify and babelMinify plug-ins, the Terser plug-in is simple to configure and use.

webpack.config.js
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};
Copy the code

In Webpack4 through the TerserWebpackPlugin plugin began to achieve, up to now the latest version of WebPack5 has built-in integration of this plug-in, we do not need additional configuration.

To fit in field

In the webpackage 5.38.1 version, it is found that the same file can be compressed using the TerserWebpackPlugin.

The production environment

Let’s take a look at what the Internet has to say:

Terser compression performance is three times better than Uglify! Nice!

Given that the Terser-webpack-plugin is maintained and has more correctness fixes, it is definitely preferred – it is worth switching even without performance improvements (yet).

The performance comparison

Here’s a comparison from the Kangkang bableMinify document:

Pack the react:

Packaging vue:

Packaging lodash:

Packaging three. Js:

conclusion

Summary: WebPack + Terser compression is the ultimate choice!