वेबपैक बंडल को ट्रैक करने और उसका विश्लेषण करने के लिए, किन टूल का इस्तेमाल करना चाहिए
भले ही आप ऐप्लिकेशन को जितना हो सके छोटा बनाने के लिए वेबपैक कॉन्फ़िगर करते हैं, तब भी इसे ट्रैक करना और यह जानना ज़रूरी है कि इसमें क्या-क्या शामिल है. इसके अलावा, कोई ऐसी डिपेंडेंसी भी इंस्टॉल की जा सकती है जो ऐप्लिकेशन के साइज़ को दोगुना कर देगी और उस पर ध्यान भी नहीं दिया जाएगा!
इस सेक्शन में उन टूल के बारे में बताया गया है जिनसे अपने बंडल को समझने में मदद मिलती है.
बंडल के साइज़ को ट्रैक करना
अपने ऐप्लिकेशन के साइज़ को मॉनिटर करने के लिए, डेवलपमेंट के दौरान वेबपैक-डैशबोर्ड और सीआई पर बंडल साइज़ का इस्तेमाल करें.
वेबपैक-डैशबोर्ड
webpack-dashboard डिपेंडेंसी, प्रोग्रेस, और अन्य जानकारी के साइज़ के साथ वेबपैक आउटपुट को बेहतर बनाता है. यहां बताया गया है कि यह कैसा दिखता है:
यह डैशबोर्ड बड़ी डिपेंडेंसी को ट्रैक करने में मदद करता है. अगर एक साथ जोड़ा जाता है, तो आपको वह तुरंत मॉड्यूल सेक्शन में दिखेगा!
इसे चालू करने के लिए, webpack-dashboard
पैकेज इंस्टॉल करें:
npm install webpack-dashboard --save-dev
साथ ही, प्लग इन को कॉन्फ़िगरेशन के plugins
सेक्शन में जोड़ें:
// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};
या अगर आप एक्सप्रेस-आधारित डेव सर्वर का इस्तेमाल कर रहे हैं, तो compiler.apply()
का इस्तेमाल करें:
compiler.apply(new DashboardPlugin());
जिन जगहों को बेहतर बनाया जा सकता है उन्हें खोजने के लिए, बेझिझक डैशबोर्ड पर जाएं! उदाहरण के लिए, मॉड्यूल सेक्शन में स्क्रोल करके देखें कि कौनसी लाइब्रेरी बहुत बड़ी हैं और उन्हें छोटे विकल्पों से बदला जा सकता है.
बंडलसाइज़
bundlesize एट्रिब्यूट की मदद से यह पुष्टि की जाती है कि वेबपैक एसेट तय साइज़ से ज़्यादा न हों. ऐप्लिकेशन का साइज़ बड़ा हो जाने पर सूचना पाने के लिए, इसे सीआई के साथ इंटिग्रेट करें:
इसे कॉन्फ़िगर करने के लिए:
ज़्यादा से ज़्यादा साइज़ देखना
ऐप्लिकेशन को छोटा करके छोटा करने के लिए, उसे ऑप्टिमाइज़ करें. प्रोडक्शन बिल्ड चलाएं.
bundlesize
सेक्शन कोpackage.json
में, इस कॉन्टेंट के साथ जोड़ें:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
npx के साथ
bundlesize
को चलाएं:npx bundlesize
इससे हर फ़ाइल का gzip किया गया आकार प्रिंट हो जाएगा:
PASS ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB PASS ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB PASS ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB PASS ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
हर साइज़ में 10 से 20% जोड़ें. इससे आपको ज़्यादा से ज़्यादा साइज़ मिल जाएंगे. ऐप्लिकेशन का साइज़ बहुत बढ़ जाने पर आपको चेतावनी देने के साथ-साथ, 10-20% मार्जिन से ऐप्लिकेशन को हमेशा की तरह डेवलप किया जा सकता है.
bundlesize
चालू करेंbundlesize
पैकेज को डेवलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल करें:npm install bundlesize --save-dev
package.json
केbundlesize
सेक्शन में, कंक्रीट के ज़्यादा से ज़्यादा साइज़ बताएं. कुछ फ़ाइलों (जैसे कि इमेज) के लिए, हो सकता है कि आप हर फ़ाइल के बजाय, हर फ़ाइल टाइप के लिए ज़्यादा से ज़्यादा साइज़ बताना चाहें:// package.json { "bundlesize": [ { "path": "./dist/*.png", "maxSize": "16 kB", }, { "path": "./dist/main.*.js", "maxSize": "20 kB", }, { "path": "./dist/vendor.*.js", "maxSize": "35 kB", } ] }
जांच करने के लिए, एनपीएम स्क्रिप्ट जोड़ें:
// package.json { "scripts": { "check-size": "bundlesize" } }
हर पुश पर
npm run check-size
को चलाने के लिए, सीआई कॉन्फ़िगर करें. (इसके अलावा, अगर आप इस पर प्रोजेक्ट डेवलप कर रहे हैं, तोbundlesize
को GitHub के साथ इंटिग्रेट करें.)
बस इतना ही! अब, अगर npm run check-size
को चलाया जाता है या कोड को पुश किया जाता है, तो देखें कि आउटपुट फ़ाइलें
ज़रूरत के मुताबिक छोटी हैं या नहीं:
अगर पुष्टि नहीं हो पाती है, तो:
इसके बारे में और पढ़ें
विश्लेषण करें कि बंडल इतना बड़ा क्यों है
आप शायद बंडल के बारे में और गहराई से जानना चाहें, ताकि यह पता चल सके कि कौनसे मॉड्यूल इसमें जगह लेते हैं. वेबपैक-बंडल-ऐनलिज़र के बारे में जानें:
webpack-bundle-ऐनलिस्टर बंडल को स्कैन करता है और उसमें मौजूद चीज़ों का विज़ुअलाइज़ेशन बनाता है. बड़ी या गैर-ज़रूरी डिपेंडेंसी ढूंढने के लिए इस विज़ुअलाइज़ेशन का इस्तेमाल करें.
ऐनालाइज़र का इस्तेमाल करने के लिए, webpack-bundle-analyzer
पैकेज इंस्टॉल करें:
npm install webpack-bundle-analyzer --save-dev
webpack कॉन्फ़िगरेशन में प्लगिन जोड़ने के लिए:
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
और प्रोडक्शन बिल्ड शुरू कर सकते हैं. प्लग इन, आंकड़ों वाले पेज को ब्राउज़र में खोल देगा.
डिफ़ॉल्ट रूप से, आंकड़े वाले पेज पर पार्स की गई फ़ाइलों का साइज़ (यानी बंडल में मौजूद फ़ाइलों का साइज़) दिखता है. ऐसा हो सकता है कि आप gzip के साइज़ की तुलना करना चाहें, क्योंकि यह असली उपयोगकर्ताओं के अनुभव के करीब होता है. साइज़ बदलने के लिए बाईं ओर मौजूद साइडबार का इस्तेमाल करें.
रिपोर्ट में इन बातों का ध्यान रखना चाहिए:
- बड़ी डिपेंडेंसी. ये इतने बड़े क्यों हैं? क्या विकल्प छोटे हैं (जैसे, प्रतिक्रिया के बजाय प्रीैक्ट करें)? क्या आप उसमें शामिल सभी कोड का इस्तेमाल करते/करती हैं (जैसे, Moment.js में बहुत सारी ऐसी स्थान-भाषाएं शामिल हैं जिन्हें अक्सर इस्तेमाल नहीं किया जाता और उन्हें छोड़ा जा सकता है)?
- डुप्लीकेट डिपेंडेंसी. क्या आपको एक ही लाइब्रेरी, कई फ़ाइलों में बार-बार दोहरा रही है? (उदाहरण के लिए,
optimization.splitChunks.chunks
विकल्प – वेबपैक 4 में – या वेबपैक 3 में –CommonsChunkPlugin
को – इसे किसी सामान्य फ़ाइल में ले जाने के लिए इस्तेमाल करें.) या फिर बंडल में एक ही लाइब्रेरी के कई वर्शन हैं? - मिलती-जुलती डिपेंडेंसी. क्या ऐसी मिलती-जुलती लाइब्रेरी भी हैं जो करीब-करीब एक ही तरह का काम करती हैं? (जैसे,
moment
औरdate-fns
याlodash
औरlodash-es
.) किसी एक टूल से बने रहने की कोशिश करें.
इसके अलावा, शॉन लार्किन का वेबपैक बंडल का शानदार विश्लेषण देखें.
संक्षेप में
- अपने ऐप्लिकेशन का साइज़ बढ़ाने के लिए,
webpack-dashboard
औरbundlesize
का इस्तेमाल करें webpack-bundle-analyzer
की मदद से साइज़ बढ़ाने वाले टूल के बारे में जानें