बंडल ट्रांसफार्मर 1.6.2 जारी किया गया या छह महीनों में क्या बदल गया है?

बंडल ट्रांसफार्मर मैं Microsoft ASP.NET वेब ऑप्टिमाइज़ेशन फ्रेमवर्क (अन्य नाम: ASP.NET बंडलिंग और मिनिमाइज़ेशन, System.Web.Optimization, Microsoft.Web.Optimization और ASP.NET ऑप्टिमाइज़ेशन - बंडलिंग) के लिए विकसित मॉड्यूलर विस्तार है। इस साल अप्रैल में, मैंने पहले से ही बंडल ट्रांसफार्मर की क्षमताओं की विस्तृत समीक्षा की थी , लेकिन इस समय के दौरान इस उत्पाद में बहुत बदलाव आया है। इसलिए, मैंने इस समीक्षा को लिखने और पिछले छह महीनों में बंडल ट्रांसफार्मर में होने वाले मुख्य परिवर्तनों के बारे में बात करने का निर्णय लिया।

Microsoft ASP.NET वेब अनुकूलन फ्रेमवर्क विकास परिवर्तन

बंडल ट्रांसफॉर्मर का अप्रैल संस्करण Microsoft ASP.NET वेब ऑप्टिमाइज़ेशन फ्रेमवर्क के 1 बीटा के लिए विकसित किया गया था (बाद में इसे बी / एम के रूप में संदर्भित किया गया है)। पहले से ही बी / एम के दूसरे बीटा में, गंभीर बदलाव हुए: एपीआई ने बहुत कुछ बदल दिया, डिबगिंग मोड के लिए समर्थन दिखाई दिया और गतिशील बंडलों को बनाने की क्षमता पुरानी थी ( EnableDefaultBundles विधि का उपयोग करके और DynamicFolderBundle क्लास अब अनुशंसित नहीं है)। बी / एम के अंतिम संस्करण में कोई बड़ा बदलाव नहीं हुआ, लेकिन एक बहुत ही उपयोगी विशेषता जोड़ी गई - यह सीडीएन का समर्थन करता है।

उपरोक्त सभी परिवर्तनों ने बंडल ट्रांसफार्मर को भी प्रभावित किया।

B / M के दूसरे बीटा से शुरू होकर, Global.asax फ़ाइल से बंडल को App_Start क्लास में कोड बनाने और इस वर्ग को App_Start निर्देशिका में रखने की App_Start की App_Start । Global.asax फ़ाइल में, आपको केवल BundleConfig वर्ग के RegisterBundles पद्धति पर कॉल छोड़ने की आवश्यकता है:

 using System.Web.Mvc; using System.Web.Optimization; using System.Web.Routing; namespace BundleTransformer.Example.Mvc { public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); //   bundle` BundleConfig.RegisterBundles(BundleTable.Bundles); } } } 

