অ্যাপটি নিরীক্ষণ এবং বিশ্লেষণ করুন

ওয়েবপ্যাক বান্ডেলের ট্র্যাক রাখতে এবং বিশ্লেষণ করতে কোন সরঞ্জামগুলি ব্যবহার করতে হবে৷

Ivan Akulov

এমনকি আপনি যখন অ্যাপটিকে যতটা সম্ভব ছোট করার জন্য ওয়েবপ্যাক কনফিগার করেন, তখনও এটির ট্র্যাক রাখা এবং এতে কী রয়েছে তা জানা গুরুত্বপূর্ণ। অন্যথায়, আপনি এমন একটি নির্ভরতা ইনস্টল করতে পারেন যা অ্যাপটিকে দ্বিগুণ বড় করে তুলবে - এবং এটি লক্ষ্যও করবে না!

এই বিভাগটি এমন সরঞ্জামগুলির বর্ণনা করে যা আপনাকে আপনার বান্ডিল বুঝতে সাহায্য করে।

বান্ডিল আকার ট্র্যাক রাখুন

আপনার অ্যাপের আকার নিরীক্ষণ করতে, বিকাশের সময় ওয়েবপ্যাক-ড্যাশবোর্ড ব্যবহার করুন এবং CI-এ বান্ডেলাইজ করুন ।

ওয়েবপ্যাক-ড্যাশবোর্ড

ওয়েবপ্যাক-ড্যাশবোর্ড নির্ভরতা, অগ্রগতি এবং অন্যান্য বিবরণের আকার সহ ওয়েবপ্যাক আউটপুট বাড়ায়। এটি দেখতে কেমন তা এখানে:

এই ড্যাশবোর্ডটি বৃহৎ নির্ভরতা ট্র্যাক করতে সাহায্য করে – যদি আপনি একটি যোগ করেন, আপনি তা অবিলম্বে মডিউল বিভাগে দেখতে পাবেন!

এটি সক্ষম করতে, 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 যাচাই করে যে ওয়েবপ্যাক সম্পদ নির্দিষ্ট মাপ অতিক্রম করে না। অ্যাপটি খুব বড় হয়ে গেলে বিজ্ঞপ্তি পেতে এটিকে একটি CI এর সাথে একীভূত করুন:

এটি কনফিগার করতে:

সর্বাধিক মাপ খুঁজে বের করুন

1. অ্যাপটিকে যতটা সম্ভব ছোট করতে অপ্টিমাইজ করুন। উত্পাদন বিল্ড চালান.

2. নিম্নলিখিত বিষয়বস্তু সহ package.json এ bundlesize বিভাগ যোগ করুন:

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

3. npx দিয়ে bundlesize চালান:

   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. চেক চালানোর জন্য একটি npm স্ক্রিপ্ট যোগ করুন:

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

8. প্রতিটি ধাক্কায় npm run check-size কার্যকর করতে CI কনফিগার করুন। (এবং আপনি যদি এটিতে প্রকল্পটি বিকাশ করছেন তবে গিটহাবের সাথে bundlesize একত্রিত করুন ।)

তাই তো! এখন, আপনি যদি npm run check-size চালান বা কোডটি পুশ করেন, আপনি দেখতে পাবেন আউটপুট ফাইলগুলি যথেষ্ট ছোট কিনা:

অথবা, ব্যর্থতার ক্ষেত্রে:

আরও পড়া

• অ্যালেক্স রাসেল বাস্তব বিশ্বের লোডিং সময় সম্পর্কে আমাদের লক্ষ্য করা উচিত

বান্ডিলটি এত বড় কেন তা বিশ্লেষণ করুন

কোন মডিউল এটিতে স্থান নেয় তা দেখতে আপনি বান্ডিলের গভীরে খনন করতে চাইতে পারেন। ওয়েবপ্যাক-বান্ডেল-বিশ্লেষকের সাথে দেখা করুন:

