MinificationとUglifyの使用 | コード圧縮と縮小化 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

MinificationとUglifyとは？

Minification（ミニファイ）とは、JavaScriptコードから不要な空白、改行、コメントなどを削除し、ファイルサイズを小さくする処理です。

ファイルサイズが小さくなることで、ブラウザが読み込むデータ量が減り、Webページの表示速度向上につながります。

Uglifyは、コードを短く読みにくい形へ変換する処理を指すことがあります。代表的なツールとして以前はUglifyJSがよく使われていましたが、現在のWebpackでは主にTerserが利用されています。

Minificationのメリット

• ファイルサイズを削減できる：空白、改行、コメントなどを削除できる。
• 読み込み速度を改善できる：通信量が減り、ページ表示が速くなりやすい。
• 本番環境向けに最適化できる：不要なコードの削除や圧縮が行われる。
• キャッシュ効率を高めやすい：ビルドされたファイルを配信しやすくなる。

UglifyJSによるコードの縮小化

UglifyJSは、JavaScriptコードを圧縮したり、変数名を短くしたりするためのツールです。

ただし、現在のJavaScript開発では、ES6以降の構文に対応しやすいTerserが使われることが多くなっています。

Webpackの本番ビルドでも、標準的にはTerserによる最適化が利用されます。

MinificationとUglifyの使い方

ここでは、Webpackを使ってJavaScriptをミニファイする基本的な流れを紹介します。

ステップ1：Webpackをインストールする

// ターミナルで実行

npm install --save-dev webpack webpack-cli

ステップ2：productionモードを設定する

Webpackでは、modeを"production"にすると、自動的にミニファイなどの最適化が有効になります。

const path = require("path");

module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        clean: true
    }
};

mode: "production"を指定するだけで、本番向けの圧縮・最適化が行われます。

ステップ3：Terserを明示的に設定する

細かく設定したい場合は、terser-webpack-pluginを利用します。

// ターミナルで実行

npm install --save-dev terser-webpack-plugin

Webpackの設定例です。

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        clean: true
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin()
        ]
    }
};

この設定により、Terserを使ってJavaScriptを圧縮できます。

MinificationとUglifyの違い

MinificationとUglifyの実例

元のJavaScriptコード

function sayHello(name) {
    console.log("Hello, " + name);
}

sayHello("World");

Minification後の例

function sayHello(name){console.log("Hello, "+name)}sayHello("World");

空白や改行が削除され、コードが短くなっています。

変数名短縮後の例

function sayHello(o){console.log("Hello, "+o)}sayHello("World");

引数名が短縮され、さらにファイルサイズを小さくできます。

注意点

• ミニファイ後のコードは人間には読みにくくなる。
• 本番環境ではミニファイし、開発環境では読みやすいコードを使う。
• デバッグしやすくするにはSource Mapを利用する。
• 現在はUglifyJSよりもTerser、esbuild、SWCなどが使われることが多い。

まとめ

• MinificationはJavaScriptコードを圧縮してファイルサイズを小さくする処理である。
• Uglifyは変数名の短縮などにより、さらにコードを小さくする処理を指すことがある。
• Webpackではmode: "production"にするだけでミニファイが有効になる。
• 現在はUglifyJSよりもTerserがよく利用される。
• 本番環境ではミニファイを行い、開発時はSource Mapを使うとデバッグしやすい。