Bagian Minification JavaScript II

by Nicholas C. Zakas oleh Nicholas Zakas C. di abadikan inchubunaken

Published in: Scripting , Project Management and Workflow Diterbitkan di: Scripting , Manajemen Proyek dan Workflow
Discuss this article » Diskusikan artikel ini »
| Share this article » | Berbagi artikel ini »

In my last article , I discussed the basics of better JavaScript minification with YUI Compressor. Dalam saya artikel terakhir , saya membahas dasar-dasar minification JavaScript lebih baik dengan YUI Compressor. As many readers astutely pointed out, this boiled down to, “avoid using eval() and the with statement.” The article's premise was to ensure you understood how not to shoot yourself in the foot when using the YUI Compressor. Seperti banyak pembaca cerdik menunjukkan, ini direbus sampai, "menghindari menggunakan eval() dan dengan pernyataan Compressor. Artikel itu "premis adalah untuk memastikan Anda tidak mengerti bagaimana untuk menembak diri sendiri di kaki bila menggunakan YUI itu. Previously, we learned what not to do. Sebelumnya, kita belajar apa yang tidak boleh dilakukan. This article emphasizes what you should do to take advantage of YUI Compressor's best feature for minification: local variable name replacement. Artikel ini menekankan apa yang harus Anda lakukan untuk mengambil keuntungan dari fitur terbaik Kompresor YUI untuk minification: penggantian nama variabel lokal.

Variable name replacement Penggantian nama variabel

Replacing local variable names with short (one or two character) alternatives is the biggest byte savings that YUI Compressor offers. Mengganti nama variabel lokal dengan singkat (satu atau dua karakter) alternatif adalah tabungan byte terbesar yang menawarkan YUI Compressor. Frequently, variable naming is a source of angst in coding, but fundamentally, variable names only have meaning to humans attempting to understand the code. Sering, penamaan variabel adalah sumber kecemasan dalam pengkodean, tetapi pada dasarnya, nama-nama variabel hanya memiliki makna untuk manusia mencoba memahami kode. Once you're sure that a human doesn't need to interpret the code, variables simply become generic placeholders for values. Setelah Anda yakin bahwa manusia tidak perlu menafsirkan kode, variabel hanya menjadi penampung generik untuk nilai.

When deploying JavaScript out into production, your only consumer is the browser, and the browser couldn't care less about variable names. Ketika JavaScript deploying ke produksi, konsumen hanya Anda adalah browser, dan browser tidak peduli tentang nama-nama variabel. For that reason, the YUI Compressor replaces these variable names with shorter versions. Untuk alasan itu, YUI Compressor menggantikan nama-nama variabel dengan versi yang lebih pendek. Since most debugging occurs on development boxes with unminified code, this typically doesn't affect the engineer's job. Sejak debugging paling terjadi pada kotak pembangunan dengan kode unminified, ini biasanya tidak mempengaruhi pekerjaan insinyur. However, if you get stuck needing to debug something deeply in production, there are ways to make it easier to debug minified code . Namun, jika Anda terjebak perlu debug sesuatu yang sangat dalam produksi, ada cara untuk membuatnya lebih mudah untuk debug kode minified .

What can't be replaced? Apa yang tidak bisa diganti?

Before talking about techniques for optimal variable replacement, it's important to understand the parts of code that cannot be replaced. Sebelum bicara tentang teknik untuk penggantian variabel yang optimal, penting untuk memahami bagian-bagian kode yang tidak dapat diganti. The following are frequently thought to be replaceable: Berikut ini adalah sering dianggap dapat diganti:

property names ( object.property ), nama properti ( object.property ),
keywords ( if , var , return , etc.), and kata kunci ( if , var , return , dll), dan
global variables. variabel global.

