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

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

Ivan Akulov

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

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

बंडल के साइज़ पर नज़र रखें

अपने ऐप्लिकेशन के साइज़ को मॉनिटर करने के लिए, इनमें से किसी एक का इस्तेमाल करें webpack-डैशबोर्ड पर: CI पर bundlesize.

webpack-dashboard

webpack-dashboard, डिपेंडेंसी के साइज़, प्रोग्रेस, और अन्य जानकारी के साथ webpack के आउटपुट को बेहतर बनाता है. यह इस तरह दिखता है:

इस डैशबोर्ड की मदद से, बड़ी डिपेंडेंसी को ट्रैक किया जा सकता है – अगर कोई डिपेंडेंसी जोड़ी जाती है, तो वह आपको तुरंत मॉड्यूल सेक्शन में दिखेगी!

इसे चालू करने के लिए, webpack-dashboard पैकेज इंस्टॉल करें:

npm install webpack-dashboard --save-dev

इसके बाद, प्लग इन को कॉन्फ़िगरेशन के plugins सेक्शन में जोड़ें:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

इसके अलावा, अगर Express पर आधारित डेवलपर सर्वर का इस्तेमाल किया जा रहा है, तो compiler.apply() का इस्तेमाल करें:

compiler.apply(new DashboardPlugin());

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

bundlesize

bundlesize इस बात की पुष्टि करता है कि webpack की ऐसेट का साइज़ तय सीमा से ज़्यादा नहीं है का इस्तेमाल किया जा सकता है. ऐप्लिकेशन का साइज़ बहुत ज़्यादा होने पर सूचना पाने के लिए, इसे किसी सीआई के साथ इंटिग्रेट करें:

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

ज़्यादा से ज़्यादा साइज़ के बारे में जानें

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

2. bundlesize सेक्शन को package.json में, इन चीज़ों के साथ जोड़ें सामग्री:

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

3. bundlesize को npx के साथ लागू करें:

   npx bundlesize
   

   इससे हर फ़ाइल का ज़िप किया गया साइज़ प्रिंट होगा:

   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 को चलाया जाता है या कोड को पुश किया जाता है, तो आपको दिखेगा कि आउटपुट फ़ाइलें काफ़ी छोटा:

इसके अलावा, अगर कोई समस्या आती है, तो:

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

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

यह पता लगाना कि बंडल इतना बड़ा क्यों है

बंडल में कौनसे मॉड्यूल जगह लेते हैं, यह जानने के लिए बंडल के बारे में ज़्यादा जानें. Meet webpack-bundle-analyzer:

webpack-bundle-analyizer बंडल को स्कैन करता है और इसके अंदर मौजूद कॉन्टेंट का विज़ुअलाइज़ेशन बनाता है. इसका इस्तेमाल करें विज़ुअलाइज़ेशन का इस्तेमाल करें.

विश्लेषक का इस्तेमाल करने के लिए, 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 विकल्प – webpack 4 में – या CommonsChunkPlugin – in webpack 3 में – इसे किसी सामान्य फ़ाइल में ले जाने के लिए.) या बंडल के एक से ज़्यादा वर्शन हैं एक ही लाइब्रेरी में से?
• मिलती-जुलती डिपेंडेंसी. क्या ऐसी कोई लाइब्रेरी है जो लगभग एक ही काम करती है? (उदाहरण के लिए, moment और date-fns या lodash और lodash-es.) एक ही टूल का इस्तेमाल करके देखें.

साथ ही, शॉन लार्किन का webpack बंडल का बेहतरीन विश्लेषण देखें.

खास जानकारी

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