前端打包压缩对比

Posted 2020-09-22 浮生半瓶醋

使用ES6 和 React写得前端，使用babel转化成ES5，然后压缩打包。

某一版本下的打包压缩对比

const BabiliPlugin = require(‘babili-webpack-plugin‘);
const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin‘);


new BabiliPlugin(),
new webpack.DefinePlugin({"process.env.NODE_ENV":JSON.stringify("production")}),
new UglifyJSPlugin(),

 

Babili: 1.04M,Babli + DefinePlugin:994KB;

Uglify: 1.03M,Uglify+ DefinePlugin:981KB;

从Babili到Uglify+ DefinePlugin能减少60K左右，虽然据说如果直接打包压缩ES6用Babili更好，

但是，目前为了支持大多数环境，还是转化成ES5好一点，然后在ES5下用Uglify好一些。