Many developers don't stop to think about the number of times a property is accessed or how many JavaScript keywords they use when writing code. Banyak pengembang tidak berhenti untuk berpikir tentang berapa kali sebuah properti diakses atau berapa banyak JavaScript kata kunci yang mereka gunakan saat menulis kode. Considering property names, keywords, and global variables within your code's structure can result in a much greater minification ratio. Mengingat nama properti, kata kunci, dan variabel global dalam struktur kode Anda dapat menghasilkan rasio minification jauh lebih besar.

Property names Nama Properti

While the YUI Compressor can perform variable replacement on local variables, there is nothing it can do about properties. Sedangkan YUI Compressor dapat melakukan penggantian variabel pada variabel lokal, tidak ada yang dapat dilakukan mengenai properti. Since property names are defined on the object itself, there is no way to safely detect or replace them. Karena nama properti yang didefinisikan pada obyek itu sendiri, tidak ada cara aman untuk mendeteksi atau mengganti mereka. That means code that accesses many properties will end up larger than code that doesn't. Itu berarti kode yang mengakses banyak properti akan berakhir lebih besar dari kode yang tidak. For example: Sebagai contoh:

(Line wraps marked » —Ed. ) (Line wraps ditandai »-Ed.)

 function toggleImage(id){ if (document.getElementById(id).src.indexOf("1.png") > -1){ document.getElementById(id).src = document.getElementById »
(id).src.replace("1.png", "2.png"); } }

This function toggles the display of an image, changing it from one image to another by manipulating the src property. Fungsi ini matikan tampilan gambar, mengubah dari satu gambar lain dengan memanipulasi src properti. Unfortunately, the resulting minified function is nearly as large (168 bytes vs. 205 bytes): Sayangnya, fungsi minified yang dihasilkan hampir sama besar (168 byte vs 205 bytes):

 function toggleImage(a){ if(document.getElementById(a).src.indexOf »
("1.png")>-1){document.getElementById(a).src=document.getElementBy »
Id(a).src.replace("1.png","2.png")}};

Note that document.getElementById(a).src is repeated three times, which is almost exactly the same as the original (with the exception of the variable name). Perhatikan bahwa document.getElementById(a).src diulang tiga kali, yang hampir persis sama seperti aslinya (dengan pengecualian nama variabel).

When the same object property is used frequently, the best strategy is to store the property's value in a local variable and then use the local variable. Ketika properti objek yang sama sering digunakan, strategi terbaik adalah untuk menyimpan nilai properti di sebuah variabel lokal dan kemudian menggunakan variabel lokal. The previous code can be rewritten as: Kode sebelumnya dapat ditulis ulang sebagai:

 function toggleImage(id){ var image = document.getElementById(id); if (image.src.indexOf("1.png") > -1){ image.src = image.src.replace("1.png", "2.png"); } }

Not only is this version of the code smaller than the previous (185 bytes), the minified version is even smaller: Tidak hanya versi kode yang lebih kecil daripada (sebelumnya 185 byte), versi minified lebih kecil:

 function toggleImage(b){var a=document.getElementById(b);if(a.src. »
indexOf("1.png")>-1){a.src=a.src.replace("1.png","2.png")}};

This code is only 126 bytes—much smaller than the original code and smaller still than the original minified code. Kode ini hanya 126 byte-jauh lebih kecil daripada kode asli dan masih lebih kecil dari kode minified asli. These savings come without any change in functionality, just a bit of refactoring. Tabungan ini datang tanpa ada perubahan dalam fungsi, hanya sedikit refactoring. It's worth noting that this change also improves the runtime performance because document.getElementById() doesn't have to be called three times. Ini perlu dicatat bahwa perubahan ini juga meningkatkan kinerja runtime karena document.getElementById() tidak harus disebut tiga kali.

Always keep in mind that anything that appears after a dot in JavaScript ( object.property ) cannot be minified any further. Selalu diingat bahwa segala sesuatu yang muncul setelah sebuah titik dalam JavaScript ( object.property ) tidak dapat minified lebih jauh. When you minimize the number of dots in your code, you also minimize the overall size once the code is minified. Bila Anda meminimalkan jumlah titik dalam kode Anda, Anda juga memperkecil ukuran keseluruhan setelah kode ini minified.

