অনুকূলন কৰক

লিন ছাছ আমদানি কৰে

আপোনাৰ সম্পত্তি পাইপলাইনত Sass ব্যৱহাৰ কৰাৰ সময়ত, নিশ্চিত কৰক যে আপুনি কেৱল @importআপুনি প্ৰয়োজনীয় উপাদানসমূহ ing কৰি Bootstrap অনুকূল কৰে। আপোনাৰ আটাইতকৈ ডাঙৰ অনুকূলনসমূহ সম্ভৱতঃ Layout & Componentsআমাৰ অংশৰ পৰা আহিব bootstrap.scss।

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

যদি আপুনি এটা উপাদান ব্যৱহাৰ কৰা নাই, তেন্তে ইয়াক মন্তব্য কৰক বা সম্পূৰ্ণৰূপে মচি পেলাওক। উদাহৰণস্বৰূপ, যদি আপুনি কেৰউজেল ব্যৱহাৰ কৰা নাই, সেই আমদানি আঁতৰাওক আপোনাৰ কমপাইল কৰা CSS ত কিছু নথিপত্ৰ আকাৰ সংৰক্ষণ কৰিবলে । মনত ৰাখিব Sass আমদানিসমূহৰ মাজত কিছুমান নিৰ্ভৰশীলতা আছে যিয়ে এটা নথিপত্ৰ বাদ দিয়াটো অধিক কঠিন কৰি তুলিব পাৰে।

জাভাস্ক্রিপ্ট লিন কৰক

bootstrap.jsBootstrap ৰ JavaScript এ আমাৰ প্ৰাথমিক dist নথিপত্ৰসমূহত ( আৰু ) প্ৰতিটো উপাদান অন্তৰ্ভুক্ত কৰে bootstrap.min.js, আৰু আনকি আমাৰ প্ৰাথমিক নিৰ্ভৰশীলতা (Popper) আমাৰ বাণ্ডল নথিপত্ৰসমূহৰ সৈতে ( bootstrap.bundle.jsআৰু bootstrap.bundle.min.js) । আপুনি Sass ৰ যোগেদি কাষ্টমাইজ কৰাৰ সময়ত, সম্পৰ্কীয় JavaScript আঁতৰোৱাটো নিশ্চিত কৰক।

উদাহৰণস্বৰূপ, ধৰি লওক আপুনি আপোনাৰ নিজৰ জাভাস্ক্রিপ্ট বাণ্ডলাৰ যেনে Webpack বা Rollup ব্যৱহাৰ কৰিছে, আপুনি কেৱল আপুনি ব্যৱহাৰ কৰিবলৈ পৰিকল্পনা কৰা জাভাস্ক্রিপ্ট আমদানি কৰিব। তলৰ উদাহৰণটোত আমি দেখুৱাইছো যে কেনেকৈ কেৱল আমাৰ মডাল জাভাস্ক্রিপ্ট অন্তৰ্ভুক্ত কৰিব পাৰি:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

এই ধৰণে, আপুনি বুটাম, কেৰউজেল, আৰু সঁজুলি টিপছৰ দৰে উপাদানসমূহৰ বাবে ব্যৱহাৰ কৰিব বিচৰা নাই কোনো জাভাস্ক্রিপ্ট অন্তৰ্ভুক্ত কৰা নাই। যদি আপুনি ড্ৰপডাউনসমূহ, সঁজুলিটিপসমূহ বা পপঅভাৰসমূহ আমদানি কৰিছে, আপোনাৰ package.jsonনথিপত্ৰত Popper নিৰ্ভৰশীলতা তালিকাভুক্ত কৰাটো নিশ্চিত কৰক।

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

স্বয়ং উপসৰ্গ .browserslistrc

