Webpack構成におけるミニファイの方法

Terserプラグインを使用する方法: Terserは、JavaScriptの圧縮および最適化のための優れたツールです。Webpackの構成ファイルで、以下のようにTerserプラグインを追加します。

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  // ...他の設定...
  optimization: {
    minimizer: [new TerserPlugin()],
  },
};

UglifyJsプラグインを使用する方法: UglifyJsは、古いバージョンのWebpackで広く使用されていましたが、Terserに置き換えられました。ただし、互換性のために使用する場合もあります。以下のようにUglifyJsプラグインを追加します。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  // ...他の設定...
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

optimization.splitChunksを使用する方法: Webpack 4以降では、optimization.splitChunksを使用することで、共通のコードを分割し、重複を減らすことができます。以下のように設定ファイルに追加します。

module.exports = {
  // ...他の設定...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

これらの方法を使用すると、Webpackの設定でミニファイを実行できます。これにより、ビルドされたファイルのサイズが削減され、アプリケーションのパフォーマンスが向上します。