Keywords Kata kunci

When you look at any large JavaScript file, you'll notice many keywords being used. Ketika Anda melihat file JavaScript besar, Anda akan melihat banyak kata kunci yang digunakan. Keywords such as var , if , for , and return are all regularly used to create the desired functionality. Kata kunci seperti var , if , for , dan return semua teratur digunakan untuk membuat fungsi yang diinginkan. The problem is that these keywords can be overused, and as such, affect the minified file size. Masalahnya adalah bahwa kata kunci tersebut dapat digunakan secara berlebihan, dan dengan demikian, mempengaruhi ukuran file minified. The two most overused keywords are var and return . Dua kata kunci yang paling sering digunakan adalah var dan return .

The var statement defines one or more variables. The var pernyataan mendefinisikan satu atau lebih variabel. Sometimes you'll see code that looks like this: Kadang-kadang Anda akan melihat kode itu terlihat seperti ini:

 var image = document.getElementById("myImage"); var div = document.getElementById("myDiv");

This code defines two variables, one right after the other. Kode ini mendefinisikan dua variabel, satu tepat setelah yang lain. I often see this pattern for 10 or more variables in a row. Saya sering melihat pola ini selama 10 atau lebih variabel dalam satu baris. Doing so artificially inflates the size of your code because multiple var statements can be combined into one using a comma operator: Melakukan hal artifisial kantung ukuran kode Anda karena beberapa var laporan dapat digabungkan menjadi satu dengan menggunakan operator koma:

 var image = document.getElementById("myImage"), div = document.getElementById("myDiv");

This code also defines two variables and provides the same initialization. Kode ini juga mendefinisikan dua variabel dan memberikan inisialisasi yang sama. However, you've saved the three bytes that another var would have cost. Namun, Anda telah disimpan tiga byte yang lain var akan biaya. Three bytes might not seem like a big deal, but if you're able to find dozens of places where there's currently an extra var statement, the savings can really add up. Tiga byte mungkin tidak terlihat seperti masalah besar, tapi jika Anda dapat menemukan puluhan tempat dimana ada saat ini ekstra var pernyataan, tabungan benar-benar dapat menambahkan sampai. The best advice is to use one var statement at the beginning of each function to define all the variables used in that function. Saran terbaik adalah dengan menggunakan satu var pernyataan di awal fungsi masing-masing untuk mendefinisikan semua variabel yang digunakan dalam fungsi itu. The YUI Compressor will point out functions with more than one var statement when the –v flag is used (JSLint is also capable of detecting this). The Kompresor YUI akan menunjukkan fungsi dengan lebih dari satu var pernyataan ketika –v bendera yang digunakan (JSLint juga mampu mendeteksi ini).

The second statement, return , typically gets overused in this manner: Pernyataan kedua, return , biasanya akan terlalu sering digunakan dengan cara ini:

 function getValueFor(data){ if (firstCondition(data)){ return 1; } else if (secondCondition(data)){ return 2; } else if (thirdCondition(data)){ return 3; } else { return 4; } }

Ultimately, this function ends up returning a value based on the evaluation of some conditions. Akhirnya, fungsi ini akhirnya kembali nilai berdasarkan evaluasi beberapa kondisi. The minified version is 146 bytes. Versi minified adalah 146 byte. You can save some bytes by using a single return statement: Anda dapat menyimpan beberapa byte dengan menggunakan kembali pernyataan tunggal:

 function getValueFor(data){ var value; if (firstCondition(data)){ value = 1; } else if (secondCondition(data)){ value = 2; } else if (thirdCondition(data)){ value = 3; } else { value = 4; } return value; }

The rewritten code replaces most instances of return with a local variable that can be minified. Kode ditulis ulang menggantikan sebagian besar kasus return dengan variabel lokal yang dapat minified. The minified version of this code is 140 bytes. Versi minified kode ini adalah 140 byte. The code can actually be refactored even further: Kode sebenarnya dapat refactored lebih jauh:

 function getValueFor(data){ var value = 4; if (firstCondition(data)){ value = 1; } else if (secondCondition(data)){ value = 2; } else if (thirdCondition(data)){ value = 3; } return value; }