বুটষ্ট্ৰেপ স্বয়ংক্ৰিয়ভাৱে কিছুমান CSS বৈশিষ্ট্যসমূহত ব্ৰাউজাৰ উপসৰ্গ যোগ কৰিবলে স্বয়ংক্ৰিয় উপসৰ্গৰ ওপৰত নিৰ্ভৰ কৰে। উপসৰ্গসমূহ আমাৰ নথিপত্ৰৰ দ্বাৰা নিৰ্ধাৰিত হয় .browserslistrc, Bootstrap repo ৰ ৰূটত পোৱা যায়। ব্ৰাউজাৰসমূহৰ এই তালিকা স্বনিৰ্বাচিত কৰিলে আৰু Sass পুনৰায় কম্পাইলিং কৰিলে আপোনাৰ কমপাইল কৰা CSS ৰ পৰা কিছুমান CSS স্বয়ংক্ৰিয়ভাৱে আঁতৰাব, যদি সেই ব্ৰাউজাৰ বা সংস্কৰণৰ বাবে অনন্য বিক্ৰেতা উপসৰ্গ আছে।

অব্যৱহৃত CSS

এই শিতানত সহায় বিচৰা হৈছে, অনুগ্ৰহ কৰি এটা জনসংযোগ খুলিবলৈ বিবেচনা কৰক। ধন্যবাদ!

বুটষ্ট্ৰেপৰ সৈতে PurgeCSS ব্যৱহাৰ কৰাৰ বাবে আমাৰ হাতত পূৰ্বনিৰ্মিত উদাহৰণ নাই যদিও , সম্প্ৰদায়ে লিখা কিছুমান সহায়ক প্ৰবন্ধ আৰু ৱাকথ্ৰু আছে। ইয়াত কিছুমান বিকল্প দিয়া হ’ল:

• https://medium.com/dwarves-foundation/purgecss-88395a2c5772 ব্যৱহাৰ কৰি বুটষ্ট্ৰেপৰ পৰা-অব্যৱহৃত-css-শৈলীসমূহ-আঁতৰাওক
• https://lukelowrey.com/বুটষ্ট্ৰেপ-বা-অন্য-ফ্ৰেমৱৰ্কসমূহৰ পৰা-ব্যৱহৃত-css-স্বয়ংক্ৰিয়ভাৱে-আঁতৰোৱা/

শেষত, অব্যৱহৃত CSS ৰ ওপৰত এই CSS Tricks প্ৰবন্ধটোৱে PurgeCSS আৰু অন্যান্য অনুৰূপ সঁজুলিসমূহ কেনেকৈ ব্যৱহাৰ কৰিব লাগে দেখুৱাইছে।

সৰু কৰক আৰু gzip কৰক

যেতিয়াই সম্ভৱ, আপুনি আপোনাৰ দৰ্শকসকলক সেৱা আগবঢ়োৱা সকলো ক'ড নিশ্চিতভাৱে কম্প্ৰেছ কৰক। যদি আপুনি Bootstrap dist নথিপত্ৰসমূহ ব্যৱহাৰ কৰিছে, সৰু কৰা সংস্কৰণসমূহত লাগি থাকিবলৈ চেষ্টা কৰক ( .min.cssআৰু .min.jsসম্প্ৰসাৰণসমূহে সূচনা কৰা হৈছে) । যদি আপুনি উৎসৰ পৰা আপোনাৰ নিজৰ নিৰ্মাণ ব্যৱস্থাপ্ৰণালীৰ সৈতে Bootstrap নিৰ্মাণ কৰিছে, HTML, CSS, আৰু JS ৰ বাবে আপোনাৰ নিজৰ সৰুকৰণসমূহ প্ৰণয়ন কৰাটো নিশ্চিত কৰক ।

ননব্লক কৰা ফাইলসমূহ

সংকোচন সৰু কৰা আৰু ব্যৱহাৰ কৰাটো যথেষ্ট যেন লাগিলেও, আপোনাৰ নথিপত্ৰসমূহক ননব্লক কৰাসমূহ কৰাটোও আপোনাৰ চাইটক ভালদৰে-অনুকূল আৰু যথেষ্ট দ্ৰুত কৰাৰ এটা ডাঙৰ পদক্ষেপ।

যদি আপুনি Google Chrome ত এটা Lighthouse প্লাগইন ব্যৱহাৰ কৰিছে, তেন্তে আপুনি FCP ৰ ওপৰত উজুটি খাইছে। প্ৰথম বিষয়বস্তুপূৰ্ণ ৰং মেট্ৰিক পৃষ্ঠা লোড হ'বলৈ আৰম্ভ কৰাৰ পৰা পৃষ্ঠাৰ বিষয়বস্তুৰ যিকোনো অংশ পৰ্দাত ৰেণ্ডাৰ কৰা সময়লৈকে সময় জুখিব।

