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

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

Ivan Akulov

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

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

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

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

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

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

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

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

2. नीचे दिए गए कॉन्टेंट की मदद से, package.json में bundlesize सेक्शन जोड़ें:

   // 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. जांच करने के लिए, npm स्क्रिप्ट जोड़ें:

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

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

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

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

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

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

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

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

webpack-bundle-analyzer, बंडल को स्कैन करता है और उसके अंदर मौजूद चीज़ों का विज़ुअलाइज़ेशन बनाता है. बड़ी या ग़ैर-ज़रूरी डिपेंडेंसी ढूंढने के लिए, इस विज़ुअलाइज़ेशन का इस्तेमाल करें.

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

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

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

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

खास जानकारी

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