javascript मैं ASP.NET MVC ऐप में जावास्क्रिप्ट फ़ाइलों को स्वचालित रूप से कैसे संकुचित और छोटा कर सकता हूं?




asp.net-mvc compression (6)

तो मेरे पास एक एएसपी.नेट एमवीसी ऐप है जो विभिन्न स्थानों में कई जावास्क्रिप्ट फ़ाइलों का संदर्भ देता है (साइट मास्टर में और कई विचारों में अतिरिक्त संदर्भ भी)।

मैं जानना चाहता हूं कि जहां संभव हो, एक एकल .js फ़ाइल में ऐसे संदर्भों को संपीड़ित करने और कम करने के लिए एक स्वचालित तरीका है या नहीं। ऐसा है कि यह ...

<script src="<%= ResolveUrl("~") %>Content/ExtJS/Ext.ux.grid.GridSummary/Ext.ux.grid.GridSummary.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.rating/ext.ux.ratingplugin.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext-starslider/ext-starslider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.dollarfield.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.combobox.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.datepickerplus/ext.ux.datepickerplus-min.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/SessionProvider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/TabCloseMenu.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/ActivityForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/UserForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/SwappedGrid.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/Tree.js" type="text/javascript"></script>

... इस तरह से कुछ कम किया जा सकता है ...

<script src="<%= ResolveUrl("~") %>Content/MyViewPage-min.js" type="text/javascript"></script>

धन्यवाद

https://code.i-harness.com


आप MvcContrib का उपयोग कर सकते हैं। शामिल हैंडलिंग। यह:

  • सीएसएस और जेएस का समर्थन करता है
  • एक अनुरोध के साथ जोड़ता है
  • Minifies
  • Gzip / Deflate संपीड़न
  • कैश हेडर सेट करता है
  • रजिस्टर करने के लिए HTMLHelper एक्सटेंशन विधियों का उपयोग करने के लिए उन्हें रन-टाइम पर गठबंधन करना शामिल है
  • आईओसी के माध्यम से प्लग करने योग्य है

कवर के तहत, यह YUICompressor का उपयोग करता है।


जैसा कि अन्य ने सुझाव दिया है, आप एक स्थिर minified निर्माण बनाने से सबसे अच्छा होगा। वैकल्पिक रूप से, यहां .NET के लिए YUICompressor का एक संस्करण उपलब्ध है: http://www.codeplex.com/YUICompressor


मैं व्यक्तिगत रूप से सोचता हूं कि विकास के दौरान अलग-अलग फाइलों को रखना अमूल्य है और उत्पादन के दौरान ऐसा कुछ होता है जब इस तरह की गणना होती है। इसलिए मैंने उपर्युक्त करने के लिए अपनी तैनाती स्क्रिप्ट को संशोधित किया।

मेरे पास एक अनुभाग है जो पढ़ता है:

<Target Name="BeforeDeploy">

        <ReadLinesFromFile File="%(JsFile.Identity)">
            <Output TaskParameter="Lines" ItemName="JsLines"/>
        </ReadLinesFromFile>

        <WriteLinesToFile File="Scripts\all.js" Lines="@(JsLines)" Overwrite="true"/>

        <Exec Command="java -jar tools\yuicompressor-2.4.2.jar Scripts\all.js -o Scripts\all-min.js"></Exec>

    </Target>

और मेरे मास्टर पेज फ़ाइल में मैं उपयोग करता हूं:

if (HttpContext.Current.IsDebuggingEnabled)
   {%>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-1.3.2.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-ui-1.7.2.min.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.form.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.metadata.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.validate.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/additional-methods.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/form-interaction.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/morevalidation.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/showdown.js") %>"></script>
<%
   }  else  {%> 
  <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/all-min.js")%>"></script>
<% } %>