( github.com/webpack-contrib/webpack-bundle-analyzer থেকে স্ক্রীন রেকর্ডিং)

ওয়েবপ্যাক-বান্ডেল-বিশ্লেষক বান্ডিলটি স্ক্যান করে এবং এর ভিতরে কী আছে তার একটি ভিজ্যুয়ালাইজেশন তৈরি করে। বড় বা অপ্রয়োজনীয় নির্ভরতা খুঁজে পেতে এই ভিজ্যুয়ালাইজেশন ব্যবহার করুন।

বিশ্লেষক ব্যবহার করতে, webpack-bundle-analyzer প্যাকেজটি ইনস্টল করুন:

npm install webpack-bundle-analyzer --save-dev

ওয়েবপ্যাক কনফিগারেশনে একটি প্লাগইন যোগ করুন:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

এবং উত্পাদন বিল্ড চালান। প্লাগইনটি একটি ব্রাউজারে পরিসংখ্যান পৃষ্ঠা খুলবে।

ডিফল্টরূপে, পরিসংখ্যান পৃষ্ঠা পার্স করা ফাইলের আকার দেখায় (অর্থাৎ, বান্ডেলে প্রদর্শিত ফাইলগুলির)। আপনি সম্ভবত জিজিপ আকারের তুলনা করতে চাইবেন কারণ এটি প্রকৃত ব্যবহারকারীদের অভিজ্ঞতার কাছাকাছি; সাইজ পরিবর্তন করতে বাম দিকের সাইডবার ব্যবহার করুন।

দ্রষ্টব্য: আপনি যদি ModuleConcatenationPlugin ব্যবহার করেন, তাহলে এটি ওয়েবপ্যাক-বান্ডেল-বিশ্লেষক আউটপুটে মডিউলগুলির একটি অংশকে একত্রিত করতে পারে, যা প্রতিবেদনটিকে কম বিস্তারিত করে তোলে। আপনি যদি এই প্লাগইনটি ব্যবহার করেন তবে বিশ্লেষণের সময় এটি নিষ্ক্রিয় করুন।

প্রতিবেদনে যা দেখতে হবে তা এখানে:

• বড় নির্ভরতা। কেন তারা এত বড়? সেখানে কি ছোট বিকল্প আছে (যেমন, প্রতিক্রিয়ার পরিবর্তে Preact)? আপনি কি এতে অন্তর্ভুক্ত সমস্ত কোড ব্যবহার করেন (যেমন, Moment.js-এ অনেক লোকেল রয়েছে যা প্রায়শই ব্যবহার করা হয় না এবং বাদ দেওয়া যেতে পারে )?
• সদৃশ নির্ভরতা। আপনি কি একই লাইব্রেরি একাধিক ফাইলে পুনরাবৃত্তি দেখতে পাচ্ছেন? (উদাহরণস্বরূপ, optimization.splitChunks.chunks বিকল্পটি - ওয়েবপ্যাক 4-এ - বা CommonsChunkPlugin - ওয়েবপ্যাক 3-তে - এটিকে একটি সাধারণ ফাইলে স্থানান্তর করতে ব্যবহার করুন।) নাকি বান্ডেলটিতে একই লাইব্রেরির একাধিক সংস্করণ রয়েছে?
• অনুরূপ নির্ভরতা। অনুরূপ লাইব্রেরি আছে যা প্রায় একই কাজ করে? (যেমন moment এবং date-fns , বা lodash এবং lodash-es ।) একটি একক টুল দিয়ে আটকে থাকার চেষ্টা করুন।

এছাড়াও, ওয়েবপ্যাক বান্ডিল সম্পর্কে শন লারকিনের দুর্দান্ত বিশ্লেষণ দেখুন।

সারসংক্ষেপ

• webpack-dashboard ব্যবহার করুন এবং আপনার অ্যাপটি কতটা বড় তা জানতে bundlesize
• webpack-bundle-analyzer দিয়ে কী আকার তৈরি করে তা খুঁটিয়ে দেখুন