Webpack 的 tree-shaking 进阶之路（三）webpack 打包 + terser 实现 tree-sh

这是我参与更文挑战的第 5 天，活动详情查看：更文挑战

Lynne，一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中，热爱生活与技术。

前言

webpack 打包 + terser 实现 tree-shaking 的分析来了！

terser 是一个用于 ES6+ 的 JavaScript 解析器和 mangler/compressor 工具包。

如果你看过这个 issue，就会知道放弃 uglify 而投向 terser 怀抱的人越来越多，其原因也很清楚：

uglify 不再进行维护且不支持 ES6+ 语法
webpack 默认内置配置了terser插件实现代码压缩

同时，有网友表示：Terser 似乎将压缩速度提高了 3 倍，而从 uglify 切换到 terser 只花了大约 2 分钟，这实在太划算了不是吗？二话不说搞起来~~

配置使用 - TerserWebpackPlugin

同 uglify 和 babelMinify 插件一样，terser插件配置使用也十分简单。

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

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

在 webpack4 中通过 TerserWebpackPlugin 插件开始实现，到现在最新版本的 webpack5 已经内置集成了这个插件，不需要我们再额外配置。

上手实操

直接在 webpack5.38.1 版本中实践，打包之后发现，同样的文件使用 TerserWebpackPlugin 插件压缩后还是比较有优势的：

生产环境

生产terser.png

再让我们来看看网友们是怎么说的：

大意是 terser 压缩性能相较于 uglify 提升了三倍！Nice！

大意是说：鉴于 terser-webpack-plugin 得到维护并且有更多的正确性修复，绝对是首选 - 即使没有性能改进（还），也值得切换。

性能对比

再来康康 bableMinify 文档中给出的对比吧：

打包 react：

打包 vue：

打包 lodash：

打包three.js：

总结

一句话总结：webpack打包 + terser 压缩才是最终的不二之选！