This code minifies to 133 bytes and produces the same result. Kode ini minifies untuk 133 byte dan menghasilkan hasil yang sama. Note that this version also removes an additional keyword, else , which helps to make it even smaller. Perhatikan bahwa versi ini juga menghapus sebuah kata kunci tambahan, else , yang membantu untuk membuatnya lebih kecil.

Without intending to reopen the age-old debate about whether single exit points are good and/or necessary, using a single return statement for each function decreases the size of your functions when minified. Tanpa bermaksud untuk membuka kembali perdebatan berusia usia tentang apakah exit point tunggal adalah baik dan / atau diperlukan, menggunakan tunggal return pernyataan untuk setiap fungsi mengurangi ukuran fungsi Anda ketika minified.

Global variables Variabel global

As mentioned previously, variable name replacement occurs only on local variables. Seperti disebutkan sebelumnya, penggantian nama variabel terjadi hanya pada variabel lokal. Attempting to replace global variable names, including global function names, can result in broken code because the YUI Compressor has no way of knowing where else these variables and functions might be used. Mencoba untuk mengganti nama variabel global, termasuk nama fungsi global, dapat menghasilkan kode yang rusak karena Kompresor YUI tidak memiliki cara untuk mengetahui di mana lagi variabel-variabel dan fungsi dapat digunakan. This applies both to predefined globals such as window and document as well as global variables that you create. Hal ini berlaku baik GLOBALS standar ke seperti window dan document serta variabel global yang Anda buat.

Store global variables locally Toko global variabel lokal

If you need to use a global variable more than once in a function, it's best to store that global variable in a local variable. Jika Anda perlu menggunakan variabel global yang lebih dari sekali dalam sebuah fungsi, yang terbaik untuk menyimpan variabel global dalam sebuah variabel lokal. This has two important advantages: It's faster to access local variables at runtime and once stored in a local variable, the YUI Compressor can replace the variable name. Ini memiliki dua manfaat penting: Ini lebih cepat untuk mengakses variabel lokal pada runtime dan sekali disimpan di sebuah variabel lokal, Kompresor YUI dapat mengganti nama variabel. For example: Sebagai contoh:

 function createMessageElement(message){ var div = document.createElement("div"); div.innerHTML = message; document.body.appendChild(div); }

This function has two local variables, message and div , as well as one global variable, document . Fungsi ini memiliki dua variabel lokal, message dan div , serta satu variabel global, document . Look at what happens when the code is minified: Lihatlah apa yang terjadi ketika kode ini minified:

 function createMessageElement(a){var b=document.createElement("div"); »
b.innerHTML=a;document.body.appendChild(b)};

You can clearly see that document appears twice in the minified code. Anda dengan jelas dapat melihat bahwa document muncul dua kali dalam kode minified. You've saved 43 bytes (158 for the original, 115 minified), which isn't bad, but it could be better. Anda telah disimpan 43 bytes (158 untuk yang asli, 115 minified), yang tidak buruk, tapi bisa lebih baik. By storing document in a local variable, you can save even more. Dengan penyimpanan document dalam sebuah variabel lokal, Anda dapat menyimpan lebih banyak lagi. Here's the rewritten code: Berikut kode ditulis ulang:

 function createMessageElement(message){ var doc = document, div = doc.createElement("div"); div.innerHTML = message; doc.body.appendChild(div); }

The minified version of this code is as follows: Versi minified kode ini adalah sebagai berikut:

 function createMessageElement(a){var b=document,c=b.createElement »
("div");c.innerHTML=a;b.body.appendChild(c)};

