सीएसएस कम करें

Demián Renzulli

सीएसएस फ़ाइलों में ग़ैर-ज़रूरी वर्ण शामिल हो सकते हैं, जैसे कि टिप्पणियां, खाली सफ़ेद जगह, और इंडेंट. प्रोडक्शन के दौरान, ब्राउज़र के स्टाइल को प्रोसेस करने के तरीके पर असर डाले बिना, फ़ाइल का साइज़ कम करने के लिए, इन वर्णों को सुरक्षित तरीके से हटाया जा सकता है. इस तकनीक को मिनिफ़िकेशन कहा जाता है.

कम से कम की गई सीएसएस लोड हो रही है

इस सीएसएस ब्लॉक को देखें:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

इस कॉन्टेंट को पढ़ना आसान है, लेकिन इससे बड़ी फ़ाइल बनाने में कोई परेशानी नहीं होती है:

• यह इंडेंट करने के लिए स्पेस का इस्तेमाल करता है और इसमें टिप्पणियां होती हैं. ब्राउज़र इन टिप्पणियों को अनदेखा करता है, इसलिए इन्हें हटाया जा सकता है.
• <h1> और <h2> एलिमेंट के स्टाइल एक जैसे हैं: इन्हें अलग-अलग बताने के बजाय: "h1 {...} h2 {...}" उन्हें "h1, h2{...}" के तौर पर दिखाया जा सकता है.
• background-color, #000000 को सिर्फ़ #000 के तौर पर दिखाया जा सकता है.

ये बदलाव करने के बाद, आपको इन स्टाइल का ज़्यादा कॉम्पैक्ट वर्शन मिलेगा:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

आप शायद इस तरह की सीएसएस न लिखना चाहें. इसके बजाय, आप हमेशा की तरह सीएसएस में बदलाव कर सकते हैं और अपनी बिल्ड प्रोसेस में काट-छांट करने का चरण जोड़ सकते हैं. इस गाइड में, आपको लोकप्रिय बिल्ड टूल webpack का इस्तेमाल करके, ऐसा करने का तरीका बताया गया है.

मापें

आपको सीएसएस मिनीफ़िकेशन उस साइट पर लागू करनी होगी जिसका इस्तेमाल दूसरी गाइड में किया गया है: फ़ेव किटीज़. साइट का यह वर्शन एक बेहतरीन सीएसएस लाइब्रेरी का इस्तेमाल करता है: animate.css, जो उपयोगकर्ता किसी बिल्ली के लिए वोट करने पर अलग-अलग पेज एलिमेंट को ऐनिमेट करता है दर्शक.

सबसे पहले, आपको यह समझना होगा कि इस फ़ाइल को छोटा करने के बाद क्या होगा:

1. मेज़रमेंट पेज खोलें.
2. यूआरएल डालें: https://fav-kitties-animated.glitch.me और ऑडिट चलाएं पर क्लिक करें.
3. रिपोर्ट देखें पर क्लिक करें.
4. परफ़ॉर्मेंस पर क्लिक करें और ऑपर्च्यूनिटी सेक्शन पर जाएं.

नतीजे के तौर पर मिलने वाली रिपोर्ट से पता चलता है कि animate.css फ़ाइल से 16 केबी तक सेव किया जा सकता है:

अब सीएसएस के कॉन्टेंट की जांच करें:

1. Chrome में Fav Kities साइट खोलें. (ग्लिच सर्वर को पहली बार जवाब देने में कुछ समय लग सकता है.)
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
3. नेटवर्क टैब पर क्लिक करें.
4. सीएसएस फ़िल्टर पर क्लिक करें.
5. कैश मेमोरी बंद करें चेकबॉक्स चुनें.
6. ऐप्लिकेशन को फिर से लोड करें.

पेज 1.9 केबी और 76.2 केबी की दो सीएसएस फ़ाइलों का अनुरोध कर रहा है.

1. animate.css पर क्लिक करें.
2. फ़ाइल का कॉन्टेंट देखने के लिए, जवाब टैब पर क्लिक करें.

ध्यान दें कि स्टाइलशीट में खाली सफ़ेद जगह और इंडेंट के लिए वर्ण हैं:

इसके बाद, इन फ़ाइलों को छोटा करने के लिए, आपको अपनी बिल्ड प्रोसेस में कुछ webpack प्लगिन जोड़ने होंगे.

Webpack के साथ सीएसएस मिनिफ़िकेशन

ऑप्टिमाइज़ेशन के बारे में जाने से पहले, यह समझ लें कि Fav Kities साइट के लिए बिल्ड प्रोसेस कैसे काम करती है:

