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!