HTML मिनिफिकेशन? [बन्द है]

Question

क्या कोई ऑनलाइन टूल है जिसे हम किसी पृष्ठ के HTML स्रोत में इनपुट कर सकते हैं और कोड को छोटा करेंगे?

मैं ऐसा करने के लिए aspx फ़ाइलों के रूप में यह वेबसर्वर gzip उन्हें बनाने के लिए एक अच्छा विचार नहीं है ...

Comments

जब सर्वर gzip होना एक बुरा विचार है?

— चक

मैंने पढ़ा है कि क्योंकि aspx पृष्ठ स्थिर फ़ाइलें नहीं हैं, यह IIS द्वारा कैश नहीं किया जाएगा और इसलिए यह प्रत्येक अनुरोध पर पृष्ठ को दबाएगा ...

— पाउलो

... और यह एक समस्या है? जब तक आप सर्वर पहले से ही 99.9% CPU पर हैं, शायद नहीं। gzipping करना सामान्य बात है और किसी 'minification' की तुलना में अधिक प्रभावी है।

— बोबिन्स

यह काफी दिलचस्प लगता है: perfectionkills.com/experimenting-with-html-minifier kangax.github.com/html-minifier

— स्टीफन

यहां उत्तर पुराने हैं, यह उल्लेख करने के लिए नहीं कि उनमें से कुछ गलत हैं। कृपया समस्या और उचित उपकरण के बारे में मेरे स्पष्टीकरण की जाँच करें ।

— साल्वाडोर डाली

Answer 1

शायद HTML कंप्रेसर का प्रयास करें, यहां पहले और बाद में दिखाया गया है कि यह क्या कर सकता है (स्टैक ओवरफ्लो के लिए भी)

यह आपके पृष्ठों को अनुकूलित करने और स्क्रिप्ट को कम करने सहित (ओमप्रेस, Google क्लोजर कंपाइलर, अपना खुद का कंप्रेसर) सहित कई चयनों की सुविधा देता है जहां यह सुरक्षित होगा। डिफ़ॉल्ट विकल्प सेट काफी रूढ़िवादी है, इसलिए आप इसके साथ शुरू कर सकते हैं और अधिक आक्रामक विकल्पों को सक्षम करने के साथ प्रयोग कर सकते हैं।

परियोजना बहुत अच्छी तरह से प्रलेखित और समर्थित है।

Answer 2

यह मत करो । या इसके बजाय, यदि आप इस पर जोर देते हैं, तो किसी भी अधिक महत्वपूर्ण साइट अनुकूलन पूरा होने के बाद इसे करें। संभावना बहुत अधिक है कि इस प्रयास के लिए लागत / लाभ नगण्य है, खासकर यदि आप प्रत्येक पृष्ठ से निपटने के लिए मैन्युअल रूप से ऑनलाइन टूल का उपयोग करने की योजना बना रहे थे।

अपने पृष्ठों को अनुकूलित करने के लिए आपको वास्तव में क्या करना है, यह निर्धारित करने के लिए YSlow या पृष्ठ गति का उपयोग करें । मेरा अनुमान है कि HTML के बाइट्स को कम करना आपकी साइट की सबसे बड़ी समस्या नहीं होगी। यह बहुत अधिक संभावना है कि संपीड़न, कैश प्रबंधन, छवि अनुकूलन, आदि से आपकी साइट के प्रदर्शन में बड़ा अंतर आएगा। वे उपकरण आपको दिखाएंगे कि सबसे बड़ी समस्याएं क्या हैं - यदि आप उन सभी से निपट चुके हैं और अभी भी पाते हैं कि एचटीएमएल मिनिफिकेशन एक महत्वपूर्ण अंतर बनाता है, तो इसके बारे में जानें।

(यदि आप सुनिश्चित हैं कि आप इसके लिए जाना चाहते हैं, और आप अपाचे httpd का उपयोग करते हैं, तो आप mod_pagespeed का उपयोग करने और व्हॉट्सएप को कम करने के कुछ विकल्पों को चालू करने आदि पर विचार कर सकते हैं , लेकिन जोखिमों से अवगत रहें ।)

Comments

यदि स्वचालित सौंदर्यीकरण का उपयोग करके पढ़ना आसान है, तो अनुकूलन में क्या गलत है?

यह शायद सबसे बड़ी समस्या नहीं है - लेकिन अगर यह रीप्लेक्स के मिनिफाइंग सेट के माध्यम से मार्कअप को चलाने की एक तुच्छ प्रक्रिया है, जब देव से क्यूए या ठेस के लिए संकलन किया जाता है, तो आप छोटे मार्कअप दस्तावेज क्यों नहीं भेजना चाहेंगे?

— विल पीवे

