JavaScript の最小化
縮小または 圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。 開発およびデバッグ中、これらの文字によりコードが読みやすくなります。 実稼働段階では、転送されるコードのサイズを増やすだけです。
ほとんどの場合、圧縮はビルドプロセスのステップとして、 webpack(英語) などのビルドツールを使用して実行されます。 ビルドツールを使用していない場合は、 terser(英語) などのスタンドアロンツールを使用できます。
コードを自動的に縮小するには、縮小ツールをインストールし、ファイルへの変更を追跡して縮小ツールを実行する File Watcher を構成する必要があります。
デフォルトでは、File Watcher のスコープ内の JavaScript ファイルが変更されて保存されるとすぐに、縮小が開始されます。 ツールを呼び出す他のイベントを指定することもできます。 詳細については、 File Watchers を参照してください。
生成された縮小コードは、ソース JavaScript ファイルの名前と拡張子 min.js を持つ別のファイルに保存されます。 この生成されたファイルの場所は、 新規ウォッチャーダイアログの リフレッシュする出力パス フィールドで定義されます。 ただし、 プロジェクトツリー では、縮小コードを含むファイルは、ノードとして表示されるソース JavaScript ファイルに表示されます。 このデフォルトの表示を変更するには、 プロジェクト ツールウィンドウ (Alt+1) で ファイルのネストを構成してください。
以下の例は、terser を使用して IntelliJ IDEA から JavaScript コードを縮小する方法を示しています。
サンプル: terser で JavaScript を圧縮する
コードを自動的に圧縮するには、terser をインストールし、ファイルの変更を追跡してツールを実行する UglifyJS ファイルウォッチャーを構成する必要があります。
デフォルトでは、File Watcher のスコープ内の JavaScript ファイルが変更されて保存されるとすぐに、縮小が開始されます。 terser を呼び出す他のイベントを指定することもできます。 詳細については、 File Watchers を参照してください。
生成された縮小コードは、ソース JavaScript ファイルの名前と拡張子 min.js を持つ別のファイルに保存されます。 この生成されたファイルの場所は、 新規ウォッチャーダイアログの リフレッシュする出力パス フィールドで定義されます。 ただし、 プロジェクトツリー では、縮小コードを含むファイルは、ノードとして表示されるソース JavaScript ファイルに表示されます。 このデフォルトの表示を変更するには、 プロジェクト ツールウィンドウ (Alt+1) で ファイルのネストを構成してください。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript と TypeScript と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに 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.*パターンを使用してカスタムスコープを構成します。
次に、 スコープ リストから新しいスコープを選択します。
その他のデフォルトの File Watcher 設定を受け入れるか、必要に応じて File Watchers の説明に従って再設定し、 OK をクリックします。 IntelliJ IDEA をクリックすると、新しい File Watcher がリストに追加される File Watchers ページに戻ります。
有効 チェックボックスが選択されていることを確認します。
デフォルトでは、File Watcher は現在のプロジェクトで使用できます。 他のプロジェクトで使用するには、 レベル リストから グローバル を選択します。
さらに簡潔に
選択したスコープから JavaScript ファイルを変更すると、IntelliJ IDEA は自動的に terser を実行します。