原始代码
// 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))})();