Javascriptを縮小するための14のツール

Javascriptの縮小化は、 スクリプトをはるかに小さなフットプリントに圧縮します。. 人間の可読性を失いますが、かなりの帯域幅を節約します - 最終的には, Javascriptはあなたのブラウザではなくあなたのユーザ向けのものです.

ほとんどのプロダクションWebサイトはJavascriptの縮小を使用しますが、これを達成する方法は大きく異なります。単純なオンラインコンバータから、より包括的なGUIツール、コマンドラインインターフェイスまで、私たちの選択肢は多種多様です。この記事では見ていきます Javascriptの縮小の仕組み, どのようにしてそれを私たちのワークフローに組み込むことができるのか、そして縮小することの長所と短所は何ですか。.

縮小のしくみ

コードを縮小したときに何が起こるかを学ぶための最善の方法はUglifyJS Githubリポジトリを見てみることです。このスクリプトは、GruntのようなGUIツールやコマンドラインツールと同様に、多くのオンラインコンバーターで使用されています。コードを短くするために適用される変換をいくつか示します。

不要なスペースを削除
変数名を通常は1文字に短縮します
連続するvar宣言を結合します
可能な場合は配列をオブジェクトに変換します
if文を最適化します
単純な定数式を計算します
等.

簡単な例として、これは与えられたテキストを書き出す関数です。.

 関数hello（テキスト）document.write（テキスト）;

こんにちは（ '記事へようこそ'）;

これを小さくするとどうなるか見てみましょう。スペースとインデントの削除とテキスト変数の短縮に注意してください。.

function hello（e）document.write（e） hello（ "Welcome to the article"）

Javascript Minification Tools

Javascriptを縮小するために使用されるツールは、大きく3つのグループに分類できます。オンラインツール、GUIツール、およびコマンドラインツールです。.

オンラインツールでは、通常、コードを貼り付けて結果をすぐにコピーするだけです。.
多くの場合、GUIツールにはもっと多くの機能が含まれています。 JSの縮小は、彼らがしていることのほんの一部です.
コマンドラインツールも通常より包括的で、モジュールとして縮小を提供します。.

オンラインツール

javascript-minifier.comは、APIを備えた見栄えの良いツールです。
Online YUI Compressorは、YUIコンプレッサーを使用する、より強力なツールです。多くのオプションとCSS縮小機能があります。
jscompress.comは飾り気のない小型化ですが、それは仕事をやり遂げる
jsmini.comは別のシンプルだが完全に使えるオプションです

オンラインツールの素晴らしいところは、それらを使って作業できる速度です。複雑なGUIおよびコマンドラインツールはより迅速に最小化されますが、正しく機能するようにプロジェクトを設定する必要があります。これらのツールのマイナス面は、それらが主に カスタマイズをほとんど、またはまったく提供しない, 少なくともコマンドラインツールと比べると.

GUIツール

コアラは、LESS、SASSのコンパイル、JSの縮小などのための無料ツールです。
Preprosはあなたにさらに多くのオプションを提供するクロスプラットフォームの有料アプリです。
Codekitは私が選んだアプリです。これは、コードのコンパイル、縮小、プレビューサーバー、強力なパッケージ管理、その他多数の機能を提供する有料のMac専用アプリです。
AjaxminGuiはあなたのJSを縮小するための無料の、単一目的のWindowsツールです。
UltraMinifierは、ドラッグアンドドロップでCSSとJSを縮小するOS X用の無料アプリです。
小さいはあなたのためにファイルを縮小して連結するOS Xツールです。

ここでは2種類のGUIアプリケーションについて説明しました。簡単なワンステップの縮小アプリケーションは、彼らのオンライン版とよく似ています。ファイルをドラッグアンドドロップするだけなのでセットアップは不要です。それは言った、彼らは カスタマイズを実質的に提供しない.

より大きなGUIツール（Prepros、Koala、Codekit）はプロジェクトを管理し、あなたに圧縮のためのもう少し多くの選択肢を与えるのに優れていますが、彼らはそう 少しセットアップが必要. 2秒のオンラインまたは単純なGUIツールのプロセスと比較して、JSをすばやく縮小するには約20秒のセットアップが必要です。.

一方、彼らはあなたに一般的に多くの機能を提供し、自動化を提供します。 JSファイルは保存するたびに縮小されます。手動で縮小する必要はありません。あなたがJavascriptで何かを開発しているなら、これは間違いなく行く方法です。.

コマンドラインツール

Minifyは、コマンドラインからJSを縮小したいが、GruntやGulpに派手なものを設定したくない人のためのものです。
前述したUglify.jsは、スタンドアロンのコマンドラインツールとしても利用できます。
Gruntには、grunt-contrib-uglifyという名前のJavascript縮小の拡張機能があります。
Gulpは、gulp-uglifyを介してUglify.jsを使用したJSの縮小化も行います。

コマンドラインツールはLinuxオタクだけのものではありません。私は端末が得意ではありませんが、GruntやGulpのようなものを設定するのは、彼らの優れたドキュメントを通して簡単です。コマンドラインツールの利点は、オプションから出力まで、あなたが持っている素晴らしい柔軟性です。.

一方で、 学習曲線のビット. コマンドラインに慣れる あなたは制限的だと思ういくつかの（あまりではない）練習を取ります メリットを享受する前に.

概要

Web開発に慣れていない場合は、最初の3つのGUIツールのいずれかをお勧めします。それらはあなたがプロジェクトを一般的に管理するのを助け、単なるJS縮小よりもはるかに多くを提供します。.

あなたが経験豊富なプロなら、あなたはおそらく調べるべきです うなり声またはGulp これらは自動化タスクを最も制御できるためです。スクリプトをすばやく縮小する必要がある場合 プロジェクトを設定せずに, コマンドラインツールはあなたに多くの時間を節約することができます.

ツールの各グループには、それぞれ長所と短所があり、実際には、いずれかの時点で別の方法を使用することになります。実稼働環境では、JavaScriptとCSSを常に縮小する必要があることに注意してください。!