Webpack बंडल को ट्रैक करने और उसका विश्लेषण करने के लिए किन टूल का इस्तेमाल करना चाहिए
भले ही ऐप्लिकेशन को छोटा बनाने के लिए webpack को कॉन्फ़िगर किया जाए, फिर भी यह ज़रूरी है कि ट्रैक कर सकता है और जान सकता है कि उसमें क्या शामिल है. नहीं तो, आप एक डिपेंडेंसी इंस्टॉल कर सकते हैं जो ऐप का आकार दोगुना है – और मैंने उस पर ध्यान भी नहीं दिया होगा!
इस सेक्शन में, ऐसे टूल के बारे में बताया गया है जो बंडल को समझने में आपकी मदद करेंगे.
बंडल के साइज़ पर नज़र रखें
अपने ऐप्लिकेशन के साइज़ को मॉनिटर करने के लिए, इनमें से किसी एक का इस्तेमाल करें webpack-dashboard पर: CI पर bundlesize.
webpack-dashboard
webpack-dashboard इस्तेमाल करने से, Webpack आउटपुट बेहतर होता है इसमें उनकी डिपेंडेंसी, प्रोग्रेस, और अन्य जानकारी शामिल होती है. यहां बताया गया है कि यह कैसा दिखता है:
![Webpack-डैशबोर्ड आउटपुट का स्क्रीनशॉट](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=19&hl=hi)
यह डैशबोर्ड बड़ी डिपेंडेंसी को ट्रैक करने में मदद करता है – अगर आपने कोई डिपेंडेंसी जोड़ी है, तो यह आपको तुरंत मॉड्यूल सेक्शन में जाएं!
इसे चालू करने के लिए, 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 की ऐसेट का साइज़ तय सीमा से ज़्यादा नहीं है का इस्तेमाल किया जा सकता है. ऐप्लिकेशन के बहुत बड़े होने पर सूचना पाने के लिए, इसे सीआई के साथ इंटिग्रेट करें:
![GitHub पर पुल अनुरोध के सीआई सेक्शन का स्क्रीनशॉट. बीच में
सीआई टूल का इस्तेमाल करते हैं, तो बंडल साइज़ आउटपुट](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=19&hl=hi)
इसे कॉन्फ़िगर करने के लिए:
जानें कि ज़्यादा से ज़्यादा साइज़ क्या हो सकते हैं
ऐप्लिकेशन को जितना हो सके उतना छोटा बनाने के लिए उसे ऑप्टिमाइज़ करें. प्रोडक्शन बिल्ड चलाएं.
bundlesize
सेक्शन कोpackage.json
में, इन चीज़ों के साथ जोड़ें सामग्री:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
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
हर साइज़ में 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
को चलाया जाता है या कोड को पुश किया जाता है, तो आपको दिखेगा कि आउटपुट फ़ाइलें
काफ़ी छोटा:
![बंडलसाइज़ आउटपुट का स्क्रीनशॉट. सभी बिल्ड
परिणाम 'पास' से चिह्नित हैं](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=19&hl=hi)
इसके अलावा, गड़बड़ी होने पर:
![बंडलसाइज़ आउटपुट का स्क्रीनशॉट. कुछ बिल्ड
परिणाम 'असफल' के रूप में चिह्नित हैं](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=19&hl=hi)
इसके बारे में और पढ़ें
विश्लेषण करें कि बंडल इतना बड़ा क्यों है
बंडल को ज़्यादा बारीकी से देखा जा सकता है और यह देखा जा सकता है कि इसमें कौनसे मॉड्यूल ज़्यादा जगह ले रहे हैं. 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
की मदद से ऐप्लिकेशन का साइज़ बढ़ाने के बारे में जानें