WebpackのTerserPluginついて

はじめ

ウェブパックとterserを使用してビルドする時のJS容量の変化測定

テスト環境

React 18
webpack 5.97.1
webpack-bundle-analyzer 4.10.2

1番設定
console.log + comment 除去

module.exports = override(
    (config) => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(new BundleAnalyzerPlugin());
            config.optimization.minimizer = [
                new TerserPlugin({
                    terserOptions: {
                        compress: {
                            drop_console: true,
                        },
                        output: {
                            comments: false,
                        },
                    },
                }),
            ];
        }
        return config;
    }
);

2番設定
console.log + comment 保持

module.exports = override(
    (config) => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(new BundleAnalyzerPlugin());
            config.optimization.minimizer = [
                new TerserPlugin({
                    terserOptions: {
                        compress: {
                            drop_console: false,
                        },
                        output: {
                            comments: true,
                        },
                    },
                }),
            ];
        }
        return config;
    }
);

결과

使ってなかった場合

stat size 484.86 KB
parsed size 195.09 KB
Gzipped size 60.45 KB

使う場合

stat size 484.86 KB
parsed size 180.18 KB
Gzipped size 57.33 KB