डिफ़ॉल्ट रूप से, Webpack बनाए जाने वाले JS बंडल में, इनलाइन सीएसएस फ़ाइलों का कॉन्टेंट शामिल होगा. चूंकि हम अलग CSS फ़ाइलें बनाए रखना चाहते हैं, इसलिए हम दो पूरक प्लगिन का उपयोग कर रहे हैं:

• mini-css-extract-plugin, हर स्टाइल शीट को उसकी अपनी फ़ाइल में एक्सट्रैक्ट करेगा. यह बिल्ड प्रोसेस के एक चरण के तौर पर इस्तेमाल किया जाएगा.
• webpack-fix-style-only-entries का इस्तेमाल, वेपबैक 4 में किसी समस्या को ठीक करने के लिए किया गया है. इससे webpack-config.js में दी गई हर सीएसएस फ़ाइल के लिए अतिरिक्त JS फ़ाइल जनरेट करने से बचा जा सकता है.

अब आपको प्रोजेक्ट में कुछ बदलाव करने होंगे:

1. glitch में फ़ेव किटीज़ प्रोजेक्ट खोलें.
2. सोर्स देखने के लिए, View Source दबाएं.
3. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
4. Terminal पर क्लिक करें (ध्यान दें: अगर Terminal बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).

नतीजे मिलने वाले सीएसएस को छोटा करने के लिए, आपको optimize-css-assets-webpack-plugin का इस्तेमाल करना होगा:

1. Glitch कंसोल में, npm install --save-dev optimize-css-assets-webpack-plugin चलाएं.
2. refresh चलाएं, ताकि बदलाव, Glitch एडिटर के साथ सिंक किए जाएं.

इसके बाद, Glitch एडिटर पर वापस जाएं, webpack.config.js फ़ाइल खोलें और ये बदलाव करें:

फ़ाइल की शुरुआत में मॉड्यूल लोड करें: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

इसके बाद, प्लग इन के एक इंस्टेंस को प्लग इन कलेक्शन में पास करें: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] बदलाव करने के बाद, प्रोजेक्ट रीबिल्ड ट्रिगर होगा. नतीजा webpack.config.js ऐसा दिखेगा:

इसके बाद, परफ़ॉर्मेंस टूल की मदद से आपको इस ऑप्टिमाइज़ेशन के नतीजे को देखने का मौका मिलेगा.

पुष्टि करें

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन .

अगर आप किसी पिछले चरण में खो गए हैं, तो आप यहां क्लिक करके, साइट का वर्शन है.

फ़ाइलों के साइज़ और कॉन्टेंट की जांच करने के लिए:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.
3. सीएसएस फ़िल्टर पर क्लिक करें.
4. अगर कैश मेमोरी बंद करें चेकबॉक्स पहले से बंद नहीं है, तो उसे चुनें.
5. ऐप्लिकेशन को फिर से लोड करें.

इन फ़ाइलों की जांच करके यह देखा जा सकता है कि नए वर्शन में कोई खाली सफ़ेद जगह नहीं है. दोनों फ़ाइलें बहुत छोटी हैं. खास तौर पर, animate.css को ~26% तक कम कर दिया गया है. इससे ~20KB की बचत हुई है!

आखिर में:

1. मेज़रमेंट पेज खोलें.
2. ऑप्टिमाइज़ की गई साइट का यूआरएल डालें.
3. रिपोर्ट देखें पर क्लिक करें.
4. परफ़ॉर्मेंस पर क्लिक करें और ऑपर्च्यूनिटी सेक्शन देखें.

रिपोर्ट में "सीएसएस को छोटा करें" नहीं दिखता है "अवसर" के तौर पर अब इसे "पास्ड ऑडिट" सेक्शन में जोड़ दिया गया है सेक्शन:

सीएसएस फ़ाइलें, रेंडरिंग रोकने वाले संसाधन होती हैं. इसलिए, अगर बड़ी सीएसएस फ़ाइलों का इस्तेमाल करने वाली साइटों पर छोटा करने की सुविधा लागू की जाती है, तो आपको First Contentful Paint जैसी मेट्रिक में सुधार दिख सकते हैं.

अगले चरण और संसाधन

इस गाइड में, हमने वेबपैक के साथ सीएसएस मिनीफ़िकेशन के बारे में बताया है. हालांकि, दूसरे बिल्ड टूल के साथ भी यही तरीका अपनाया जा सकता है. जैसे, Gulp के लिए gulp-clean-css या ग्रंट के लिए grunt-contrib-cssmin.

दूसरी तरह की फ़ाइलों पर भी छोटा करने की सुविधा लागू की जा सकती है. JS को छोटा करने के टूल और कंप्रेशन जैसी कुछ पूरक तकनीकों के बारे में ज़्यादा जानने के लिए, नेटवर्क पेलोड को छोटा और कंप्रेस करने से जुड़ी गाइड देखें.