बंडलों को बनाने पर विचार करें और निम्नलिखित बंडल का उपयोग करके बंडल ट्रांसफॉर्मर का उपयोग करके उनके प्रसंस्करण को अनुकूलित करें। BundleConfig रूप में BundleConfig वर्ग:

 using System.Web.Optimization; using BundleTransformer.Core.Orderers; using BundleTransformer.Core.Transformers; namespace BundleTransformer.Example.Mvc { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { var cssTransformer = new CssTransformer(); var jsTransformer = new JsTransformer(); var nullOrderer = new NullOrderer(); var commonStylesBundle = new Bundle("~/Bundles/CommonStyles"); commonStylesBundle.Include( "~/Content/Site.css", "~/Content/BundleTransformer.css", "~/AlternativeContent/css/TestCssComponentsPaths.css", "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.theme.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/TestTranslators.css", "~/Content/TestLess.less", "~/Content/TestSass.sass", "~/Content/TestScss.scss"); commonStylesBundle.Transforms.Add(cssTransformer); commonStylesBundle.Orderer = nullOrderer; bundles.Add(commonStylesBundle); var modernizrBundle = new Bundle("~/Bundles/Modernizr"); modernizrBundle.Include("~/Scripts/modernizr-2.*"); modernizrBundle.Transforms.Add(jsTransformer); modernizrBundle.Orderer = nullOrderer; bundles.Add(modernizrBundle); var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts"); commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js", "~/Scripts/jquery-{version}.js", "~/Scripts/jquery-ui-{version}.js", "~/Scripts/jquery.validate.js", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/jquery.unobtrusive-ajax.js", "~/Scripts/knockout-2.*", "~/Scripts/TestCoffeeScript.coffee"); commonScriptsBundle.Transforms.Add(jsTransformer); commonScriptsBundle.Orderer = nullOrderer; bundles.Add(commonScriptsBundle); var jqueryUiStylesDirectoryBundle = new Bundle("~/Bundles/JqueryUiStylesDirectory"); jqueryUiStylesDirectoryBundle.IncludeDirectory("~/Content/themes/base/", "*.css"); jqueryUiStylesDirectoryBundle.Transforms.Add(new CssTransformer( new[] { "*.all.css", "jquery.ui.base.css" })); bundles.Add(jqueryUiStylesDirectoryBundle); var scriptsDirectoryBundle = new Bundle("~/Bundles/ScriptsDirectory"); scriptsDirectoryBundle.IncludeDirectory("~/Scripts/", "*.js"); scriptsDirectoryBundle.Transforms.Add(new JsTransformer( new[] { "*.all.js", "references.js" })); bundles.Add(scriptsDirectoryBundle); } } } 

1 बी / एम बीटा की तुलना में मुख्य अंतर यह है कि IncludeDirectory और IncludeDirectory विधियों का उपयोग अब फ़ाइलों और निर्देशिकाओं को जोड़ने के लिए किया जाता है ( AddFile और AddDirectory बजाय)। इसके अलावा, रूपांतरण अब CssTransformer क्लास के कंस्ट्रक्टर के माध्यम से नहीं जोड़े जाते हैं, लेकिन इसके Transforms प्रॉपर्टी के माध्यम से (उपरोक्त कोड में आप CssTransformer और JsTransformer उदाहरण जोड़कर इसे देख सकते हैं)।

यह ध्यान देने योग्य है कि Bundle क्लास के अलावा, इसके उप-वर्ग StyleBundle (शैलियों के लिए) और स्क्रिप्टबंडल (स्क्रिप्ट के लिए) का उपयोग बंडल बनाने के लिए भी किया जा सकता है। कोड को कम करने के लिए जिम्मेदार ट्रांसफ़ॉर्मेशन ( CssMinify और JsMinify classes के उदाहरण) पहले ही इन वर्गों में जोड़े जा चुके हैं। हमारे मामले में, हम इन उपवर्गों का उपयोग नहीं कर सकते, क्योंकि CssMinify और JsMinify कक्षाओं के उदाहरणों के बजाय, हमें बंडल ट्रांसफार्मर ( CssTransformer और JsTransformer उदाहरण) से रूपांतरण जोड़ने की आवश्यकता है।

उदाहरण फ़ाइल _Layout.cshtml का उपयोग करके दृश्य कोड में निर्मित बंडलों के लिंक को पंजीकृत करने पर विचार करें:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@ViewBag.Title - Bundle Transformer Example MVC Application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Bundles/CommonStyles") @Scripts.Render("~/Bundles/Modernizr") ... </head> <body> ... @Scripts.Render("~/Bundles/CommonScripts") @RenderSection("scripts", required: false) </body> </html> 

बंडलों के लिंक अब Render विधि ( Styles.Render उपयोग CSS के लिए किया जाता है, और Scripts.Render लिए प्रयोग किया जाता Styles.Render कोड में जोड़ा जाता Scripts.Render । Render विधि का उपयोग करके न केवल बंडलों के लिंक को और अधिक सुविधाजनक बनाता है, बल्कि बी / एम के शुरुआती संस्करणों की मुख्य समस्या को हल करता है - डिबगिंग मोड के लिए समर्थन।

B / M उस मोड को निर्धारित करता है जिसमें वेब एप्लिकेशन निम्न सेटिंग्स पर आधारित है:

1. Web.config फ़ाइल से compilation तत्व के debug विशेषता का मान ( true - डिबग मोड; false - रिलीज़ मोड);
2. BundleTable.EnableOptimizations की BundleTable.EnableOptimizations । BundleTable.EnableOptimizations प्रॉपर्टी, जिसे BundleTable.EnableOptimizations क्लास में निर्दिष्ट किया जा सकता है ( true - रिलीज़ मोड; false - डिबग मोड)। इसके अलावा, BundleTable.EnableOptimizations का मान। BundleTable.EnableOptimizations गुण Web.config फ़ाइल से सेटिंग्स पर पूर्वता लेता है।

रिलीज़ मोड में, बंडल में शामिल फ़ाइलों का कोड संयुक्त है और संसाधित किया जाता है (परिवर्तन लागू होते हैं)। आउटपुट निम्न फॉर्म का HTML कोड है:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page - Bundle Transformer Example MVC Application</title> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="/Bundles/CommonStyles?v=IWN75r8IOIWnlehQ6JVPUgrb7UER075iobpzbjYTtRQ1" rel="stylesheet"/> <script src="/Bundles/Modernizr?v=1dm47T0PPFmcdy8ssp2EZ4h8yT2SjNhVvtdbc0MyDAs1"></script> ... </head> <body> ... <script src="/Bundles/CommonScripts?v=qWsyReB8UFAt-HPS-6MCkeDDTs2lQgYMdyCUd2V9O4o1"></script> </body> </html> 

और डिबग मोड में, बंडल में शामिल फ़ाइलों को उनके मूल रूप में और व्यक्तिगत रूप से प्रदर्शित किया जाता है:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page - Bundle Transformer Example MVC Application</title> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="/Content/Site.css" rel="stylesheet"/> <link href="/Content/BundleTransformer.css" rel="stylesheet"/> <link href="/AlternativeContent/css/TestCssComponentsPaths.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/> <link href="/Content/TestTranslators.css" rel="stylesheet"/> <link href="/Content/TestLess.less" rel="stylesheet"/> <link href="/Content/TestSass.sass" rel="stylesheet"/> <link href="/Content/TestScss.scss" rel="stylesheet"/> <script src="/Scripts/modernizr-2.5.3.js"></script> ... </head> <body> ... <script src="/Scripts/MicrosoftAjax.debug.js"></script> <script src="/Scripts/jquery-1.8.1.js"></script> <script src="/Scripts/jquery-ui-1.8.23.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> <script src="/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="/Scripts/knockout-2.1.0.debug.js"></script> <script src="/Scripts/TestCoffeeScript.coffee"></script> </body> </html> 

जो क्लाइंट कोड की डीबगिंग को बहुत सरल करता है।

लेकिन अगर आप प्रीप्रोसेसर का उपयोग करते हैं, तो आप डिबग मोड में काम करते समय समस्याओं का अनुभव कर सकते हैं। उपरोक्त कोड में एक्सटेंशन के साथ फ़ाइलों के लिंक हैं। .scss .sass , .scss और। अगर HTTP हैंडलर इन एक्सटेंशन के लिए Web.config फ़ाइल में पंजीकृत नहीं हैं, तो इन फ़ाइलों की सामग्री अप्रमाणित होगी और क्लाइंट-साइड त्रुटियाँ हो सकती हैं।

इस समस्या को हल करने के लिए, ट्रांसलेटर लाइब्रेरीज़ बंडलट्रांसफॉर्मर.लीस, बंडलट्रेनफॉर्मर.लीसलाइट, बंडलट्रांसफॉर्मर.सैसएंडस्क और बंडलट्रांसफॉर्मर.कॉफीस्क्रिप्ट संगत HTTP हैंडलर के कार्यान्वयन के साथ जोड़े गए। NuGet के माध्यम से अनुवादक स्थापित करते समय, HTTP हैंडलर स्वचालित रूप से Web.config फ़ाइल में पंजीकृत होते हैं:

 <?xml version="1.0" encoding="utf-8"?> <configuration> ... <system.web> ... <httpHandlers> <!-- Declaration of Bundle Transformer HTTP-handlers --> <add path="*.less" verb="GET" type="BundleTransformer.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" /> <add path="*.sass" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" /> <add path="*.scss" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" /> <add path="*.coffee" verb="GET" type="BundleTransformer.CoffeeScript.HttpHandlers.CoffeeScriptAssetHandler, BundleTransformer.CoffeeScript" /> <!-- /Declaration of Bundle Transformer HTTP-handlers --> </httpHandlers> </system.web> <system.webServer> ... <handlers> ... <!-- Declaration of Bundle Transformer HTTP-handlers --> <add name="LessAssetHandler" path="*.less" verb="GET" type="BundleTransformer.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" resourceType="File" preCondition="" /> <add name="SassAssetHandler" path="*.sass" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" resourceType="File" preCondition="" /> <add name="ScssAssetHandler" path="*.scss" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" resourceType="File" preCondition="" /> <add name="CoffeeScriptAssetHandler" path="*.coffee" verb="GET" type="BundleTransformer.CoffeeScript.HttpHandlers.CoffeeScriptAssetHandler, BundleTransformer.CoffeeScript" resourceType="File" preCondition="" /> <!-- /Declaration of Bundle Transformer HTTP-handlers --> </handlers> </system.webServer> ... </configuration> 

एकमात्र अपवाद है बंडलट्रांसफॉर्मर.लेएस नुगेट पैकेज: जब यह स्थापित होता है, तो डॉटलेस पैकेज भी स्थापित होता है, जो स्वचालित रूप से .less एक्सटेंशन के साथ फ़ाइलों को संसाधित करने के लिए HTTP हैंडलर के अपने संस्करण को पंजीकृत करता है। लेकिन आपके पास हमेशा यह मौका होता है कि आप इसे LessAssetHandler से HTTP हैंडलर LessAssetHandler से बदलें।

आप Web.config फ़ाइल से /configuration/bundleTransformer/core/assetHandler कॉन्फ़िगरेशन तत्व का उपयोग करके मूल HTTP अनुवादक हेडर की सेटिंग को नियंत्रित कर सकते हैं। निम्न कोड डिफ़ॉल्ट HTTP हैंडलर सेटिंग्स दिखाता है:

 <configuration> ... <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd"> <core> ... <assetHandler clientCacheDurationInDays="365" enableCompression="true" useLastModifiedHeader="true" useETagHeader="true" serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false" disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" /> ... </core> </bundleTransformer> ... </configuration> 

जहां,

• clientCacheDurationInDays="()" । ब्राउज़र कैश में संसाधित फ़ाइल की पाठ सामग्री की अवधि निर्धारित करता है (दिनों में)।
• enableCompression="(true|false)" । संसाधित फ़ाइल के GZIP / Deflate संपीड़न को सक्षम करता है।
• useLastModifiedHeader="(true|false)" । आपको ब्राउज़र को सूचित करने के लिए Last-Modified HTTP हेडर का उपयोग करने की अनुमति देता है कि संसाधित फ़ाइल बदल गई है।
• useETagHeader="(true|false)" । ब्राउज़र को सूचित करने के लिए ETag HTTP हैडर का उपयोग करने में सक्षम करता है कि संसाधित फ़ाइल बदल गई है।
• serverCacheDurationInMinutes="()" । सर्वर कैश में संसाधित फ़ाइल की पाठ सामग्री की अवधि (मिनटों में) निर्धारित करता है।
• useServerCacheSlidingExpiration="(true|false)" । सर्वर के कैश आइटम को रोल-आउट करने की अनुमति देता है।
• disableClientCacheInDebugMode="(true|false)" । डिबग मोड में संसाधित फ़ाइल के ब्राउज़र कैशिंग को अक्षम करता है।
• disableCompressionInDebugMode="(true|false)" । डिबग मोड में संसाधित फ़ाइल के GZIP / Deflate संपीड़न को अक्षम करता है।

अनुवादक

बंडल ट्रांसफार्मर: लाइट लाइट

अप्रैल के अंत में, डॉटलेसक्लायोनेली नामक डॉटलेस लाइब्रेरी का एक हल्का संस्करण दिखाई दिया । इस लाइब्रेरी में केवल LESS कंपाइलर होता है, और ASP.NET से जुड़ी सभी कार्यक्षमता को इससे हटा दिया गया है (उदाहरण के लिए, HTTP हैंडलर)।

बंडलट्रांसफॉर्मर.लीसलाइट सीएसएस में LESS कोड का अनुवाद करने के लिए DotlessClientOnly की क्षमताओं का उपयोग करता है। क्षमताओं और प्रोग्रामिंग इंटरफ़ेस के संदर्भ में, बंडलट्रांसफॉर्मर.लीसलाइट पूरी तरह से बंडलट्रांसफॉर्मर के समान है। इसलिए, यदि आपकी परियोजनाओं में LESS के साथ सभी कार्य केवल बंडल ट्रांसफॉर्मर के माध्यम से किया जाता है, तो बंडल ट्रान्सफ़ॉर्मर का उपयोग करना बेहतर होता है। लाइट मॉड्यूल, क्योंकि यह एक अधिक हल्के पुस्तकालय पर आधारित है।

बंडल ट्रांसफार्मर: कॉफीस्क्रिप्ट

संस्करण 1.5.5 से पहले, बंडलट्रांसफॉर्मर.कॉफीस्क्रिप्ट ने जावास्क्रिप्ट में कॉफीस्क्रिप्ट कोड का अनुवाद करने के लिए SassAndCfish.JavaScript संस्करण 2.0.2.0 पुस्तकालय का उपयोग किया। दुर्भाग्य से, SassAndCfish.JavaScript लाइब्रेरी लंबे समय से विकसित नहीं हुई है और कॉफ़ीस्क्रिप्ट (संस्करण 1.1.3) के पहले से पुराने संस्करण का समर्थन करती है। इसलिए, बंडलट्रांसफॉर्मर.कॉफस्क्रिप्ट के नए संस्करणों में, मुझे इसे छोड़ना पड़ा और अपने स्वयं के कंपाइलर को लागू करना पड़ा जो कॉफीस्क्रिप्ट 3.3 का समर्थन करता है।

minimizers

बंडल ट्रांसफॉर्मर बनाते समय मुख्य कार्य डेवलपर को कई मिनिमाइज़र से चुनने का अवसर प्रदान करना था। उत्पाद के शुरुआती संस्करणों में, एडेप्टर केवल मिनिमाइज़र के 2 परिवारों के लिए डेवलपर के लिए उपलब्ध थे: माइक्रोसॉफ्ट अजाक्स मिनिफायर और वाईयूआई कंप्रेसर । वर्तमान संस्करण में, एडेप्टर लगभग सभी लोकप्रिय सीएसएस और जेएस कोड न्यूनतम के लिए उपलब्ध हैं।

बंडल ट्रांसफार्मर: बंद

बंडलट्रांसफॉर्मर.क्लोजर में 2 जेएस मिनिमाइज़र होते हैं: ClosureRemoteJsMinifier और ClosureLocalJsMinifier । ClosureRemoteJsMinifier Google क्लोजर कंपाइलर सेवा API वेब सेवा का उपयोग करके न्यूनतम करता है और इसके लिए एक स्थायी इंटरनेट कनेक्शन की आवश्यकता होती है। कंसोल एप्लिकेशन Google क्लोजर कंपाइलर एप्लिकेशन के माध्यम से ClosureLocalJsMinifier न्यूनतम होता है, और इसके लिए आवश्यकता होती है: जावा वर्चुअल मशीन और कंपाइलर का नवीनतम संस्करण। फाइल।

बंडल ट्रांसफार्मर: JSMin

बंडलट्रांसफॉर्मर। जेएसएम में क्रॉकफोर्डजाइमिनिफायर जेएस कोड मिनिमाइज़र एडॉप्टर है। CrockfordJsMinifier JSMin के C # पोर्ट पर आधारित है, जो कि सबसे पुराना JS कोड मिनिमाइज़र है , जो डगलस क्रॉकफोर्ड द्वारा लिखा गया है। 22 मई 2007 के JSMin संस्करण के आधार पर C # पोर्ट का उपयोग किया गया था।

बंडल ट्रांसफार्मर: UglifyJS

बंडलट्रांसफॉर्मर.UglifyJs में UglifyJsMinifier JS कोड UglifyJsMinifier । UglifyJsMinifier JS कोड मिनिमाइज़र पर आधारित है, जो Node.js समुदाय में लोकप्रिय है, UglifyJS (संस्करण 1.3.3 अब समर्थित है)।

बंडल ट्रांसफार्मर: पैकर

बंडलट्रांसफॉर्मर.पैकर में एडवर्ड्सजाइमिनिफायर जेएस कोड EdwardsJsMinifier । EdwardsJsMinifier डीन एडवर्ड्स पैकर संस्करण 3.0 JS न्यूनतम पर आधारित है। पैकर की मुख्य विशेषता यह है कि कोड को न्यूनतम और बाधित करने के अलावा, यह बेस 62 एल्गोरिथ्म का उपयोग करके कोड को संपीड़ित भी कर सकता है। वेब सर्वर GZIP / Deflate संपीड़न का समर्थन नहीं करने पर Base62 संपीड़न का उपयोग किया जा सकता है।

बंडल ट्रांसफार्मर: CSSO

बंडलट्रांसफॉर्मर.कोसो में क्रेजानोव्स्की सीएसएसएमनिफ़र सीएसएस मिनिमाइज़र एडाप्टर शामिल हैं। KryzhanovskyCssMinifier CSS- minimalizer CSSO पर आधारित है (संस्करण 1.2.18 अब समर्थित है)। यह मिनिमाइज़र BEM कार्यप्रणाली के डेवलपर्स द्वारा बनाया गया था: सर्गेई क्रिज़ानोव्स्की और विटाली हरिसोव। इस CSS मिनिमाइज़र और अन्य CSS न्यूनतमकरण उपकरणों के बीच मुख्य अंतर संरचनात्मक कम से कम करने के लिए समर्थन है (उदाहरण के लिए, निम्नलिखित ऑपरेशन CSS कोड के साथ किए जाते हैं: एक ही चयनकर्ताओं के साथ ब्लॉक विलय करना, अतिव्यापी गुणों को हटाना, एक अलग ब्लॉक में गुणों को आंशिक रूप से हाइलाइट करना, आंशिक रूप से विलय ब्लॉक और आदि)। "मशीन" (उदाहरण के लिए, एक प्रीप्रोसेसर) द्वारा उत्पन्न कोड को कम करते समय स्ट्रक्चरल मिनिमाइजेशन एक उच्च डिग्री संपीड़न देता है।

मैं एक महत्वपूर्ण बिंदु को नोट करना चाहता हूं: CSSO ECMAScript 5 में लिखा गया था और बहुत लंबे समय तक मुझे .NET के लिए एक जेएस इंजन नहीं मिला जो इस लाइब्रेरी के लिए कोड को सही ढंग से निष्पादित कर सके। परिणामस्वरूप, मैंने .NET के लिए V8 JS इंजन को लागू करने का विकल्प चुना - Noesis Javascript .NET । यह इंजन आंशिक रूप से अप्रबंधित कोड में लिखा गया है और इसके 2 संस्करण हैं: 32-बिट और 64-बिट। इस कार्यान्वयन सुविधा के कारण, बंडलट्रांसफॉर्मर.कोसो मॉड्यूल 2 नुगेट पैकेजों में विभाजित किया गया था: बंडलट्रांसफॉर्मर.सीएसओ । X 86 और बंडलट्रांसफॉर्मर.सीएसओ । X 64 । msvcp100.dll जावास्क्रिप्टस्क्रिप्ट .NET के सही संचालन के लिए, Microsoft Visual C ++ 2010 से msvcp100.dll और msvcr100.dll आवश्यकता होती है। यदि आपके सिस्टम में ये असेंबली नहीं हैं, तो मैं सुझाव देता हूं कि आप Microsoft Visual Studio + 2010 Redistributable Package ( x86 , x64 ) स्थापित करें।

बंडल ट्रांसफार्मर: वेबग्रे

बंडलट्रांसफॉर्मर। WG में WgCssMinifier CSS WgCssMinifier । WgCssMinifier Microsoft के वेबग्रेज़ लाइब्रेरी से एक अर्थ सीएसएस मिनिमाइज़र का उपयोग करके CSS को कम करता है। CSSG की तरह WebGrease का अर्थ सीएसएस न्यूनतम, संरचनात्मक CSS न्यूनतमकरण का उत्पादन करता है।

फिलहाल, बंडलट्रांसफॉर्मर.जी नूगेट पैकेज में अल्फा स्थिति है, जैसा कि वेबग्रेस के मौजूदा संस्करण (संस्करण 1.1.0) में एक त्रुटि है और इसलिए इसे साइटों के उत्पादन संस्करणों में उपयोग नहीं किया जा सकता है।

यदि आप इस न्यूनतम के बारे में अधिक जानना चाहते हैं, तो मैं आपको हावर्ड डॉकिंग की वीडियो रिपोर्ट "बंडलिंग और ऑप्टिमाइज़िंग" देखने की सलाह देता हूं।

मिनिमाइज़र के उपयोग के लिए सिफारिशें

पहले तीन से सबसे भरोसेमंद मिनिमाइज़र न्यूनतम हैं: Microsoft Ajax Minifier, YUI कंप्रेसर और Google क्लोजर कंपाइलर (JS-code के संपीड़न की डिग्री में अग्रणी)। उनमें से सभी में एक अच्छा संपीड़न अनुपात है, और उनके द्वारा व्यावहारिक रूप से संसाधित कोड में त्रुटियां नहीं हैं।

नए न्यूनतम जो Node.js के लिए विकसित किए गए थे: UglifyJS और CSSO पहले तीन के न्यूनतम की तुलना में उच्चतर संपीड़न देते हैं (UglifyJS कुछ मामलों में Simple मोड में Google बंद कंपाइलर की तुलना में बेहतर संपीड़ित करता है), लेकिन फिर भी इस स्तर की विश्वसनीयता नहीं है ।

सबसे पुराने न्यूनतम: JSMin और पैकर, अब केवल सरल JS कोड को संपीड़ित करने के लिए उपयुक्त हैं। दुर्भाग्य से, वे संपीड़न अनुपात और विश्वसनीयता स्तर दोनों के संदर्भ में आधुनिक न्यूनतम से हार जाते हैं।

मैंने इसमें शामिल त्रुटि की बारीकियों के कारण अन्य न्यूनतम के साथ वेबग्रेस्ट के सिमेंटिक सीएसएस न्यूनतम की तुलना नहीं की। लेकिन सामान्य टिप्पणियों के अनुसार, यह मुझे लगता है कि इसमें सीएसएसओ की तुलना में कोड संपीड़न की एक बड़ी डिग्री है।

सेटिंग्स

बंडल ट्रांसफार्मर की वर्तमान सेटिंग्स Web.config फ़ाइल के निम्न संस्करण के बराबर है (यदि सभी अतिरिक्त मॉड्यूल स्थापित हैं):

 <?xml version="1.0" encoding="utf-8"?> <configuration> <configSections> <!-- Declaration of Bundle Transformer configuration section group --> <sectionGroup name="bundleTransformer"> <section name="core" type="BundleTransformer.Core.Configuration.CoreSettings" /> <section name="less" type="BundleTransformer.LessLite.Configuration.LessLiteSettings" /> <section name="sassAndScss" type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings" /> <section name="microsoftAjax" type="BundleTransformer.MicrosoftAjax.Configuration.MicrosoftAjaxSettings" /> <section name="yui" type="BundleTransformer.Yui.Configuration.YuiSettings" /> <section name="closure" type="BundleTransformer.Closure.Configuration.ClosureSettings" /> <section name="uglify" type="BundleTransformer.UglifyJs.Configuration.UglifySettings" /> <section name="packer" type="BundleTransformer.Packer.Configuration.PackerSettings" /> <section name="csso" type="BundleTransformer.Csso.Configuration.CssoSettings" /> </sectionGroup> <!-- /Declaration of Bundle Transformer configuration section group --> ... </configSections> ... <!-- Bundle Transformer configuration settings --> <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd"> <core enableTracing="false" jsFilesWithMicrosoftStyleExtensions="MicrosoftAjax.js,MicrosoftMvcAjax.js, MicrosoftMvcValidation.js,knockout-$version$.js" useEnableOptimizationsProperty="true"> <css defaultMinifier="NullMinifier"> <minifiers> <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" /> <add name="MicrosoftAjaxCssMinifier" type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxCssMinifier, BundleTransformer.MicrosoftAjax" /> <add name="YuiCssMinifier" type="BundleTransformer.Yui.Minifiers.YuiCssMinifier, BundleTransformer.Yui" /> <add name="KryzhanovskyCssMinifier" type="BundleTransformer.Csso.Minifiers.KryzhanovskyCssMinifier, BundleTransformer.Csso" /> <add name="WgCssMinifier" type="BundleTransformer.WG.Minifiers.WgCssMinifier, BundleTransformer.WG" /> </minifiers> <translators> <add name="NullTranslator" type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core" enabled="false" /> <add name="LessTranslator" type="BundleTransformer.LessLite.Translators.LessTranslator, BundleTransformer.LessLite" enabled="true" /> <add name="SassAndScssTranslator" type="BundleTransformer.SassAndScss.Translators.SassAndScssTranslator, BundleTransformer.SassAndScss" enabled="true" /> </translators> </css> <js defaultMinifier="NullMinifier"> <minifiers> <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" /> <add name="MicrosoftAjaxJsMinifier" type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxJsMinifier, BundleTransformer.MicrosoftAjax" /> <add name="YuiJsMinifier" type="BundleTransformer.Yui.Minifiers.YuiJsMinifier, BundleTransformer.Yui" /> <add name="ClosureRemoteJsMinifier" type="BundleTransformer.Closure.Minifiers.ClosureRemoteJsMinifier, BundleTransformer.Closure" /> <add name="ClosureLocalJsMinifier" type="BundleTransformer.Closure.Minifiers.ClosureLocalJsMinifier, BundleTransformer.Closure" /> <add name="CrockfordJsMinifier" type="BundleTransformer.JsMin.Minifiers.CrockfordJsMinifier, BundleTransformer.JsMin" /> <add name="UglifyJsMinifier" type="BundleTransformer.UglifyJs.Minifiers.UglifyJsMinifier, BundleTransformer.UglifyJs" /> <add name="EdwardsJsMinifier" type="BundleTransformer.Packer.Minifiers.EdwardsJsMinifier, BundleTransformer.Packer" /> </minifiers> <translators> <add name="NullTranslator" type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core" enabled="false" /> <add name="CoffeeScriptTranslator" type="BundleTransformer.CoffeeScript.Translators.CoffeeScriptTranslator, BundleTransformer.CoffeeScript" enabled="true" /> </translators> </js> <assetHandler clientCacheDurationInDays="365" enableCompression="true" useLastModifiedHeader="true" useETagHeader="true" serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false" disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" /> </core> <less useNativeMinification="false" severity="0" /> <sassAndScss useNativeMinification="false" /> <microsoftAjax> <css allowEmbeddedAspNetBlocks="false" colorNames="Strict" commentMode="Important" ignoreErrorList="" indentSize="4" minifyExpressions="true" outputMode="SingleLine" blocksStartOnSameLine="NewLine" preprocessorDefineList="" termSemicolons="false" severity="0" /> <js allowEmbeddedAspNetBlocks="false" collapseToLiteral="true" debugLookupList="Debug,$Debug,WAssert,Msn.Debug,Web.Debug" evalTreatment="Ignore" ignoreConditionalCompilation="false" ignoreErrorList="" indentSize="4" inlineSafeStrings="true" knownGlobalNamesList="" localRenaming="CrunchAll" macSafariQuirks="true" minifyCode="true" noAutoRenameList="$super" outputMode="SingleLine" blocksStartOnSameLine="NewLine" preprocessorDefineList="" preserveFunctionNames="false" preserveImportantComments="true" removeFunctionExpressionNames="true" removeUnneededCode="true" renamePairs="" strictMode="false" stripDebugStatements="true" termSemicolons="false" severity="0"/> </microsoftAjax> <yui> <css compressionType="Standard" removeComments="true" lineBreakPosition="-1" /> <js compressionType="Standard" obfuscateJavascript="true" preserveAllSemicolons="false" disableOptimizations="false" ignoreEval="false" severity="0" lineBreakPosition="-1" encoding="UTF8" threadCulture="en-us" /> </yui> <closure> <js> <remote closureCompilerServiceApiUrl="http://closure-compiler.appspot.com/compile" compilationLevel="Simple" prettyPrint="false" excludeDefaultExterns="false" severity="0" /> <local javaVirtualMachinePath="" closureCompilerApplicationPath="" compilationLevel="Simple" prettyPrint="false" languageSpec="EcmaScript3" thirdParty="true" processJqueryPrimitives="false" processClosurePrimitives="false" severity="0" /> </js> </closure> <uglify> <js> <parser strictSemicolons="false" /> <mangler mangle="true" topLevel="false" defines="" except="" noFunctions="false" /> <squeezer makeSequences="true" deadCode="true" unsafe="false" /> <codeGenerator beautify="false" indentStart="0" indentLevel="4" quoteKeys="false" spaceColon="false" asciiOnly="false" /> </js> </uglify> <packer> <js shrinkVariables="true" base62Encode="false" /> </packer> <csso> <css disableRestructuring="false" /> </csso> </bundleTransformer> <!-- /Bundle Transformer configuration settings --> ... </configuration> 

में पिछले समीक्षा मैं पहले से ही विन्यास खंड की संरचना का वर्णन किया है bundleTransformer, इसलिए इस समय सीमित अपने आप नए वर्गों को सूचीबद्ध करने के:

• closure - बंडलट्रांसफॉर्मर.क्लोजर मॉड्यूल के लिए सेटिंग्स
• uglify - बंडलट्रांसफॉर्मर के लिए सेटिंग्स। UglifyJs मॉड्यूल
• packer - बंडलट्रांसफॉर्मर.पैकर मॉड्यूल की सेटिंग्स
• csso - बंडलट्रांसफॉर्मर.कोसो मॉड्यूल की सेटिंग्स

उपरोक्त कॉन्फ़िगरेशन अनुभागों के गुणों के नाम और संभावित मान भी स्पष्टीकरण की आवश्यकता नहीं है, क्योंकि मूल न्यूनतम के विन्यास गुणों के साथ लगभग पूरी तरह से मेल खाता है। मैं आपको यह भी याद दिलाता हूं कि कॉन्फ़िगरेशन अनुभाग के लिए bundleTransformerIntelliSense समर्थन कार्यान्वित किया गया है :

निष्कर्ष

अंत में, मैं बी / एम और बंडल ट्रांसफार्मर के बारे में कुछ महत्वपूर्ण बिंदुओं को इंगित करना चाहूंगा।

बहुत से लोग सोचते हैं कि B / M केवल ASP.NET MVC के साथ काम कर सकता है, लेकिन ऐसा नहीं है। आप अन्य ASP.NET फ्रेमवर्क में B / M का उपयोग कर सकते हैं: वेब फॉर्म और वेब पेज (लिंक अनुभाग में लेख होते हैं जो यह वर्णन करते हैं कि यह कैसे करना है)।

B / M और बंडल ट्रांसफार्मर के वर्तमान संस्करण .NET फ्रेमवर्क 4.0 के तहत लिखे गए हैं, इसलिए ASP.NET MVC 3 और ASP.NET वेब प्रपत्र 4.0 में इनका उपयोग करने से आपको कुछ भी नहीं रोक रहा है।

संदर्भ

1. कोडप्लेक्स बंडल ट्रांसफार्मर पृष्ठ
2. पृष्ठ माइक्रोसॉफ्ट ASP.NET वेब अनुकूलन फ्रेमवर्क CodePlex पर
3. हावर्ड डॉर्किंग की वीडियो रिपोर्ट बंडलिंग और ऑप्टिमाइज़िंग
4. - «Build high-performing HTML 5 applications easily with ASP.NET 4.5»
5. «Bundling and Minification»
6. «Adding Bundling and Minification to Web Forms» ( )
7. «Adding Web Optimization to a Web Pages Site» ( )
8. «Keeping in touch with the Web optimization team»