1. 程式人生 > >前端打包壓縮對比

前端打包壓縮對比

log plugin webp gif proc abi ebp fine reac

使用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好一些。

前端打包壓縮對比