वास्तव में मूल प्रश्न का उत्तर नहीं :(

— ले ले बट

@Will, यह लगभग निश्चित रूप से HTML को रनिंग रेक्स के माध्यम से चलाने के लिए एक तुच्छ प्रक्रिया नहीं है, और यहां तक ​​कि उचित पार्सर का उपयोग करके यह संभवतः तुच्छ या तेज़ नहीं है। जेएस / सीएसएस मिनिफिकेशन के विपरीत, अधिक क्या है, एचटीएमएल मिनिफ़िकेशन दोषरहित नहीं होगा: किसी भी टैग को स्टाइल किया जा सकता है white-space: pre, और मिनिमाइज़ेशन पूर्व-स्वरूपित पाठ को नष्ट कर देगा।

— पलकविहीनता

@eyelidlessness - मेरे पास वर्तमान में हजारों पृष्ठ हैं, जिनकी सेवा करने से पहले उन्हें regexes द्वारा छोटा कर दिया जाता है। यह फ़ंक्शन सिस्टम का एक जटिल या महंगा हिस्सा नहीं है। ... दूसरी ओर, यदि आप न्यूनतम शैली को पार्स करना चाहते हैं ताकि स्टाइल करने वाले तत्वों से बच सकें white-space:pre, तो हाँ, HTML को छोटा करना अधिक जटिल होगा। हालाँकि, मैं इस बारे में स्पष्ट नहीं हूं कि कोई व्यक्ति श्वेत-स्थान का उपयोग क्यों करना चाहता है: किसी तत्व preया codeतत्व का उपयोग करने के बजाय ।

— विल पीवे

Answer 3

यहाँ आपके प्रश्न का संक्षिप्त उत्तर है: आपको अपने HTML, CSS, JS को छोटा करना चाहिए । उपकरण का उपयोग करने के लिए एक आसान है जिसे ग्रंट कहा जाता है । यह आपको बहुत सारे कार्यों को स्वचालित करने की अनुमति देता है। उनमें जेएस , सीएसएस , एचटीएमएल मिनिफिकेशन, फाइल कॉन्टेनेशन और कई अन्य ।

यहां लिखे गए उत्तर बेहद पुराने हैं या कभी-कभी समझ में नहीं आते हैं। पुरानी 2009 से बहुत सी चीजें बदल गईं, इसलिए मैं इसका ठीक से जवाब देने की कोशिश करूंगा।

संक्षिप्त उत्तर - आपको निश्चित रूप से HTML को छोटा करना चाहिए । यह आज तुच्छ है और लगभग 5% स्पीडअप देता है । अधिक उत्तर के लिए पूरा उत्तर पढ़ें

पुराने दिनों में लोग मैन्युअल रूप से सीएसएस / जेएस को छोटा कर रहे थे (इसे छोटा करने के लिए कुछ विशिष्ट उपकरण के माध्यम से चलाकर)। यह प्रक्रिया को स्वचालित करने के लिए कठिन था और निश्चित रूप से कुछ कौशल की आवश्यकता थी। यह जानते हुए कि अभी भी बहुत सारे उच्च स्तरीय साइटें gzip (जो कि तुच्छ है) का उपयोग नहीं कर रही हैं, यह समझने योग्य है कि लोग HTML को छोटा करने में अनिच्छुक थे।

तो लोग js minify क्यों कर रहे थे, लेकिन html नहीं ? जब आप JS को छोटा करते हैं, तो आप निम्न कार्य करते हैं:

• टिप्पणियों को हटा दें
• रिक्तियां निकालें (टैब, रिक्त स्थान, newlines)
• लंबे नामों को संक्षिप्त ( var isUserLoggedInमें var a) बदलें

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

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

एक और तर्क यह है कि क्यों ना करने के लिए निरर्थक है कि यह थकाऊ है। शायद 2009 में यह सच था, लेकिन नए उपकरण इस समय के बाद दिखाई दिए। अभी आपको अपने मार्कअप को मैन्युअल रूप से निर्दिष्ट करने की आवश्यकता नहीं है। जैसी चीजों के साथ ग्रंट इसे स्थापित करने तुच्छ है घुरघुराना-योगदान-htmlmin (पर निर्भर करता है HTMLMinifier @kangax द्वारा) है और यह कॉन्फ़िगर करने के लिए अपने html कम करें करने के लिए। आपको ग्रंट सीखने और सब कुछ कॉन्फ़िगर करने के लिए 2 घंटे की तरह है और फिर सब कुछ एक सेकंड से भी कम समय में स्वचालित रूप से किया जाता है। लगता है कि 1 सेकंड (जिसे आप ग्रंट-कॉन्ट्रिब-वॉच के साथ कुछ भी नहीं करने के लिए स्वचालित कर सकते हैं ) लगभग 5% सुधार (गज़िप के साथ भी) के लिए वास्तव में इतना बुरा नहीं है।

एक और तर्क यह है कि सीएसएस और जेएस स्थिर हैं , और एचटीएमएल सर्वर द्वारा उत्पन्न होता है ताकि आप इसे पूर्व-निर्धारित न कर सकें। यह 2009 में भी सच था, लेकिन वर्तमान में अधिक से अधिक साइटें सिंगल पेज ऐप की तरह दिख रही हैं, जहां सर्वर पतला है और क्लाइंट सभी राउटिंग, टेम्प्लेटिंग और अन्य लॉजिक कर रहा है। इसलिए सर्वर आपको केवल JSON और क्लाइंट इसे रेंडर कर रहा है। यहां आपके पास पृष्ठ और विभिन्न टेम्पलेट्स के लिए बहुत सारे HTML हैं।

तो मेरे विचार समाप्त करने के लिए:

• google, html को छोटा कर रहा है।
• PageSpeed html को छोटा करने के लिए कह रहा है
• यह करने के लिए तुच्छ है
• यह ~ 5% सुधार देता है
• यह गज़िप के समान नहीं है

Comments

HTML को न्यूनतम करना बिल्कुल तुच्छ नहीं है, क्योंकि व्हाट्सएप HTML में महत्वपूर्ण है और क्या यह किसी दिए गए व्हाट्सएप को हटाया जा सकता है यह CSS पर निर्भर करता है। इसके अलावा, पतले ग्राहक भयानक हैं और मेरी राय में, गतिशील HTML को छोटा करने की परेशानी के खिलाफ एक अच्छे तर्क के रूप में दिया जा सकता है। (एक अच्छा यह करने के लिए जिस तरह से एक टेम्पलेट इंजन [Haml, जेड, आदि] कि पहली जगह में अपने गाया उत्पादन में अनावश्यक खाली स्थान के शामिल नहीं है लेने है।)

— Ry-

@ मिनिटेक मिनिमाइजिंग HTML तुच्छ है, व्हाट्सएप के साथ कुछ संभावित समस्याएं भी हैं (जैसे <span>)। सबसे पहले आप हमेशा वैध HTML लिखने का एक तरीका खोज सकते हैं जो इसे व्हाट्सएप अज्ञेय बना रहा है। यह सुनकर आपको आश्चर्य भी हो सकता है, लेकिन JS / CSS मिनिफायर बग का परिचय भी दे सकता है - जिसका अर्थ यह नहीं है कि आपको इसका उपयोग नहीं करना चाहिए। तो अपनी समस्या को हल करने के दो तरीके: व्हाट्सएप एग्नॉस्टिक मार्कअप लिखना सीखें, अपने उत्पाद को minification (CSS / HTML / JS) के पहले / बाद में परखें। मिनिफायर में भी आप निर्दिष्ट कर सकते हैं कि आप किन व्हाट्सएप को संरक्षित करना चाहते हैं।

— साल्वाडोर डाली

गैर-पागल कोड (यानी जो कोड खुद नहीं पढ़ता या समय पर धोखा नहीं देता है) पर सही जावास्क्रिप्ट मिनिफ़ायर एक बग का परिचय नहीं दे सकता है। और नहीं, व्हाट्सएप-अज्ञेय HTML लिखने का हमेशा एक तरीका नहीं है, विशेष रूप से क्योंकि HTML है, फिर से, व्हाट्सएप-अज्ञेयवादी नहीं। बिल्कुल भी। इस पर नकल और चिपकाने का परीक्षण करना सुनिश्चित करें यदि आपको लगता है कि मार्जिन इसे काट देगा। निर्दिष्ट क्या खाली स्थान के मैं समय की बर्बादी की तरह लगता है सुरक्षित रखना चाहते हैं (गूगल को छोड़कर) ...

— Ry-

@ मिनिटेक क्या आप मुझे सीएसएस दिखा सकते हैं जो सफेद-अंतरिक्ष अज्ञेय तरीके से लिखना असंभव है? मैं एक लंबे समय के लिए HTML की स्थापना कर रहा हूं, और अब तक समस्याओं को नहीं देखा है।

— साल्वाडोर डाली

* { white-space: pre; }एक स्पष्ट है, लेकिन अगर आप सभी व्हाट्सएप को हटा रहे हैं और न केवल इसे ध्वस्त कर रहे हैं (इसके बजाय इसे मार्जिन के साथ बदल रहे हैं), पाठ गलत तरीके से कॉपी कर सकते हैं और पाठ ब्राउज़रों और स्क्रीन पाठकों पर कहर बरपा सकते हैं।

— Ry-

Answer 4

मैंने HTML को छोटा करने के लिए एक वेब टूल लिखा था। http://prettydiff.com/?m=minify&html

यह उपकरण इन नियमों का उपयोग करके संचालित होता है:

सभी HTML टिप्पणियाँ हटा दी जाती हैं

सफेद अंतरिक्ष वर्णों के रन एकल अंतरिक्ष वर्णों में परिवर्तित हो जाते हैं

टैग के अंदर अनावश्यक सफेद स्थान वर्ण हटा दिए जाते हैं

दो टैग्स के बीच व्हाइट स्पेस कैरेक्टर जहां इन दो टैग्स में से एक सिंगलटन नहीं हटा है

एक styleटैग के अंदर सभी सामग्री को सीएसएस माना जाता है और इसे इस तरह से छोटा किया जाता है

एक scriptटैग के अंदर सभी सामग्री को जावास्क्रिप्ट के रूप में माना जाता है, जब तक कि एक अलग मीडिया प्रकार प्रदान नहीं किया जाता है, और फिर इस तरह से छोटा किया जाता है

• CSS और JavaScript मिनिमाइज़ेशन JSMin के भारी कांटे वाले रूप का उपयोग करता है। यह कांटा CSS को मूल रूप से समर्थन करने के लिए बढ़ाया गया है और SCSS सिंटैक्स का भी समर्थन करता है। स्वचालित अर्धविराम सम्मिलन को जावास्क्रिप्ट न्यूनतम करने के लिए समर्थित है, हालाँकि स्वचालित घुंघराले ब्रेस सम्मिलन का अभी तक समर्थन नहीं किया गया है।

Comments

नमस्ते, यह इस लाइन को हटा दें! <!--[if IE 8.0]><link rel="stylesheet" href="css/ie8.css" type="text/css" /><![endif]-->

— अनूपको

यदि आप को प्रयोग कर रहे हैं तो हाँ यह एक आपदा होगी!

— रे सुलेजर

Answer 5

यह मेरे लिए काम किया:

http://minify.googlecode.com/git/min/lib/Minify/HTML.php

यह पहले से उपलब्ध ऑनलाइन टूल नहीं है, लेकिन एक साधारण PHP होने के नाते यह इतना आसान है कि आप बस इसे स्वयं चला सकते हैं।

हालांकि मैं संकुचित फ़ाइलों को नहीं बचाऊंगा, यह गतिशील रूप से करें यदि आपको वास्तव में करना है, और यह हमेशा एक बेहतर विचार है ताकि Gzip सर्वर संपीड़न को सक्षम किया जा सके। मुझे नहीं पता कि IIS / .Net में यह कैसे शामिल है, लेकिन PHP में यह उतना ही तुच्छ है जितना कि वैश्विक लाइन फ़ाइल में एक पंक्ति जोड़ना

Answer 6

निम्नलिखित कुछ स्थितियों को संभालने के लिए कोडप्रोजेक्ट में एक प्रकाशित नमूना परियोजना ( http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900 ) है। ।

• ScriptResource.axd को एक कॉल में संयोजित करना
• Gzip / deflate सहित ब्राउज़र की क्षमता के आधार पर सभी क्लाइंट साइड स्क्रिप्ट को संपीड़ित करें
• एक ScriptMinifier टिप्पणी, इंडेंटेशन और लाइन ब्रेक को हटाने के लिए।
• Gzip / deflate सहित ब्राउज़र क्षमता के आधार पर सभी HTML मार्कअप को संपीड़ित करने के लिए एक HTML कंप्रेसर।
• और - सबसे महत्वपूर्ण बात - एक HTML मिनिफ़र को पूरा HTML को एक पंक्ति में लिखने और इसे संभावित स्तर (निर्माणाधीन) में छोटा करना।

Answer 7

Microsoft .NET प्लेटफ़ॉर्म के लिए WebMarkupMin नामक एक लाइब्रेरी है , जो HTML कोड के मिनिमाइज़ेशन का उत्पादन करती है।

इसके अलावा, ASP.NET MVC - WebMarkupMin.Mvc में इस लाइब्रेरी को एकीकृत करने के लिए एक मॉड्यूल है ।

Answer 8

http://code.mini-tips.com/html-minifier.html आज़माएं , यह Html Minifier के लिए .NET Libary है

HtmlCompressor .NET लाइब्रेरी का उपयोग करने के लिए एक छोटा, तेज और बहुत आसान है जो सामग्री संरचना को तोड़ने के बिना अतिरिक्त व्हाट्सएप, टिप्पणियों और अन्य अनावश्यक वर्णों को हटाकर HTML या XML स्रोत को निर्दिष्ट करता है। परिणामस्वरूप पृष्ठ आकार में छोटे हो जाते हैं और तेजी से लोड होते हैं। कंप्रेसर का एक कमांड-लाइन संस्करण भी उपलब्ध है।