Minska storleken på dina Javascript-filer

Minska storleken på dina Javascript-filer

  • Comments 3

För att din kod ska vara läsbar och möjlig att underhålla krävs att du använder dig av indrag, radbrytningar och kommentarer när du kodar. Men om du utvecklar webblösningar som använder mycket Javascript så leder det ofta till förhållandevis tunga Javascript-filer.

Om du har börjat tittat på Silverlight så känner du säkert till att många Javascript-filer som verktygen genererar är optimerade genom att alla radbrytningar, indrag, mellanslag och kommentarer har tagits bort ur koden.

Ett exempel är Silverlight.js som skickas med Silverlight SDK:t och Visual Studio-mallarna och som nog platsar i Guiness rekordbok vad gäller längsta en-rads Javascriptet genom tiderna. Ett annat bra exempel är ASP.NET AJAX klientscripts-bibliotek.

Här är ett litet utdrag ur det biblioteket:

Function.__typeName="Function";Function.__class=true;Function.createCallback=function(b,a){return function(){var e=arguments.length;if(e>0){var d=[];for(var c=0;c<e;c++)d[c]=arguments[c];d[e]=a;return b.apply(this,d)}return b.call(this,a)}};Function.createDelegate=function(a,b){return function(){return b.apply(a,arguments)}};Function.emptyFunction=Function.emptyMethod=function(){};

Som du ser väldigt svårt att läsa men filen blir avsevärt mindre.

Du kan själv använda dig av gratis-programmet JSMIN för att ta bort radbrytningar, indrag, mellanslag och kommentarer från dina egna Javascript-filer och på så sätt optimera dem.

Om du snubblar över en optimerad Javascript-fil och vill ändra i den eller bara försöka förstå koden är det oerhört svårt när den är optimerad. Som tur är finns det även ett fiffigt online-verktyg som kan fixa till formateringen åt dig.

Så här ser ovanstående kodsnutt ut när den körts genom 'Online beautifier':

Function.__typeName = "Function";

Function.__class = true;

Function.createCallback = function(b, a) {

    return function() {

        var e = arguments.length;

        if (e > 0) {

            var d = [];

            for (var c = 0; c < e; c++) d[c] = arguments[c];

            d[e] = a;

            return b.apply(this, d)

        }

        return b.call(this, a)

    }

};

Function.createDelegate = function(a, b) {

    return function() {

        return b.apply(a, arguments)

    }

};

Function.emptyFunction = Function.emptyMethod = function() {};

Leave a Comment
  • Please add 4 and 1 and type the answer here:
  • Post
  • PingBack from http://www.absolutely-people-search.info/?p=1736

  • Är inte det här möjligt att göra i Visual Stuido också?

    Inte biten att ta bort alla extra "whitespaces", men att formatera texten så att den går att läsa igen.

    Jag vet att man kan göra det på vanliga csharp-filer, funktionen heter Format Document (eller Format Selection). (Edit -> Advanced -> Format Document)

    Verkar dock inte fungera för javascript i VS Webb 2005 Express.

    Markus

  • Nej - varken 'Format Document' (CTRL K, CTRL D) eller 'Format Selection' (CTRL K, CTRL F) fungerar i .js-filer.

    Känner inte till ifall det finns planer på att lägga till den funktionaliteten i kommande versioner, ska höra mig för om det - det är ju en himla trivsam feature.

    mvh Robert

Page 1 of 1 (3 items)