Benyt Scriptmanager til at kombinere scriptfiler

Jeg har længe søgt efter en metode til, at optimere mængden af scripts på en side, der er implementeret i WebForms (ASP.NET 3.5 SP1). Idag fandt jeg et bud på en løsning, omend ikke helt optimal, så hjælper den da med at få samlet scripts i potentielt langt færrere resurser.

Script Manger samler scripts

Der findes faktisk allerede en metode på siden, så det er bare med at gribe og udnytte den. 

Hvis udgangspunktet er flg. udsnit af script-tags:

  <script src="/scripts/jquery.min.js"></script>
  <script src="/scripts/jquery.autocomplete-min.js"></script>
  <script src="/scripts/jquery.innerfade.js"></script>
  <script src="/scripts/jquery.cookie.js"></script>
  <script src="/scripts/common.js"></script>
  <script src="/scripts/specific-1.js"></script>
  <script src="/scripts/specific-2.js"></script>
  <script src="/scripts/specific-3.js"></script>

så kan dette omsættes til en scriptresurse således:

  
<asp:ScriptManager runat="server">
  <CompositeScript>
    <Scripts>
      <asp:ScriptReference Path="/scripts/jquery.min.js">
      </asp:ScriptReference>
      <asp:ScriptReference Path="/scripts/jquery.autocomplete-min.js">
      </asp:ScriptReference>
      <asp:ScriptReference path="/scripts/jquery.innerfade.js">
      </asp:ScriptReference>
      <asp:ScriptReference path="/scripts/jquery.cookie.js">
      </asp:ScriptReference>
      <asp:ScriptReference path="/scripts/common.js">
      </asp:ScriptReference>
      <asp:ScriptReference Path="/scripts/specific-1.js">
      </asp:ScriptReference>
      <asp:ScriptReference Path="/scripts/specific-2.js">
      </asp:ScriptReference>
      <asp:ScriptReference Path="/scripts/specific-3.js">
      </asp:ScriptReference>
    </Scripts>
  </CompositeScript>
</asp:ScriptManager>

Indbyggede scriptresurser kan også kombineres (og endda automatisk "minificeres"). I dette tilfælde skal disse resurser blot tilføjes i scriptmanagerens Composite-underelement med de korrekte referencer

  
<asp:ScriptManager runat="server" ScriptMode="Release">
  <CompositeScript>
    <Scripts>
      <asp:ScriptReference Path="/scripts/jquery.min.js">
      </asp:ScriptReference>
      <asp:ScriptReference Path="/scripts/jquery.autocomplete-min.js">
      </asp:ScriptReference>
      <asp:ScriptReference path="/scripts/jquery.innerfade.js">
      </asp:ScriptReference>
      <asp:ScriptReference path="/scripts/jquery.cookie.js">
      </asp:ScriptReference>
      <asp:ScriptReference path="/scripts/common.js">
      </asp:ScriptReference>
      <asp:ScriptReference Path="/scripts/specific-1.js">
      </asp:ScriptReference>
      <asp:ScriptReference Path="/scripts/specific-2.js">
      </asp:ScriptReference>
      <asp:ScriptReference Path="/scripts/specific-3.js">
      </asp:ScriptReference>
      <asp:scriptreference name="MicrosoftAjax.js" 
        assembly="System.Web.Extensions, Version=3.5.0.0, 
                Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      </asp:ScriptReference>
      <asp:scriptreference name="MicrosoftAjaxWebForms.js" 
        assembly="System.Web.Extensions, Version=3.5.0.0, 
                Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      </asp:ScriptReference>
    </Scripts>
  </CompositeScript>
</asp:ScriptManager>

Ovenstående brug af Script Manager resulterer i, at én ScriptResource.axd hentes i stedet for 10, som det ville have været i dette eksempel.

Hvis man vil have sine scripts mnified, skal dette dog stadig gøres manuelt og disse minified scriptfiler skal refereres i Script Manageren. Dog vil ScriptMode="Release" medføre, at MicrosoftAjax og MicrosoftAjaxWebForms minificeres automatisk.

Andre kilder

Der kan findes mere uddybende og vidtgående information i artiklen "ASP.NET AJAX - Script Combining and moving ScriptResource.axd's to Static Scripts"  (af selveste Scott Hanselman).

Comment