மேம்படுத்த

லீன் சாஸ் இறக்குமதிகள்

@importஉங்கள் அசெட் பைப்லைனில் Sass ஐப் பயன்படுத்தும்போது, ​​உங்களுக்குத் தேவையான கூறுகளை மட்டும் பயன்படுத்தி பூட்ஸ்டார்ப்பை மேம்படுத்துவதை உறுதிசெய்யவும் . உங்களின் மிகப்பெரிய மேம்படுத்தல்கள் 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.jsமற்றும் bootstrap.min.js) உள்ள ஒவ்வொரு கூறுகளையும் உள்ளடக்கியது, மேலும் எங்கள் மூட்டைக் கோப்புகளுடன் ( bootstrap.bundle.jsமற்றும் bootstrap.bundle.min.js) முதன்மை சார்புநிலையையும் (பாப்பர்) கொண்டுள்ளது. நீங்கள் Sass மூலம் தனிப்பயனாக்கும்போது, ​​தொடர்புடைய ஜாவாஸ்கிரிப்டை அகற்றுவதை உறுதி செய்யவும்.

உதாரணமாக, 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கோப்பில் பாப்பர் சார்புநிலையை பட்டியலிட மறக்காதீர்கள்.

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

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

தானியங்கு முன்னொட்டு .browserslistrc

சில CSS பண்புகளுக்கு உலாவி முன்னொட்டுகளைத் தானாகச் சேர்க்க பூட்ஸ்டார்ப் ஆட்டோபிரிஃபிக்சரைச் சார்ந்துள்ளது. முன்னொட்டுகள் .browserslistrcபூட்ஸ்டார்ப் ரெப்போவின் மூலத்தில் காணப்படும் எங்கள் கோப்பால் கட்டளையிடப்படுகின்றன. இந்த உலாவிகளின் பட்டியலைத் தனிப்பயனாக்கி, Sass ஐ மீண்டும் தொகுத்தால், அந்த உலாவி அல்லது பதிப்பிற்குத் தனிப்பட்ட விற்பனையாளர் முன்னொட்டுகள் இருந்தால், உங்கள் தொகுக்கப்பட்ட CSS இலிருந்து தானாகவே சில CSS அகற்றப்படும்.

பயன்படுத்தப்படாத CSS

இந்தப் பிரிவில் உதவி தேவை, PRஐத் திறக்கவும். நன்றி!

பூட்ஸ்டார்ப்புடன் PurgeCSS ஐப் பயன்படுத்துவதற்கு முன் கட்டமைக்கப்பட்ட உதாரணம் எங்களிடம் இல்லை என்றாலும் , சமூகம் எழுதிய சில பயனுள்ள கட்டுரைகள் மற்றும் ஒத்திகைகள் உள்ளன. இங்கே சில விருப்பங்கள் உள்ளன:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

கடைசியாக, பயன்படுத்தப்படாத CSS பற்றிய இந்த CSS ட்ரிக்ஸ் கட்டுரை PurgeCSS மற்றும் பிற ஒத்த கருவிகளை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது.

மினிஃபை மற்றும் ஜிஜிப்

முடிந்தவரை, உங்கள் பார்வையாளர்களுக்கு நீங்கள் வழங்கும் அனைத்து குறியீட்டையும் சுருக்கவும். நீங்கள் பூட்ஸ்டார்ப் டிஸ்ட் கோப்புகளைப் பயன்படுத்துகிறீர்கள் என்றால், சிறிய பதிப்புகளில் ( .min.cssமற்றும் .min.jsநீட்டிப்புகளால் குறிக்கப்படும்) ஒட்டிக்கொள்ள முயற்சிக்கவும். உங்கள் சொந்த உருவாக்க அமைப்புடன் மூலத்திலிருந்து பூட்ஸ்டார்ப்பை உருவாக்குகிறீர்கள் என்றால், HTML, CSS மற்றும் JS க்காக உங்கள் சொந்த மினிஃபையர்களை செயல்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

தடை செய்யாத கோப்புகள்

