JavaScript の最小化

縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。

ほとんどの場合、圧縮はビルドプロセスのステップとして、 webpack(英語) などのビルドツールを使用して実行されます。ビルドツールを使用していない場合は、 terser(英語) などのスタンドアロンツールを使用できます。

コードを自動的に縮小するには、縮小ツールをインストールし、ファイルへの変更を追跡して縮小ツールを実行する File Watcher を構成する必要があります。

デフォルトでは、File Watcher のスコープ内の JavaScript ファイルが変更されて保存されるとすぐに、縮小が開始されます。ツールを呼び出す他のイベントを指定することもできます。詳細は File Watchers でご確認ください。

生成されたミニファイされたコードは、ソース JavaScript ファイルの名前と拡張子 min.js を持つ別のファイルに保存されます。この生成ファイルの場所は、リフレッシュする出力パスフィールドが新規ウォッチャーダイアログで定義されています。ただし、プロジェクトツリーでは、ミニファイされたコードを含むファイルは、ノードとして表示されるソース JavaScript ファイルに表示されます。このデフォルトの表示を変更するには、エクスプローラーツールウィンドウ (Alt+1) でファイルのネストを設定します。

以下の例では、terser を使って JetBrains Rider から JavaScript コードを縮小する方法を示しています。

サンプル: terser で JavaScript を圧縮する

コードを自動的に圧縮するには、terser をインストールし、ファイルの変更を追跡してツールを実行する UglifyJS ファイルウォッチャーを構成する必要があります。

デフォルトでは、File Watcher のスコープ内の JavaScript ファイルが変更されて保存されるとすぐに、縮小が開始されます。 terser を呼び出す他のイベントを指定することもできます。詳細は File Watchers でご確認ください。

始める前に

お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグイン管理を参照してください。
設定で File Watchers バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに File Watchers と入力します。プラグインの詳細については、プラグイン管理を参照してください。

インストールの簡潔化

組み込みターミナル (Alt+F12) で次のように入力します。
npm install --save-dev terser
詳細については、 npmjs 公式 Web サイト(英語)を参照してください。

File Watcher を作成する

設定ダイアログ（Ctrl+Alt+S ）で、ツールの File Watchers をクリックします。開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、 Alt+Insert を押して、リストから UglifyJS（アグリファイジェーエス）定義済みテンプレートを選択します。
新規ウォッチャーダイアログが開きます。
プログラムフィールドで、terser 実行可能ファイルの場所を指定します。パスを手動で入力するか、をクリックして、表示されるダイアログでファイルの場所を選択します。
デフォルトで、スコープ. フィールドにはプロジェクトファイルが表示されます。すでに縮小されたファイルの縮小を回避するには、 file:*js&&!file:*.min.* パターンでカスタムスコープを構成し、 Define a new scope の説明に従ってください。
次に、スコープリストから新しいスコープを選択します。
他のデフォルトのファイルウォッチャー設定はそのまま受け入れるか、必要に応じて File Watchers の説明どおりに再設定し、 OK をクリックします。 JetBrains Rider をクリックすると、新しいファイルウォッチャーがリストに追加された File Watchers ページに戻ります：
有効チェックボックスが選択されていることを確認してください。
デフォルトでは、File Watcher は現在のプロジェクトで使用できます。他のプロジェクトで使用するには、レベルリストからグローバルを選択します。

さらに簡潔に

選択したスコープから JavaScript ファイルを変更すると、JetBrains Rider は自動的に terser を実行します。

terser を他のイベントで実行するように、高度なオプションの設定の説明に従って構成できます。

2026 年 6 月 12 日