Once again, even though the original code is slightly larger (175 bytes), the minified code is actually smaller (110 bytes). Sekali lagi, meskipun kode asli sedikit lebih besar (175 byte), kode minified sebenarnya lebih kecil (110 byte). The savings in this case are an extra five bytes which may not seem like a lot, but this function only uses document twice; if it were used more frequently, the savings would be greater. Tabungan dalam kasus ini adalah lima ekstra byte yang mungkin tidak tampak seperti banyak, tetapi fungsi ini hanya menggunakan document dua kali; jika digunakan lebih sering, penghematan akan lebih besar.

Avoid creating globals Hindari membuat GLOBALS

The YUI Compressor can't replace any globals, including the ones that you define yourself. The Kompresor YUI tidak dapat menggantikan GLOBALS, termasuk yang yang Anda tetapkan sendiri. For this reason, it's best to minimize the number of global variables and functions you introduce (this is also considered a best practice for maintainability , as well). Untuk alasan ini, yang terbaik untuk meminimalkan jumlah variabel global dan fungsi Anda memperkenalkan (ini juga dianggap sebagai praktek terbaik untuk rawatan , juga). Consider the following example: Perhatikan contoh berikut:

 var helloMessage = "Hello world!"; function displayMessage(){ alert(helloMessage); } displayMessage();

In this code, both message and displayMessage() are global and therefore can't have their names replaced. Dalam kode ini, baik message dan displayMessage() bersifat global dan oleh karena itu tidak dapat memiliki nama mereka diganti. The resulting minified code is as follows: Kode minified yang dihasilkan adalah sebagai berikut:

 var helloMessage="Hello world!";function displayMessage(){alert »
(helloMessage)}displayMessage();

Whereas the original code is 113 bytes, the compressed code is 95 bytes; not a huge savings. Sedangkan kode yang asli adalah 113 byte, kode dikompresi sebesar 95 byte, bukan tabungan besar.

In most cases, you don't actually need global variables to accomplish the task. Dalam kebanyakan kasus, Anda tidak benar-benar perlu variabel global untuk menyelesaikan tugas. This code, for example, works equally well when both helloMessage and displayMessage() are local variables. Kode ini, misalnya, bekerja sama dengan baik ketika kedua helloMessage dan displayMessage() adalah variabel lokal. You can create all of the variables and functions in a given code block by building a self-executing anonymous function around it. Anda dapat menciptakan semua variabel dan fungsi dalam sebuah blok kode yang diberikan dengan membangun fungsi anonim diri melaksanakan sekitarnya.

