ऐप्लिकेशन की निगरानी करना और उसका विश्लेषण करना

वेबपैक बंडल को ट्रैक करने और उसका विश्लेषण करने के लिए, किन टूल का इस्तेमाल करना चाहिए

इवान अकुलोव

Twitter GitHub होम पेज

भले ही आप ऐप्लिकेशन को जितना हो सके छोटा बनाने के लिए वेबपैक कॉन्फ़िगर करते हैं, तब भी इसे ट्रैक करना और यह जानना ज़रूरी है कि इसमें क्या-क्या शामिल है. इसके अलावा, कोई ऐसी डिपेंडेंसी भी इंस्टॉल की जा सकती है जो ऐप्लिकेशन के साइज़ को दोगुना कर देगी और उस पर ध्यान भी नहीं दिया जाएगा!

इस सेक्शन में उन टूल के बारे में बताया गया है जिनसे अपने बंडल को समझने में मदद मिलती है.

बंडल के साइज़ को ट्रैक करना

अपने ऐप्लिकेशन के साइज़ को मॉनिटर करने के लिए, डेवलपमेंट के दौरान वेबपैक-डैशबोर्ड और सीआई पर बंडल साइज़ का इस्तेमाल करें.

वेबपैक-डैशबोर्ड

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 एट्रिब्यूट की मदद से यह पुष्टि की जाती है कि वेबपैक एसेट तय साइज़ से ज़्यादा न हों. ऐप्लिकेशन का साइज़ बड़ा हो जाने पर सूचना पाने के लिए, इसे सीआई के साथ इंटिग्रेट करें:

इसे कॉन्फ़िगर करने के लिए:

ज़्यादा से ज़्यादा साइज़ देखना

1. ऐप्लिकेशन को छोटा करके छोटा करने के लिए, उसे ऑप्टिमाइज़ करें. प्रोडक्शन बिल्ड चलाएं.

2. bundlesize सेक्शन को package.json में, इस कॉन्टेंट के साथ जोड़ें:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. 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
   

4. हर साइज़ में 10 से 20% जोड़ें. इससे आपको ज़्यादा से ज़्यादा साइज़ मिल जाएंगे. ऐप्लिकेशन का साइज़ बहुत बढ़ जाने पर आपको चेतावनी देने के साथ-साथ, 10-20% मार्जिन से ऐप्लिकेशन को हमेशा की तरह डेवलप किया जा सकता है.

   bundlesize चालू करें

5. bundlesize पैकेज को डेवलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल करें:

   npm install bundlesize --save-dev
   

6. 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",
       }
     ]
   }   
   

7. जांच करने के लिए, एनपीएम स्क्रिप्ट जोड़ें:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. हर पुश पर npm run check-size को चलाने के लिए, सीआई कॉन्फ़िगर करें. (इसके अलावा, अगर आप इस पर प्रोजेक्ट डेवलप कर रहे हैं, तो bundlesize को GitHub के साथ इंटिग्रेट करें.)

बस इतना ही! अब, अगर npm run check-size को चलाया जाता है या कोड को पुश किया जाता है, तो देखें कि आउटपुट फ़ाइलें ज़रूरत के मुताबिक छोटी हैं या नहीं:

अगर पुष्टि नहीं हो पाती है, तो:

इसके बारे में और पढ़ें

• एलेक्स रसेल मौजूदा समय में लोड होने में लगने वाले समय के बारे में जो हमें टारगेट करना चाहिए

विश्लेषण करें कि बंडल इतना बड़ा क्यों है

आप शायद बंडल के बारे में और गहराई से जानना चाहें, ताकि यह पता चल सके कि कौनसे मॉड्यूल इसमें जगह लेते हैं. वेबपैक-बंडल-ऐनलिज़र के बारे में जानें:

(github.com/webpack-contrib/webpack-bundle-analyzer से स्क्रीन रिकॉर्डिंग)

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 के साइज़ की तुलना करना चाहें, क्योंकि यह असली उपयोगकर्ताओं के अनुभव के करीब होता है. साइज़ बदलने के लिए बाईं ओर मौजूद साइडबार का इस्तेमाल करें.

ध्यान दें: ModuleConcatenationPlugin का इस्तेमाल करने पर, हो सकता है कि यह वेबपैक-बंडल-ऐनलिज़र आउटपुट में मॉड्यूल के किसी हिस्से को मर्ज कर दे. इससे रिपोर्ट के बारे में ज़्यादा जानकारी नहीं मिलेगी. अगर इस प्लगिन का इस्तेमाल किया जाता है, तो विश्लेषण के दौरान इसे बंद कर दें.

रिपोर्ट में इन बातों का ध्यान रखना चाहिए:

• बड़ी डिपेंडेंसी. ये इतने बड़े क्यों हैं? क्या विकल्प छोटे हैं (जैसे, प्रतिक्रिया के बजाय प्रीैक्ट करें)? क्या आप उसमें शामिल सभी कोड का इस्तेमाल करते/करती हैं (जैसे, Moment.js में बहुत सारी ऐसी स्थान-भाषाएं शामिल हैं जिन्हें अक्सर इस्तेमाल नहीं किया जाता और उन्हें छोड़ा जा सकता है)?
• डुप्लीकेट डिपेंडेंसी. क्या आपको एक ही लाइब्रेरी, कई फ़ाइलों में बार-बार दोहरा रही है? (उदाहरण के लिए, optimization.splitChunks.chunks विकल्प – वेबपैक 4 में – या वेबपैक 3 में – CommonsChunkPlugin को – इसे किसी सामान्य फ़ाइल में ले जाने के लिए इस्तेमाल करें.) या फिर बंडल में एक ही लाइब्रेरी के कई वर्शन हैं?
• मिलती-जुलती डिपेंडेंसी. क्या ऐसी मिलती-जुलती लाइब्रेरी भी हैं जो करीब-करीब एक ही तरह का काम करती हैं? (जैसे, moment और date-fns या lodash और lodash-es.) किसी एक टूल से बने रहने की कोशिश करें.

इसके अलावा, शॉन लार्किन का वेबपैक बंडल का शानदार विश्लेषण देखें.

संक्षेप में

• अपने ऐप्लिकेशन का साइज़ बढ़ाने के लिए, webpack-dashboard और bundlesize का इस्तेमाल करें
• webpack-bundle-analyzer की मदद से साइज़ बढ़ाने वाले टूल के बारे में जानें