JavaScript圧縮
JavaScriptコードを最小化・圧縮します
入力JavaScript
コメントとdebugger文を削除し、コンソールログを保持します。
ブラウザー内で実行されます。コードはこのデバイス内に留まります。
エラーと警告
JavaScript圧縮のヒント
- 圧縮したJavaScriptはデプロイ前にテストしてください。
- デバッグ用に元のソースファイルを保管してください。
- コードが関数名やクラス名に依存する場合は、名前の短縮を慎重に使用してください。
- 圧縮処理をgzipまたはBrotli圧縮と組み合わせてください。
- 本番環境ではビルドツールで圧縮を自動化してください。
圧縮済みJavaScript
圧縮結果
- 元のサイズ
- —
- 圧縮後のサイズ
- —
- 削減バイト数
- —
- 圧縮率
- —
- 行数
- —
処理前と処理後
処理前
—
処理後
—
JavaScript圧縮ツールについて
この無料オンラインJavaScript圧縮ツールは、空白、コメント、不要な文字を削除してJSコードを圧縮し、可能な限り小さな出力を生成します。業界標準のJavaScript圧縮エンジンTerserを採用しており、アロー関数、テンプレートリテラル、クラス、分割代入など、モダンなES6+構文に対応しています。
ニーズに合わせて3段階の圧縮レベルから選べます。「安全」プリセットはコメントと変数名をそのまま残します。「推奨」プリセットはコメントとdebugger文を削除し、コンソールログは残します。「積極的」プリセットは、ファイルサイズを最大限削減するために、名前の完全な短縮、デッドコードの除去、コンソールログの削除を有効にします。
すべての処理はTerserライブラリを使ってブラウザー内で直接実行され、JavaScriptコードがサーバーにアップロードされることは一切ありません。元のサイズ、圧縮後のサイズ、削減バイト数、圧縮率、行数の削減など、詳細な圧縮統計も表示されます。コードを貼り付けてプリセットを選ぶだけで、最適化されたJavaScriptがすぐに得られます。
主な機能
- Terserによる圧縮で、ES6+のJavaScript構文を完全にサポート
- 3つの最小化プリセット: 安全、推奨、積極的の圧縮レベル
- 到達不能なコードパスを取り除くデッドコード除去
- console.logとdebugger文の削除(オプション)
- 積極的モードでの変数名の短縮(マングル)により最大限に圧縮
- 入力に合わせてデバウンス処理を行う、リアルタイムの自動圧縮
- 詳細な圧縮統計：元のサイズ、圧縮後のサイズ、削減バイト数、圧縮率、行数
- 括弧の対応チェックを含む構文検証を内蔵
- 既存のスクリプトを処理できる、JavaScriptファイル(.js)のアップロードに対応
- ワンクリックでクリップボードにコピー、.jsファイルとしてダウンロード
JavaScript圧縮の使い方
- 圧縮レベルを選択：基本的な圧縮には「安全」、バランスの取れた最適化には「推奨」、名前の短縮でファイルサイズを最大限削減するには「積極的」を選びます。
- JavaScriptを入力：テキストエリアにJSコードを貼り付けるか、.jsファイルをアップロードするか、「サンプルを読み込む」をクリックしてデモを試します。
- 処理を待つ：少し待つとツールが自動的にコードを圧縮し、圧縮中は処理インジケーターが表示されます。
- 圧縮結果を確認：統計パネルで、元のサイズと圧縮後のサイズ、削減バイト数、行数など、ファイルサイズがどれだけ減ったかを確認します。
- コピーまたはダウンロード：「コピー」で圧縮したJavaScriptをクリップボードにコピーするか、「ダウンロード」で.jsファイルとして保存します。
活用例
- 本番環境へのデプロイ：デプロイ前にJavaScriptを圧縮して、ファイルサイズを減らし、ページの読み込み速度を改善します。
- パフォーマンス最適化：スクリプトを圧縮して、Core Web Vitals、Time to Interactive、First Contentful Paintの指標を改善します。
- 帯域幅の削減：JSファイルが小さくなると、特にアクセスの多いウェブサイトでホスティングコストとデータ転送量が減ります。
- モバイル最適化：圧縮したJavaScriptはモバイル回線でも速く読み込まれ、モバイルユーザーの体験が向上します。
- 手早い単発の圧縮：ビルドパイプラインの外で手早く最適化したいときに、個別のスクリプトを圧縮します。
- コードレビューと分析：圧縮統計を使って、コードベースにどれだけ最適化の余地があるかを評価します。
- 学習と実験：プリセットレベルごとの圧縮前後の出力を比較して、圧縮の仕組みを理解します。
よくある質問
このツールは無料ですか？
はい、JavaScript圧縮は完全無料で、ファイルサイズや圧縮回数に制限はありません。登録やアカウントも不要です。
データは安全ですか?
圧縮はすべてTerserライブラリを使ってブラウザー内で直接行われます。JavaScriptコードがサーバーに送信されることはなく、ソースコードのプライバシーとセキュリティが完全に守られます。
セーフ、推奨、アグレッシブの各モードの違いは何ですか?
安全モードは、すべてのコメント、コンソールログ、変数名を残したまま基本的な圧縮を行います。推奨モードはコメントとdebugger文を削除します。積極的モードは、名前の短縮、コンソールの削除、デッドコード除去、複数パスの最適化を有効にして、最小の出力を生成します。
名前の短縮でコードが壊れることはありますか?
名前の短縮はローカル変数をより短い名前に置き換えるもので、ほとんどのコードでは安全です。ただし、コードが実行時に関数名や変数名に依存している場合(evalやリフレクションなど)は問題が起きることがあります。積極的モードを使った後は、必ず十分にテストしてください。
TypeScriptやJSXに対応していますか?
このツールが処理するのは標準的なJavaScript(ES6+)です。TypeScriptとJSXは、圧縮の前にプレーンなJavaScriptへコンパイルする必要があります。TypeScriptコンパイラーやBabelでトランスパイルし、その出力をここに貼り付けてください。
ヒントとベストプラクティス
- 元のソースファイルは必ず保管：圧縮していない元のJavaScriptはバージョン管理に保存し、圧縮は本番ビルドのときだけ行います。
- ソースマップを生成：ビルドパイプラインでソースマップを使うと、ブラウザーの開発者ツールで圧縮後のコードをデバッグできます。
- 圧縮後にテスト：特に名前の短縮を伴う積極的モードを使う場合は、圧縮後のコードに対して必ずテストスイートを実行してください。
- サーバー圧縮と併用：JavaScriptの圧縮に、WebサーバーでのgzipまたはBrotli圧縮を組み合わせると、ファイルサイズを最大限削減できます。
- まずは推奨から始める: ほとんどのプロジェクトでは、推奨プリセットが安全性と圧縮のバランスが最も良い設定です。
- 本番環境ではコンソールログを削除：積極的モードを使うと、本番コードに残すべきでないconsole.log文を自動的に取り除けます。