A self-executing function looks a little strange: Suatu fungsi diri mengeksekusi terlihat sedikit aneh:

 (function(){ //code here })();

This code creates a function and executes it immediately. Kode ini berfungsi menciptakan dan mengeksekusi segera. It's similar to this: Hal ini mirip dengan ini:

 function doSomething(){ //code here } doSomething();

Since the function is only going to be called once, you can save bytes by eliminating the name. Karena fungsi tersebut hanya akan dipanggil sekali, Anda dapat menyimpan bytes dengan menghilangkan nama. A self-executing function is the fastest way to create a function and execute it exactly once. Fungsi pelaksana diri adalah cara tercepat untuk membuat fungsi dan menjalankannya tepat sekali. It's also very easy to include already-existing code inside of a self-executing function. Ini juga sangat mudah untuk memasukkan kode yang sudah ada dalam diri-fungsi mengeksekusi. Here's how: Begini caranya:

 (function(){ var helloMessage = "Hello world!"; function displayMessage(){ alert(helloMessage); } displayMessage(); })();

Inside of the self-executing function, helloMessage and displayMessage() are local. Bagian dalam melaksanakan fungsi-diri, helloMessage dan displayMessage() bersifat lokal. The minified version of this code is as follows: Versi minified kode ini adalah sebagai berikut:

 (function(){var b="Hello world!";function a(){alert(b)}a()})();

Note that even though the original code is somewhat larger, weighing in at 154 bytes, the minified version is only 63 bytes (32 bytes smaller than the original minified code). Perhatikan bahwa meskipun kode asli agak besar, beratnya di di 154 byte, versi minified hanya 63 byte (32 byte lebih kecil dari kode minified asli).

Combining techniques Menggabungkan teknik

You can further improve the efficacy of a self-executing function by passing globals in as arguments. Anda dapat lebih meningkatkan efektivitas fungsi diri melaksanakan dengan melewatkan GLOBALS sebagai argumen. Once inside the function, the arguments are local variables, so you have automatically created an opportunity for better minification. Begitu berada di dalam fungsi, argumen adalah variabel lokal, sehingga Anda telah otomatis dibuat kesempatan bagi minification lebih baik. Suppose you have the following code: Misalnya Anda memiliki kode berikut:

 var helloMessage = "Hello world!"; function createMessageElement(message){ var div = document.createElement("div"); div.innerHTML = message; document.body.appendChild(div); } createMessageElement(helloMessage);

This code creates a global function, createMessageElement() , and that function uses the global document object. Kode ini membuat fungsi global, createMessageElement() , dan bahwa fungsi menggunakan objek dokumen global. There is also a global variable helloMessage . Ada juga sebuah variabel global helloMessage . When minified on its own, you end up with a total of 179 bytes. Ketika minified sendiri, Anda berakhir dengan total 179 byte. Wrapping it in a self-executing function turns createMessageElement() and helloMessage into locals: Membungkusnya dalam melaksanakan fungsi diri ternyata createMessageElement() dan helloMessage ke penduduk setempat:

 (function(){ var helloMessage = "Hello world!"; function createMessageElement(message){ var div = document.createElement("div"); div.innerHTML = message; document.body.appendChild(div); } createMessageElement(helloMessage); })()

The only remaining global in this code is document , and so the minified code isn't as optimal as it can be: Satu-satunya yang tersisa global dalam kode ini adalah document , dan kode minified tidak seoptimal dapat:

 (function(){var a="Hello world!";function b(c){var d=document. »
createElement("div");d.innerHTML=c;document.body.appendChild(d)}b(a)})();

The compression ratio is pretty good for this example (283 bytes to 135 bytes, or 52%), but you can still get a bit more by making document into a local variable. Rasio kompresi yang cukup baik untuk contoh ini (283 bytes dengan 135 byte, atau 52%), tetapi Anda masih bisa mendapatkan sedikit lebih dengan membuat document ke dalam sebuah variabel lokal. You can do this easily by passing in document to the self-executing function as an argument: Anda dapat melakukannya dengan mudah dengan mengirimkan dokumen ke diri melaksanakan fungsi sebagai argumen:

 (function(doc){ var helloMessage = "Hello world!"; function createMessageElement(message){ var div = doc.createElement("div"); div.innerHTML = message; doc.body.appendChild(div); } createMessageElement(helloMessage); })(document)

In this code, the variable doc is local to the self-executing function, and so can be replaced by YUI Compressor. Dalam kode ini, variabel doc adalah lokal ke-melaksanakan fungsi diri, dan dapat digantikan oleh YUI Compressor. The result is: Hasilnya adalah:

 (function(c){var a="Hello world!";function b(d){var e=c.createElement »
("div");e.innerHTML=d;c.body.appendChild(e)}b(a)})(document);

This code is 130 bytes, smaller than both the original and the previous examples. Kode ini adalah 130 byte, lebih kecil dari kedua yang asli dan contoh sebelumnya. Once again, you see greater savings with this technique when global variables are used more than twice. Sekali lagi, Anda melihat tabungan yang lebih besar dengan teknik ini apabila variabel global yang digunakan lebih dari dua kali.

The gzip caveat The peringatan gzip

After minifying JavaScript, the next step is to compress it, and gzip is the most popular form of compression. Setelah minifying JavaScript, langkah berikutnya adalah untuk kompres, dan gzip adalah bentuk paling populer dari kompresi. Gzip works by optimizing redundancies in text, and the techniques described in this article effectively remove some of the redundancies that could normally be compressed using gzip. Gzip bekerja dengan mengoptimalkan pengulangan dalam teks, dan teknik yang dijelaskan dalam artikel ini secara efektif menghapus beberapa redudansi yang biasanya dapat dikompres dengan menggunakan gzip.

When refactoring your code using these techniques, you should expect to see the gzip compression ratio decrease—which is to say that the percentage difference between the size of the minified file and the file when both minified and gzipped will be smaller than before. Ketika refactoring kode Anda menggunakan teknik ini, Anda harus berharap untuk melihat penurunan rasio kompresi gzip-yang mengatakan bahwa perbedaan persentase antara ukuran file dan file minified ketika kedua minified dan gzip akan lebih kecil daripada sebelumnya. Ultimately, what you should be aiming for is the smallest possible gzipped version and then the smallest possible minified version. Pada akhirnya, apa yang harus bertujuan untuk adalah versi terkecil gzip mungkin dan kemudian versi terkecil minified mungkin. The gzipped version is important for network transfer times while the minified version is important for parse times and caching. Versi gzip penting untuk transfer jaringan kali sedangkan versi minified penting untuk kali mengurai dan caching.

While writing this article, I came across Meebo's XAuth open source library. Saat menulis artikel ini, saya datang di perpustakaan terbuka Xauth Meebo's sumber. The JavaScript looked like it could be smaller just by applying some of these techniques. JavaScript tampak seperti itu bisa lebih kecil hanya dengan menerapkan beberapa teknik ini. I spent a little time refactoring the code and came away with decent results (you can see my code on GitHub ). Saya menghabiskan sedikit waktu refactoring kode datang dan pergi dengan hasil yang layak (Anda dapat melihat kode saya di GitHub ).

	Raw Mentah	Minified Minified	Minified + Gzipped Minified + gzip	% Gzip Diff % Gzip Diff
Original Asli	5720 b 5.720 b	1307 b 1307 b	668 b 668 b	49% smaller 49% lebih kecil
Refactored Refactored	6143 b 6.143 b	1210 b 1210 b	663 b 663 b	45% smaller 45% lebih kecil

Even though the raw source code size grew by a few hundred bytes, the minified size decreased by almost 100 bytes, while the minified and gzipped version shrunk by five bytes. Walaupun ukuran kode sumber mentah tumbuh dengan beberapa ratus byte, ukuran minified menurun hampir 100 byte, sedangkan versi minified dan gzip menyusut oleh lima byte. Note that gzip was about four percent less efficient with the refactored code even though the overall code size is smaller. Catatan gzip yang sekitar empat persen kurang efisien dengan kode refactored walaupun ukuran kode secara keseluruhan lebih kecil.

Conclusion Kesimpulan

The most powerful byte-savings technique in YUI Compressor is replacing variables with single- or double-letter variable names. Teknik byte-tabungan yang paling kuat di YUI Compressor adalah mengganti variabel dengan satu atau nama variabel ganda-surat. Making sure that your code is setup so that this replacement can happen as frequently as possible is important for getting the smallest code. Memastikan bahwa kode Anda setup sehingga penggantian ini dapat terjadi sesering mungkin penting untuk mendapatkan kode terkecil. When coding, keep in mind that property names, keywords, and global variables remain as-is in the minified code. Ketika coding, perlu diingat bahwa properti nama, kata kunci, dan variabel global tetap apa adanya dalam kode minified. The techniques presented in this article are designed to minimize the impact of these issues in the final minified code. Teknik-teknik yang disajikan dalam artikel ini dirancang untuk meminimalkan dampak dari masalah dalam kode minified akhir. You should take care to test your refactored code with gzip to ensure that you're getting the smallest code possible, as removing redundancies decreases the efficiency of gzip. Anda harus berhati-hati untuk menguji kode refactored Anda dengan gzip untuk memastikan bahwa Anda mendapatkan kode sekecil mungkin, seperti redudansi menghapus menurunkan efisiensi gzip.

Webjelita