আপুনি FCP উন্নত কৰিব পাৰে অ-জটিল জাভাস্ক্রিপ্ট বা CSS পিছুৱাই। তাৰ অৰ্থ কি? সহজতে, জাভাস্ক্রিপ্ট বা ষ্টাইলশ্বীটসমূহ যি আপোনাৰ পৃষ্ঠাৰ প্ৰথম পেইন্টত উপস্থিত থকাৰ প্ৰয়োজন নাই asyncবা deferবৈশিষ্ট্যসমূহৰ সৈতে চিহ্নিত হ'ব লাগে।

ই নিশ্চিত কৰে যে কম গুৰুত্বপূৰ্ণ সম্পদসমূহ পিছত লোড কৰা হয় আৰু প্ৰথম ৰং বন্ধ নহয়। আনহাতে, জটিল সম্পদসমূহক ইনলাইন লিপি বা শৈলী হিচাপে অন্তৰ্ভুক্ত কৰিব পাৰি।

যদি আপুনি এই বিষয়ে অধিক জানিব বিচাৰে, তেন্তে ইতিমধ্যে ইয়াৰ বিষয়ে বহুতো ভাল লেখা আছে:

• https://web.dev/ৰেণ্ডাৰ-ব্লক কৰা-সম্পদ/
• https://web.dev/বিলম্বন-অগুৰুত্বপূৰ্ণ-css/

সদায় HTTPS ব্যৱহাৰ কৰক

আপোনাৰ ৱেবচাইট কেৱল উৎপাদনত HTTPS সংযোগসমূহৰ জৰিয়তে উপলব্ধ হ'ব লাগে। HTTPS এ সকলো চাইটৰ সুৰক্ষা, গোপনীয়তা, আৰু উপলব্ধতা উন্নত কৰে, আৰু অসংবেদনশীল ৱেব ট্ৰাফিক বুলি কোনো কথা নাই । আপোনাৰ ৱেবচাইটক HTTPS ৰ ওপৰত একচেটিয়াভাৱে পৰিবেশন কৰিবলে বিন্যাস কৰাৰ পদক্ষেপসমূহ আপোনাৰ স্থাপত্য আৰু ৱেব হ'ষ্টিং প্ৰদানকাৰীৰ ওপৰত নিৰ্ভৰ কৰি বহু পৰিমাণে ভিন্ন হয়, আৰু সেয়েহে এই নথিপত্ৰসমূহৰ পৰিসৰৰ বাহিৰত।

HTTPS ৰ ওপৰত সেৱা আগবঢ়োৱা চাইটসমূহে সকলো শৈলীপত্ৰিকা, স্ক্ৰিপ্টসমূহ, আৰু অন্য সম্পত্তিসমূহ HTTPS সংযোগসমূহৰ ওপৰত অভিগম কৰিব লাগে। অন্যথা, আপুনি ব্যৱহাৰকাৰীসকললৈ মিশ্ৰিত সক্ৰিয় বিষয়বস্তু প্ৰেৰণ কৰিব , সম্ভাৱ্য দুৰ্বলতাসমূহলৈ লৈ যাব য'ত এটা চাইটক এটা নিৰ্ভৰশীলতা সলনি কৰি আপোচ কৰিব পাৰি। ইয়াৰ ফলত সুৰক্ষা সমস্যা আৰু ব্যৱহাৰকাৰীসকলক প্ৰদৰ্শিত হোৱা ব্ৰাউজাৰৰ ভিতৰৰ সতৰ্কবাণীসমূহ হ'ব পাৰে। আপুনি এটা CDN ৰ পৰা Bootstrap পাইছে বা নিজে সেৱা আগবঢ়াইছে নেকি, সুনিশ্চিত কৰক যে আপুনি ইয়াক কেৱল HTTPS সংযোগসমূহৰ যোগেদি অভিগম কৰে ।