Home-theater-designers
Všichni jsme tam byli, to jste se dozvěděli jak vytvořit skvělý web , ale jakmile to publikujete, je to nesnesitelně pomalé.
Minifikace vašeho javascriptu je jedním ze způsobů, jak zrychlit dobu odezvy webových stránek (spolu s komprimace HTML ), a naštěstí pro vás je to snadný proces. Dnes vám ukážu vše, co potřebujete vědět.
Co znamená Minify?
Proces minifikace (nebo minifikace ) je jednoduchý koncept. Když píšete kód v jazyce JavaScript nebo v jiném jazyce, existuje mnoho funkcí, které jsou nutné pouze pro snazší porozumění kódu lidem - počítačům je jedno, čemu říkáte proměnné nebo kolik mezer je v závorkách, například.
Zmenšením kódu můžete výrazně zmenšit jeho velikost. Menší soubor bude proto pro vaše uživatele rychlejší stáhnout. Pokud píšete pouze jeden nebo dva řádky JavaScriptu, pravděpodobně nedojde ke znatelnému zlepšení. Pokud však píšete hodně kódu nebo používáte velké knihovny, jako je jQuery, znatelné zvýšení výkonu a drasticky zmenšené velikosti souborů jsou snadno dosažitelné!
Pokud načtete kód z externí sítě CDN, například Knihovny hostované společností Google , použili jste zmenšený kód.
proč je můj disk na 100 procent
Jak vypadá zmenšený kód?
Podívejme se na několik příkladů. Je těžké vidět dopad minifikace na malé základny kódu, proto se předem omlouvám za jejich dlouhou délku.
Tady jsou některé nerušený JavaScript z našeho průvodce používáním JSON s Pythonem a JavaScriptem:
// 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();
}Zde je zmenšený kód:
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()}};Tato zmenšená verze kódu je 39 procent menší. V tomto případě názvy proměnných zůstávají stejné, ale všechny mezery a komentáře byly odstraněny.
Zde je další příklad z našeho průvodce 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');
});Zde je zmenšený kód:
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')});Tentokrát tam bylo jen a 26 procent redukce - to je na tak malý blok kódu stále velmi dobré.
Zde je poslední příklad z našeho průvodce Javascriptem a 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);Všimněte si, jak existují mnoho komentářů a mezer. Zmenšená verze zmenšila velikost souboru o 52 procent :
notebook nezůstane připojen k wifi
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);Zde jsou velikosti některých běžných knihoven JavaScript ve srovnání s jejich zmenšenými verzemi:
- Highcharts: 1 MB> 201 KB
- jQuery: 270 KB> 90 KB
- MooTools: 164 kB> 93 kB
Některé z těchto knihoven vykazují při komprimaci výrazné zmenšení velikosti ( ~ 80 procent ), zatímco ostatní nejsou tak dobří ( ~ 40 procent ). To znamená, že jakékoli uložení zrychlí vaše webové stránky pro vaše uživatele a sníží napětí na vašem webovém serveru.
Jak minimalizujete?
Nyní víte, jak to funguje a jak to vypadá, pojďme se ponořit do toho, jak to udělat. Nebojte se, není vůbec nutné ručně upravovat kód! Existuje řada volně dostupných nástrojů, které tento proces zvládnou za vás.
Ty fungují několika způsoby. Většina online nástrojů umožňuje zkopírovat a vložit kód, který pak zpracuje a vrátí vám na stránku. Tyto nástroje vám často umožní také nahrát více souborů.
Zde je krátké shrnutí online nástrojů. Většinou fungují stejně, takže si nemusíte příliš lámat hlavu nad tím, který si vybrat.
JSCompress - Tento web osobně používám nejvíce, pokud je to jen rychlá práce. Jeho spuštění je rychlé a dokonce vám ukážou nástroje, které ke stavbě použili.
Minifikátor JavaScript - Tento nástroj funguje dobře, ale opravdu svítí jako API. To vám umožní vytvořit si vlastní integraci nebo službu nad jejich stávajícími webovými stránkami.
JavaScript Minifier - další web se stejným názvem, tento nástroj je tak jednoduchý, jak přicházejí. Žádné možnosti ani nabídky, pouze jedno tlačítko.
Minifikovat - Tento web vypadá úžasně a vývojáři zde jasně věnovali pozornost detailům.
Tento seznam by mohl pokračovat navždy. Existuje tolik online nástrojů pro minimalizaci webových stránek, že je těžké se pokazit.
Minifikační nástroje existují také jako nástroje příkazového řádku nebo doplňky pro vaše JavaScript editor . Tyto nástroje se často používají mnohem rychleji a „fungují“ pouze s vaším stávajícím kódem. Není třeba kopírovat a vkládat a nemusíte extrahovat JavaScript z HTML nebo CSS, které mohou být ve stejném souboru.
Pokud používáte Microsoft Visual Studio, Bundler a minifikátor rozšíření z trhu má více než 600 000 instalací! Nejen to, ale je pravidelně aktualizován a k dispozici na GitHubu .
Pokud jste fanouškem Vznešený text jako já, pak Minifikovat balíček je ten, který chcete. S více než 61 000 instalacemi je to velmi populární balíček, který také je k dispozici na GitHubu Pokud byste chtěli přispět k projektu s otevřeným zdrojovým kódem.
Nakonec, pokud jste a PyCharm uživatel, můžeš nakonfigurujte jej tak, aby se integroval přímo s mnoha běžnými kompresními nástroji, jako je YUI kompresor . Mnoho z těchto nástrojů přímo napájí výše uvedené online nástroje.
Upozornění
Tam má být úlovek ne? Nikdy nemůže být nic dokonalého. Ano, je tu jeden problém, ale je to docela malý a snadno obejít:
Minifikovaný kód nelze obnovit do původního stavu.
Při minifikaci jakéhokoli kódu dojde ke ztrátě jeho původní podoby. Pokud si přejete mít naději na snadné provedení zásadních změn, musíte si ji ponechat - nestačí používat správu verzí.
Zatímco je to možné odminovat váš kód, už nikdy není úplně stejný. Všechny vaše cenné komentáře jsou ztraceny, pro jednu věc.
Není to velký problém, ale při kódování na to musíte pamatovat. Jako základní pravidlo nekomprimované > vývoj a stlačený > výroba.
Nyní víte vše o minifikaci JavaScriptu! Minifikace kódu je jedním ze způsobů, jak vytlačit výkon ze serveru, a dělají to všechny velké webové stránky.
Jaké nástroje používáte ke zmenšení kódu? Vadí ti to vůbec? Dejte nám vědět v níže uvedených komentářích!
jak vytvářet mraky ve Photoshopu
Uznání: NavinTar přes Shutterstock
Podíl Podíl tweet E-mailem Vymažte tyto soubory a složky systému Windows, abyste uvolnili místo na diskuPotřebujete uvolnit místo na disku v počítači se systémem Windows? Zde jsou soubory a složky systému Windows, které lze bezpečně odstranit, aby se uvolnilo místo na disku.
Číst dále Související témata- Programování
- JavaScript
- Jáva
- Webový design
Joe je absolventem informatiky na University of Lincoln, UK. Je profesionálním vývojářem softwaru, a když zrovna neletí drony nebo nepíše hudbu, často ho lze zastihnout při fotografování nebo produkci videí.
Více od Joe CoburnPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru