Webpack/Terser/SWC/Uglify/Esbuild压缩代码的不同

1,717 阅读1分钟

原始代码

// index.js
const add = (a, b) => a + b
const a = 3
let b = 4
console.log(add(a, b))

Webpack配置

// webpack.config.js

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    mode: 'production',
    entry: './index.js',
    output: {
        path: require('path').resolve('dist'),
        filename: 'index.js'
    },
    // optimization: {
    //     // minimize: true,
    //     minimizer: [
    //         new TerserPlugin({
    //             test: /\.js(\?.*)?$/i,
    //             minify: TerserPlugin.terserMinify,
    //             // minify: TerserPlugin.uglifyJsMinify,
    //             // minify: TerserPlugin.esbuildMinify,
    //             // minify: TerserPlugin.swcMinify,
    //             terserOptions: {},
    //         }),
    //     ]
    // }
}
}

以下通过更改optimization.minimizer,并运行npx webpack,来查看不同压缩插件带来的效果。

Webpack内置压缩

console.log(7);

Terser

console.log(((o,l)=>o+l)(3,4));

Uglify

console.log(7);

SWC

console.log(7)

Esbuild

(()=>{var _={};console.log(((a,o)=>a+o)(3,4))})();

添加模块引用

index.js更改一下:

import { add } from './mod'
const a = 3
let b = 4
console.log(add(a, b))

Webpack

(()=>{"use strict";console.log(7)})();

Terser

(()=>{"use strict";console.log(((o,s)=>o+s)(3,4))})();

Uglify

(()=>{"use strict";console.log(7)})();

SWC

console.log(7)

EsBuld

(()=>{"use strict";var s={};console.log(((a,o)=>a+o)(3,4))})();