मेरे पास दस्तावेज़ के अंदर सीएसएस और जावास्क्रिप्ट के साथ एक .html दस्तावेज़ है (कोई बाहरी फाइल नहीं)। क्या कोई ऑनलाइन उपकरण है जो दस्तावेज़ और जावास्क्रिप्ट को बहुत छोटे पदचिह्न में छोटा कर देगा? मैंने कई स्क्रिप्ट्स को अपठनीय देखा, जहां सभी चर और फ़ंक्शन नामों को एक-अक्षर नाम, आदि के साथ प्रतिस्थापित किया गया है। कृपया सलाह दें।सीएसएस और जावास्क्रिप्ट के साथ एचटीएमएल को कैसे कम करें?
2 संपादित करें (फरवरी 22, 2017) के लिए इसे बाहर की कोशिश करना चाहते हो सकता है: अपनी संपत्ति कम करें करने के लिए सबसे अच्छा उपकरण अब (और लोडर और प्लगइन्स जोड़कर, और बहुत कुछ) निश्चित रूप से Webpack है। config की
उदाहरण अपने सभी .css में एक फ़ाइल स्थानांतरित करने के लिए और कम करें यह:
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
}
]
}
संपादित करें 1 (सितम्बर 16, 2014): और भी बेहतर, अब आपके पास कार्य धावक जैसे Gulp या Grunt।
टास्क धावकों छोटे अनुप्रयोगों कि समय, लेने वाली उबाऊ (लेकिन बहुत महत्वपूर्ण) आप करने के लिए है कि कार्य एक परियोजना के विकास, जबकि ऐसा करने के कई स्वचालित करने के लिए उपयोग किया जाता है। इनमें परीक्षण चलाने, फ़ाइलों को संयोजित करने, minification, और CSS preprocessing जैसे कार्यों को शामिल किया गया है। द्वारा बस एक कार्य फ़ाइल बनाकर, आप कार्य धावक को पर स्वचालित रूप से किसी भी विकास कार्य का ख्याल रख सकते हैं, जिसे आप सोच सकते हैं जैसे आप अपनी फ़ाइलों में परिवर्तन करते हैं। यह का एक बहुत ही सरल विचार है जो आपको बहुत समय बचाएगा और आपको विकास पर ध्यान केंद्रित करने की अनुमति देगा।
अवश्य पढ़ें: Getting started with Gulp.js
जावास्क्रिप्ट संयोजन और minification (और JSHint) के साथ कार्य का उदाहरण:
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
मूल जवाब (जुलाई 19, 2012): मैं सलाह देने के लिए HTML5 Boilerplate Build Script जो आपके जेएस और सीएसएस को कम कर सकता है।
लेकिन दस्तावेज़ द्वारा उपयोग किए जाने पर जावास्क्रिप्ट मिनीफायर फ़ंक्शन नामों को एक-अक्षर नामों में नहीं बदलेंगे, जैसे 'ऑनलोड' = "पृष्ठ लोड" '- फिर 'पृष्ठ लोड' रहता है: -/ –
कुछ मिनीफ़ीयरों का चयन करने का विकल्प होता है कि क्या साहित्य/फ़ंक्शन नाम/चर नामों को कम करना है या नहीं। –
लेकिन अब तक मुझे हमेशा गैर-जटिल मिनीफायर मिलते हैं। मैं कुछ हिस्सों का ख्याल रखना चाहता हूं जो सभी भागों का ख्याल रखते हैं: जेएस, सीएसएस, एचटीएमएल –
अच्छा जावास्क्रिप्ट कंप्रेसर भी Google's Closure Compiler है और इसके विपरीत, संपीड़ित कोड को थोड़ा बेहतर पठनीय बनाने के लिए आप Javascript Beautifier का उपयोग कर सकते हैं। आप phpEasyMin प्रोजेक्ट पर भी एक नज़र डाल सकते हैं।
इसे करने की कोशिश कभी नहीं लेकिन असली सुना है गूगल की क्लोजर compiler..You की अच्छी समीक्षा
जबकि जावास्क्रिप्ट कोड को संपीड़ित और जावास्क्रिप्ट के भीतर डिकंप्रेस किया जा सकता है (अन्य उत्तरों देखें), सीएसएस में एक ही परिणाम प्राप्त करना वास्तव में कठिन है।वर्तमान में कोई उपकरण नहीं है जो अनावश्यक व्हाइटस्पेस को हटाने से अधिक करेगा (Are there any agressive CSS Minification tools? देखें), क्योंकि एचटीएमएल और सीएसएस के बीच लिंक को नष्ट किए बिना पहचानकर्ता और कक्षा के नामों को बदला नहीं जा सकता है।
इसके अलावा, आप व्हाइटस्पेस को छोड़कर HTML मार्कअप से कुछ भी नहीं हटा सकते हैं। खैर, आप कक्षा के नाम और पहचानकर्ता को कम कर सकते हैं, लेकिन वर्तमान में कोई उपकरण नहीं है जो आपके सीएसएस/जेएस फाइलों में उन न्यूनतम मूल्यों को अपडेट करेगा, इसलिए यह आपकी वेबसाइट बदसूरत और टूटा हुआ होगा। और कुछ सीएसएस प्रभावों को सही करने के लिए भी खाली तत्वों की आवश्यकता होती है (हाँ, मैं आपको देख रहा हूं, आईई 6)। यह जावास्क्रिप्ट फ़ंक्शन नामों पर भी लागू होता है।
टीएल; दुर्भाग्य से कोई भी एक-एक-मिनी-सब कुछ नहीं है। सबसे नज़दीकी बात htmlcompressor है।
मैं उम्मीद करता हूं कि HTML में फ़ंक्शन नामों को प्रतिस्थापित करना और फिर जावास्क्रिप्ट में भी जाना है। अभी के लिए, उदाहरण के लिए, यदि आपके पास 'ऑनलोड = पेज लोड' है, तो फ़ंक्शन का यह नाम उस आकार में रहेगा, लेकिन यह अच्छा होगा कि इसे कुछ छोटे (एक-दो अक्षर) नाम से प्रतिस्थापित किया जाए। तो व्हाइटस्पेस संपीड़न से परे कुछ potentilal है ... –
ठीक है, यह मूल रूप से सीएसएस/एचटीएमएल के साथ एक ही समस्या है - आपको हर जगह फ़ंक्शन नाम बदलना है और टकराव के लिए बाहर देखना है। – Zeta
मुझे डर है कि आप दो चरणों में यह करना होगा हूँ:
मेरे पास कुछ समय पहले (वैश्विक वस्तुओं और ऑब्जेक्ट कुंजी के बारे में) एक समान प्रश्न था। मुझे जो जवाब मिला वह यह था कि कोई भी उपकरण वैश्विक संदर्भ के बारे में धारणा नहीं करेगा। आपके उदाहरण में, वे "पेज लोड" को कम नहीं करेंगे क्योंकि इसका उपयोग किसी अन्य HTML या जेएस खंड द्वारा किया जा सकता है जिसे आपने प्रदान नहीं किया था।
अपने उदाहरण में का संभावित हल Pageload समारोह स्थानीय बनाने के लिए और लिपि में गतिशील ऑनलोड घटना जोड़ने के लिए होगा:
elt.onload=function(){pageLoad();};
+1 :: गतिशील अधिभार के साथ अच्छा बिंदु - धन्यवाद –
Closure compiler सही ढंग से जे एस के लिए सिफारिश की गई है; लेकिन बहुत से लोग Google के Closure stylesheets से अवगत नहीं हैं। बंद स्टाइलशीट सुविधाओं में से एक का नाम बदलने की है, जहां
<style>
.descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
<p class="descriptive-element-class-name">Lorem ipsum</p>
<p class="descriptive-element-class-name">Lorem ipsum</p>
</div>
बन जाएगा
<style>
.a-b .a-c {color:red;}
</style>
<div class="a-b">
<p class="a-c">Lorem ipsum</p>
<p class="a-c">Lorem ipsum</p>
</div>
आगे minification भी वहाँ हो जाएगा; और इस तथ्य को देखते हुए कि ओपी इंगित करता है कि सभी संसाधनों को HTML में शामिल किया गया है, यह ट्रैफिक ओवरहेड में काफी बचत कर सकता है।
एनबी: अगर आप किसी भी Google खोज परिणाम पृष्ठ का निरीक्षण किया, तो आप अपने वर्ग और आईडी नामों को लगभग लंबे समय तक कभी नहीं 4 यादृच्छिक पात्रों
http://prettydiff.com/ प्रयास करें की तुलना में दिखाई देंगे। यह स्वचालित भाषा का पता लगाने की पेशकश करता है और एचटीएमएल, सीएसएस, और जावास्क्रिप्ट को कम कर सकता है। यह टूल मानता है कि माइम प्रकार के बिना या जावास्क्रिप्ट प्रासंगिक माइम प्रकार के बिना स्क्रिप्ट टैग या तो जावास्क्रिप्ट या कुछ भी नहीं होना चाहिए। इसी प्रकार, माइम प्रकार के बिना स्टाइल टैग या "टेक्स्ट/सीएसएस" माइम प्रकार के साथ सीएसएस रखने के लिए माना जाता है। सीएसएस और जावास्क्रिप्ट तदनुसार minified हैं। टूल स्वयं जावास्क्रिप्ट में लिखा गया है। एक से अधिक टूल का उपयोग करने के लिए आपको कोई कारण नहीं होना चाहिए।
यह उदाहरण वर्गों, आदि के लिए नाम नहीं बदलता है - ऐसा करके (यदि ...) यह परिणाम बहुत कम –
सही करेगा, नामकरण छोटा नहीं है। यह obfuscation है। संक्षेप का उद्देश्य टिप्पणियों के अपवाद के साथ, सौंदर्यीकरण उपकरण के उपयोग के बाद दस्तावेज़ को पढ़ने की क्षमता को नुकसान पहुंचाना नहीं है। एक अच्छा minifier किसी भी नाम का नाम बदल नहीं देगा या जावास्क्रिप्ट या सीएसएस की कार्यक्षमता में बदलाव नहीं करेगा और सामग्री के प्रभाव के बिना केवल न्यूनतम मात्रा में सफेद स्थान के साथ एक ही पंक्ति पर पूरे दस्तावेज़ का कोड छोड़ देगा। – austincheney
मैं आपको WebMarkupMin Online आज़माने की सलाह देता हूं।
WebMarkupMin ऑनलाइन आपके एचटीएमएल, एक्सएचटीएमएल और एक्सएमएल कोड को कम करने के लिए एक मुफ्त ऑनलाइन उपकरण। एचटीएमएल और एक्सएचटीएमएल मिनीफायर style टैग और विशेषताओं से सीएसएस कोड के प्रमाणीकरण का समर्थन करते हैं, और script टैग्स, इवेंट विशेषताओं और javascript: छद्म-प्रोटोकॉल के साथ हाइपरलिंक्स से जावास्क्रिप्ट कोड का खनन।ये minifiers सीएसएस minification (मैड्स Kristensen के Efficient stylesheet minifier, Microsoft Ajax CSS Minifier और YUI CSS Compressor) और जावास्क्रिप्ट minification (डगलस क्रॉकफोर्ड के JSMin, Microsoft Ajax JS Minifier और YUI JS Compressor) के एकाधिक एल्गोरिदम का समर्थन करता है।
ये उपकरण WebMarkupMin लाइब्रेरी पर आधारित है।
मुझे लगता है कि आप जिस कीवर्ड को खोज रहे हैं वह है "minify" – Jrod
@Jrod: और "obfuscation" :) – mouad