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




asp.net-mvc compression extjs minimize (8)

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

मैं जानना चाहता हूं कि जहां संभव हो, एक एकल .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>

धन्यवाद


Answers

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

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

<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: जब भी मुझे पर्यावरण में तैनाती की आवश्यकता होती है लक्ष्य।


वास्तव में वेब परिनियोजन परियोजनाओं (डब्ल्यूडीपी) का उपयोग करके एक बहुत आसान तरीका है। डब्ल्यूडीपी aspnet__compiler और aspnet__merge उपकरण की जटिलताओं का प्रबंधन करेगा। आप विजुअल स्टूडियो के अंदर यूआई द्वारा प्रक्रिया को कस्टमाइज़ कर सकते हैं।

जेएस फाइलों को संपीड़ित करने के लिए आप अपनी सभी जेएस फाइलों को जगह में छोड़ सकते हैं और बिल्ड प्रक्रिया के दौरान इन फ़ाइलों को संकुचित कर सकते हैं। तो डब्लूडीपी में आप इस तरह कुछ घोषित करेंगे:

<Project>
   REMOVE CONTENT HERE FOR WEB

<Import 
  Project="$(MSBuildExtensionsPath)\MSBuildCommunityTasks\MSBuild.Community.Tasks.Targets" />
<!-- Extend the build process -->
<PropertyGroup>
  <BuildDependsOn>
    $(BuildDependsOn);
    CompressJavascript
  </BuildDependsOn>
</PropertyGroup>

<Target Name="CompressJavascript">
  <ItemGroup>
    <_JSFilesToCompress Include="$(OutputPath)Scripts\**\*.js" />
  </ItemGroup>
  <Message Text="Compresing Javascript files" Importance="high" />
  <JSCompress Files="@(_JSFilesToCompress)" />
</Target>
</Project>

यह एमएसबिल्ड http://msbuildtasks.tigris.org/ से जेएससीओएमप्रेस एमएसबिल्ड कार्य का उपयोग करता है जो मुझे लगता है कि जेएसएमआईएन के आधार पर है।

विचार यह है कि, अपनी सभी जेएस फाइलों को छोड़ दें (यानी डिबग करने योग्य / मानव-पठनीय) । जब आप अपना डब्लूडीपी बनाते हैं तो यह पहले जेएस फाइलों को आउटपुटपाथ में कॉपी करेगा और फिर कंप्रेस जावास्क्रिप्ट लक्ष्य को जेएस फाइलों को कम करने के लिए कहा जाता है। यह आपकी मूल स्रोत फ़ाइलों को संशोधित नहीं करता है, केवल WDP प्रोजेक्ट के आउटपुट फ़ोल्डर में से कोई भी। फिर आप WDPs आउटपुट पथ में फ़ाइलों को तैनात करते हैं, जिसमें पूर्व-संकलित साइट शामिल है। मैंने अपनी पुस्तक में इस सटीक परिदृश्य को कवर किया (मेरे नाम से नीचे लिंक)

आप डब्लूडीपी हैंडल को वर्चुअल डायरेक्टरी बनाने के साथ-साथ एक चेकबॉक्स भी देख सकते हैं और आभासी निर्देशिका का नाम भर सकते हैं।

एमएसबिल्ड पर कुछ लिंक के लिए:

सईद इब्राहिम हाशिमी

मेरी पुस्तक: माइक्रोसॉफ्ट बिल्ड इंजन के अंदर: एमएसबिल्ड और टीम फाउंडेशन बिल्ड का उपयोग करना


मुझे पता है कि यह एक पुराना सवाल है, लेकिन यह पहली बार आया क्योंकि मैं कुछ कमीशन खोज कर रहा था। मैं Gruntjs, http://gruntjs.com का उपयोग करने की सलाह दूंगा। यह एक पूर्ण वेब निर्माण उपकरण है।


स्कॉट हंसेलमैन ने हाल ही में स्क्रिप्ट को स्थिर फाइलों के संयोजन और स्थानांतरित करने के बारे में ब्लॉग किया, मूल रूप से स्क्रिप्ट 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>

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


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

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

धन्यवाद

गुइडो


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


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

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

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


ईसीएमएस्क्रिप्ट 2015 (ईएस 6) मानक विधि

/* For the case in question, you would do: */
Object.assign(obj1, obj2);

/** There's no limit to the number of objects you can merge.
 *  All objects get merged into the first object. 
 *  Only the object in the first argument is mutated and returned.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);

( एमडीएन जावास्क्रिप्ट संदर्भ देखें)

ES5 और इससे पहले के लिए विधि

for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }

ध्यान दें कि यह obj2 सभी गुणों को obj1 जोड़ देगा जो शायद आप नहीं चाहते हैं अगर आप अभी भी unmodified obj1 का उपयोग करना चाहते हैं।

यदि आप अपने प्रोटोटाइप पर एक फ्रेमवर्क का उपयोग कर रहे हैं तो आपको hasOwnProperty जैसी चेक के साथ hasOwnProperty , लेकिन वह कोड 99% मामलों के लिए काम करेगा।

उदाहरण समारोह:

/**
 * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
 * @param obj1
 * @param obj2
 * @returns obj3 a new object based on obj1 and obj2
 */
function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}






javascript asp.net-mvc compression extjs minimize