बिल्ड स्क्रिप्ट अनुभाग में सभी फाइलें लेती है और उन्हें सभी को एक साथ जोड़ती है। फिर मैं जावास्क्रिप्ट का एक छोटा संस्करण प्राप्त करने के लिए वाईयूआई के मिनीफायर का उपयोग करता हूं। चूंकि यह आईआईएस द्वारा परोसा जाता है, इसलिए मैं जीआईएसपी संपीड़न प्राप्त करने के लिए आईआईएस में संपीड़न चालू कर दूंगा। **** जोड़ा गया **** मेरी परिनियोजन स्क्रिप्ट एक एमएसबिल्ड स्क्रिप्ट है। मैं एक आवेदन को तैनात करने में मदद के लिए उत्कृष्ट एमएसबिल्ड समुदाय कार्यों ( http://msbuildtasks.tigris.org/ ) का भी उपयोग करता हूं।

मैं अपनी पूरी स्क्रिप्ट फ़ाइल यहां पोस्ट नहीं कर रहा हूं, लेकिन यहां कुछ प्रासंगिक रेखाएं हैं जो इसे सबसे ज्यादा प्रदर्शित करने के लिए करनी चाहिए।

निम्न अनुभाग गंतव्य ड्राइव पर एप्लिकेशन की प्रतिलिपि बनाने के लिए एएसपीनेट कंपाइलर में बिल्ड चलाएगा। (पिछले चरण में मैं केवल नेट नेट उपयोग कमांड चलाता हूं और नेटवर्क शेयर ड्राइव मैप करता हूं)।

<Target Name="Precompile" DependsOnTargets="build;remoteconnect;GetTime">

        <MakeDir Directories="%(WebApplication.SharePath)\$(buildDate)" />

        <Message Text="Precompiling Website to %(WebApplication.SharePath)\$(buildDate)" />

        <AspNetCompiler
            VirtualPath="/%(WebApplication.VirtualDirectoryPath)"
            PhysicalPath="%(WebApplication.PhysicalPath)"
            TargetPath="%(WebApplication.SharePath)\$(buildDate)"
            Force="true"
            Updateable="true"
            Debug="$(Debug)"
            />
        <Message Text="copying the correct configuration files over" />

        <Exec Command="xcopy $(ConfigurationPath) %(WebApplication.SharePath)\$(buildDate) /S /E /Y" />

     </Target>

सभी समाधान परियोजनाओं की प्रतिलिपि बनाने के बाद मैं इसे चलाता हूं:

    <Target Name="_deploy">
        <Message Text="Removing Old Virtual Directory" />
        <WebDirectoryDelete
            VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)"
            ServerName="$(IISServer)"
            ContinueOnError="true"
            Username="$(username)"  
            HostHeaderName="$(HostHeader)"
            />

        <Message Text="Creating New Virtual Directory" />

        <WebDirectoryCreate 
            VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)" 
            VirtualDirectoryPhysicalPath="%(WebApplication.IISPath)\$(buildDate)"
            ServerName="$(IISServer)"
            EnableDefaultDoc="true"
            DefaultDoc="%(WebApplication.DefaultDocument)"
            Username="$(username)"
            HostHeaderName="$(HostHeader)"
            />
</Target>

आपको तैनाती स्वचालित करने पर शुरू करने के लिए पर्याप्त होना चाहिए। मैंने इन सभी चीजों को Aspnetdeploy.msbuild नामक एक अलग फ़ाइल में रखा है। मैं बस msbuild / t: जब भी मुझे पर्यावरण में तैनाती की आवश्यकता होती है लक्ष्य।


मैंने इसे मेरे लिए स्वचालित रूप से संभालने के लिए कुछ लिखा है। यह Google के क्लोजर कंपाइलर का उपयोग करता है। आप यहां कोड पढ़ सकते हैं:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

धन्यवाद

गुइडो


स्कॉट हंसेलमैन ने हाल ही में स्क्रिप्ट को स्थिर फाइलों के संयोजन और स्थानांतरित करने के बारे में ब्लॉग किया, मूल रूप से स्क्रिप्ट ScriptManager का उपयोग ScriptManager संदर्भों और Path विशेषता के साथ किया:

<asp:ScriptManager runat="server">
    <CompositeScript path="http://www.example.com/1.js">
        <Scripts>
            <asp:ScriptReference />
            <asp:ScriptReference />
            <!-- etc. -->
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

स्थैतिक फाइलों को कम करने के मामले में, आपको संभवतः निर्माण / तैनाती के समय में खनन उपकरण का उपयोग करना होगा (और चाहिए)।


MvcContrib.IncludeHandling इस स्थिति के लिए अच्छी तरह से काम करता है। उदाहरण में, मेरे पास शैलियों (स्ट्रिंग) के संग्रह के साथ एक मॉडल है। अगर मुझे पृष्ठ पर कस्टम स्टाइल / जेएस जोड़ने की ज़रूरत है तो भी वह कर सकता है। फिर Html.RenderCss को कॉल करना सभी शैलियों / जेएस को एक फ़ाइल में एक साथ जोड़ता है और इसे कम करता है।

<head>
<% foreach (var styleSheet in Model.Styles) {%>
<% Html.IncludeCss(styleSheet)); 

<% } %>
<% Html.IncludeCss("~/Scripts/jquery.1.4.2.js")); 

<%= Html.RenderCss() %>
</head>

जावास्क्रिप्ट के लिए वही तरीका।

<%
Html.IncludeJs("~/scripts/ConsoleLogger.js");
Html.IncludeJs("~/scripts/jquery.log.js");
Html.IncludeJs("~/Scripts/2010.1.416/jquery.validate.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.calendar.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.datepicker.js");
Html.IncludeJs("~/scripts/jquery.ui.datepicker-en-GB.js");
%>

जब यह क्लाइंट को प्रदान किया जाता है तो आउटपुट इस तरह दिखता है (minified संयुक्त 1 फ़ाइल)

<link rel='stylesheet' type='text/css' href='/include/css/-QdUg9EnX5mpI0e4aKAaOySIbno%40'/>

एपीआई एक डीबग फ्लैग भी प्रदान करता है जो सेट करते समय स्क्रिप्ट को छोटा या गठबंधन नहीं करता है जो बहुत उपयोगी है।

कुछ मिनटों में मैं एफ से बी के Yslow स्कोर से चला गया (24 स्क्रिप्ट नीचे 2) ... बहुत बढ़िया! और 40kbs की एक बूंद।

जाहिर नकारात्मक यह है कि सर्वर फ्लाई पर संपीड़न कर रहा है। मुझे लगता है कि एक निर्धारित अवधि के लिए संयुक्त स्क्रिप्ट को कैश करने के विकल्प हैं जो हालांकि इसे जल्दी से कम कर देंगे।






minimize