சுருக்கத்தை சிறியதாக்குவதும் பயன்படுத்துவதும் போதுமானதாகத் தோன்றினாலும், உங்கள் ஃபைல்களைத் தடுக்காதவையாக மாற்றுவதும் உங்கள் தளத்தை நன்கு மேம்படுத்தி போதுமான வேகத்தில் மாற்றுவதற்கான ஒரு பெரிய படியாகும்.

நீங்கள் Google Chrome இல் லைட்ஹவுஸ் செருகுநிரலைப் பயன்படுத்துகிறீர்கள் என்றால் , நீங்கள் FCP இல் தடுமாறியிருக்கலாம். முதல் உள்ளடக்கமான பெயிண்ட் மெட்ரிக், பக்கம் ஏற்றப்படத் தொடங்கும் நேரத்திலிருந்து பக்கத்தின் உள்ளடக்கத்தின் எந்தப் பகுதியும் திரையில் காண்பிக்கப்படும் நேரத்தை அளவிடும்.

முக்கியமான ஜாவாஸ்கிரிப்ட் அல்லது CSS ஐ ஒத்திவைப்பதன் மூலம் நீங்கள் FCP ஐ மேம்படுத்தலாம். அதற்கு என்ன பொருள்? வெறுமனே, ஜாவாஸ்கிரிப்ட் அல்லது உங்கள் பக்கத்தின் முதல் வண்ணப்பூச்சில் இருக்க வேண்டிய ஸ்டைல்ஷீட்கள் asyncஅல்லது deferபண்புக்கூறுகளுடன் குறிக்கப்பட வேண்டும்.

குறைவான முக்கிய ஆதாரங்கள் பின்னர் ஏற்றப்படுவதையும், முதல் வண்ணப்பூச்சியைத் தடுக்காமல் இருப்பதையும் இது உறுதி செய்கிறது. மறுபுறம், முக்கியமான ஆதாரங்களை இன்லைன் ஸ்கிரிப்டுகள் அல்லது பாணிகளாக சேர்க்கலாம்.

நீங்கள் இதைப் பற்றி மேலும் அறிய விரும்பினால், அதைப் பற்றி ஏற்கனவே நிறைய சிறந்த கட்டுரைகள் உள்ளன:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

எப்போதும் HTTPS ஐப் பயன்படுத்தவும்

உங்கள் இணையதளம் தயாரிப்பில் உள்ள HTTPS இணைப்புகளில் மட்டுமே கிடைக்கும். HTTPS ஆனது அனைத்து தளங்களின் பாதுகாப்பு, தனியுரிமை மற்றும் கிடைக்கும் தன்மையை மேம்படுத்துகிறது, மேலும் உணர்திறன் இல்லாத இணைய போக்குவரத்து என எதுவும் இல்லை . HTTPS மூலம் பிரத்தியேகமாக வழங்கப்படும் வகையில் உங்கள் இணையதளத்தை உள்ளமைப்பதற்கான படிகள் உங்கள் கட்டிடக்கலை மற்றும் வலை ஹோஸ்டிங் வழங்குநரைப் பொறுத்து பரவலாக மாறுபடும், எனவே இந்த ஆவணங்களின் எல்லைக்கு அப்பாற்பட்டவை.

HTTPS மூலம் வழங்கப்படும் தளங்கள் அனைத்து ஸ்டைல்ஷீட்கள், ஸ்கிரிப்டுகள் மற்றும் பிற சொத்துக்களை HTTPS இணைப்புகள் மூலம் அணுக வேண்டும். இல்லையெனில், நீங்கள் பயனர்களுக்கு கலப்பு செயலில் உள்ள உள்ளடக்கத்தை அனுப்புவீர்கள் , இது சார்புநிலையை மாற்றுவதன் மூலம் ஒரு தளத்தை சமரசம் செய்யக்கூடிய பாதிப்புகளுக்கு வழிவகுக்கும். இது பாதுகாப்புச் சிக்கல்களுக்கு வழிவகுக்கும் மற்றும் பயனர்களுக்குக் காட்டப்படும் உலாவியில் எச்சரிக்கைகள். நீங்கள் CDN இலிருந்து பூட்ஸ்டார்ப்பைப் பெற்றாலும் அல்லது அதை நீங்களே வழங்கினாலும், HTTPS இணைப்புகள் மூலம் மட்டுமே அதை அணுகுவதை உறுதிசெய்யவும்.