Home-theater-designers
私たちは皆そこにいました、あなたは学びました 素晴らしいウェブサイトを構築する方法 、しかし、一度公開すると、耐えられないほど遅くなります。
JavaScriptを縮小することは、ウェブサイトの応答時間を短縮する1つの方法です（ HTMLの圧縮 ）、そして幸いなことに、それは簡単なプロセスです。今日はあなたが知る必要があるすべてをお見せします。
縮小とはどういう意味ですか？
のプロセス 縮小化 （また 縮小化 ）は単純な概念です。 JavaScriptやその他の言語でコードを書く場合、人間がコードを理解しやすくするためにのみ必要な機能がたくさんあります。コンピューターは、変数の名前や角かっこで囲まれた間隔を気にしません。例えば。
コードを縮小することで、ファイルサイズを大幅に減らすことができます。したがって、ファイルが小さいほど、ユーザーがダウンロードするのが速くなります。 JavaScriptを1行か2行しか記述していない場合、目立った改善はおそらくないでしょう。ただし、大量のコードを記述している場合、またはjQueryなどの大規模なライブラリを使用している場合は、パフォーマンスが大幅に向上し、ファイルサイズを大幅に削減できます。
次のような外部CDNからコードをロードする場合 Googleがホストするライブラリ 、縮小されたコードを使用しました。
ノートパソコンの過熱を防ぐ方法
縮小されたコードはどのように見えますか？
いくつかの例を見てみましょう。小さなコードベースでの縮小化の影響を確認するのは難しいので、長い間、事前に謝罪します。
ここにいくつかあります 縮小されていない PythonとJavaScriptでJSONを使用するためのガイドからのJavaScript：
// setup some JSON to use
var cars = [
{ 'make':'Porsche', 'model':'911S' },
{ 'make':'Mercedes-Benz', 'model':'220SE' },
{ 'make':'Jaguar','model': 'Mark VII' }
];
window.onload = function() {
// setup the button click
document.getElementById('theButton').onclick = function() {
doWork()
};
}
function doWork() {
// ajax the JSON to the server
$.post('receiver', cars, function(){
});
// stop link reloading the page
event.preventDefault();
}縮小されたコードは次のとおりです。
function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};コードのこの縮小バージョンは 39パーセント 小さい。この例では、変数名は同じままですが、すべての空白とコメントが削除されています。
jQueryのガイドからの別の例を次に示します。
// dfd == deferred
var dfd = $.Deferred();
function doThing() {
$.get('some/slow/url', function() {
dfd.resolve();
});
return dfd.promise();
}
$.when(doThing()).then(function(){
console.log('YAY, it is finished');
});縮小されたコードは次のとおりです。
function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});今回は 26パーセント 削減-これは、このようなマイナーなコードブロックには依然として非常に適しています。
これが、JavascriptとDOMのガイドの最後の例です。
//declare a new variable to hold a new h1 element
var newHeading = document.createElement('h1');
//add the text node to the document
var h1Text = document.createTextNode('Heading Level 1');
//make it a child node of the new heading
newHeading.appendChild(h1Text);
//append this as a child of element defined as 'bt'
document.getElementById('bt').appendChild(newHeading);あることに注意してください 多くの コメントと空白の。縮小版では、ファイルサイズが次のように縮小されました 52パーセント ：
InstagramであなたのDMをオンラインでチェックする方法
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);縮小版と比較した、いくつかの一般的なJavaScriptライブラリのサイズは次のとおりです。
これらのライブラリの一部は、圧縮すると大幅なサイズの縮小を示します（ 〜80パーセント ）、他の人はそれほど良くありませんが（ 〜40パーセント ）。とは言うものの、保存すると、ユーザーにとってWebサイトが高速になり、Webサーバーへの負担が軽減されます。
どのように縮小しますか？
これで、それがどのように機能し、どのように見えるかがわかったので、その方法を詳しく見ていきましょう。心配しないでください。手動でコードを変更する必要はまったくありません。プロセスを処理するさまざまなツールが無料で利用できます。
これらはいくつかの方法で機能します。ほとんどのオンラインツールでは、コードをコピーして貼り付けることができます。コードは処理され、ページに返されます。これらのツールを使用すると、複数のファイルをアップロードすることもできます。
これがオンラインツールの簡単なまとめです。それらはほとんど同じように機能するので、どちらを選択するかについてあまり心配する必要はありません。
JSCompress -私は個人的にこのウェブサイトを最も簡単に使用しています。実行は高速で、ビルドに使用したツールも表示されます。
JavaScriptミニファイア -このツールはうまく機能しますが、APIとして本当に輝いています。これにより、既存のWebサイトの上に独自の統合またはサービスを構築できます。
JavaScript Minifier-同じ名前の別のWebサイトであるこのツールは、非常にシンプルです。オプションやメニューはなく、ボタンは1つだけです。
縮小する -このウェブサイトは素晴らしく見え、開発者はここの詳細に明らかに注意を払っています。
このリストは永遠に続く可能性があります。ウェブサイトを縮小するためのオンラインツールは非常にたくさんあるので、間違いはありません。
縮小ツールは、コマンドラインツールまたはプラグインとしても存在します。 JavaScriptエディター 。これらのツールは、多くの場合、はるかに高速に使用でき、既存のコードで「機能する」だけです。コピーして貼り付ける必要はありません。また、同じファイルに含まれている可能性のあるHTMLまたはCSSからJavaScriptを抽出する必要もありません。
Microsoft Visual Studioを使用している場合、 バンドラーとミニファイア マーケットプレイスからの拡張機能のインストール数は600,000を超えています。それだけでなく、定期的に更新され、 GitHubで入手可能 。
あなたがのファンなら 崇高なテキスト 私のように、それから 縮小する パッケージはあなたが望むものです。インストール数が61,000を超える非常に人気のあるパッケージであり、 GitHubで入手可能 、オープンソースプロジェクトに貢献したい場合。
最後に、あなたが PyCharm ユーザー、あなたはできます 統合するように構成する 次のような多くの一般的な圧縮ツールを使用して直接 YUIコンプレッサー 。これらのツールの多くは、上記のオンラインツールに直接電力を供給します。
警告
三 もっている キャッチになるために正しいですか？完璧なものはありません。ええ、はい、1つの問題がありますが、それはかなりマイナーで、簡単に回避できます。
縮小されたコードを元の状態に復元することはできません。
コードを縮小すると、元の形式は失われます。大きな変更を簡単に行うことを希望する場合は、そのコピーを保持する必要があります。バージョン管理を使用するだけでは不十分です。
それは可能ですが 縮小しない あなたのコード、それは二度とまったく同じになることはありません。一つには、あなたの貴重なコメントはすべて失われます。
これは大きな問題ではありませんが、コーディングするときは注意する必要があります。原則として、 非圧縮 >開発と 圧縮 >生産。
これで、JavaScriptの縮小について知っておくべきことがすべてわかりました。コードの縮小は、サーバーからパフォーマンスを引き出す方法の1つであり、すべての大規模なWebサイトがそれを実行しています。
コードを縮小するためにどのツールを使用していますか？気になりませんか？以下のコメントでお知らせください！
画面が逆さまになっているウィンドウ10
画像クレジット：Shutterstock経由のNavinTar
共有 共有 つぶやき Eメール これらのWindowsファイルとフォルダを削除して、ディスク領域を解放しますWindowsコンピュータのディスク領域をクリアする必要がありますか？ディスクスペースを解放するために安全に削除できるWindowsファイルとフォルダは次のとおりです。
次を読む 関連トピック- プログラミング
- JavaScript
- Java
- ウェブデザイン
Joeは、英国のリンカーン大学でコンピュータサイエンスを卒業しています。彼はプロのソフトウェア開発者であり、ドローンを飛ばしたり音楽を書いたりしていないときは、写真を撮ったりビデオを制作したりしていることがよくあります。
ジョーコバーンのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください