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

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

Ivan Akulov

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

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

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

अपने ऐप्लिकेशन के साइज़ को मॉनिटर करने के लिए, इनमें से किसी एक का इस्तेमाल करें webpack-dashboard पर: 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(),
    ],
};

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

compiler.apply(new DashboardPlugin());

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

बंडल का साइज़

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

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

जानें कि ज़्यादा से ज़्यादा साइज़ क्या हो सकते हैं

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

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

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

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

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

इसके अलावा, गड़बड़ी होने पर:

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

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

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

बंडल को ज़्यादा बारीकी से देखा जा सकता है और यह देखा जा सकता है कि इसमें कौनसे मॉड्यूल ज़्यादा जगह ले रहे हैं. 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-dashboard और bundlesize का इस्तेमाल करें
• webpack-bundle-analyzer की मदद से ऐप्लिकेशन का साइज़ बढ़ाने के बारे में जानें