ធ្វើឱ្យប្រសើរ

Lean Sass នាំចូល

នៅពេលប្រើ Sass នៅក្នុងបំពង់បង្ហូរទ្រព្យសម្បត្តិរបស់អ្នក ត្រូវប្រាកដថាអ្នកបង្កើនប្រសិទ្ធភាព Bootstrap ដោយបញ្ចូលតែ @importសមាសធាតុដែលអ្នកត្រូវការប៉ុណ្ណោះ។ ការបង្កើនប្រសិទ្ធភាពធំបំផុតរបស់អ្នកទំនងជាមកពី 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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

ប្រសិនបើអ្នកមិនប្រើសមាសធាតុទេ សូមបញ្ចេញមតិ ឬលុបវាចោលទាំងស្រុង។ ឧទាហរណ៍ ប្រសិនបើអ្នកមិនប្រើរង្វង់ទេ សូមលុបការនាំចូលនោះចេញ ដើម្បីរក្សាទុកទំហំឯកសារមួយចំនួននៅក្នុង CSS ដែលបានចងក្រងរបស់អ្នក។ សូមចងចាំថាមានភាពអាស្រ័យមួយចំនួននៅលើការនាំចូល Sass ដែលអាចធ្វើឱ្យវាកាន់តែពិបាកក្នុងការលុបឯកសារ។

JavaScript គ្មានខ្លាញ់

JavaScript របស់ Bootstrap រួមបញ្ចូលរាល់ធាតុផ្សំនៅក្នុងឯកសារចំងាយចម្បងរបស់យើង ( bootstrap.jsនិង bootstrap.min.js) និងសូម្បីតែការពឹងផ្អែកចម្បងរបស់យើង ( Popper ) ជាមួយនឹងឯកសារបាច់របស់យើង ( bootstrap.bundle.jsនិង bootstrap.bundle.min.js) ។ ខណៈពេលដែលអ្នកកំពុងប្ដូរតាមបំណងតាមរយៈ Sass ត្រូវប្រាកដថាលុប JavaScript ដែលពាក់ព័ន្ធ។

ជាឧទាហរណ៍ ដោយសន្មត់ថាអ្នកកំពុងប្រើ bundler JavaScript ផ្ទាល់ខ្លួនរបស់អ្នក ដូចជា Webpack ឬ Rollup នោះ អ្នកនឹងនាំចូលតែ JavaScript ដែលអ្នកគ្រោងនឹងប្រើប៉ុណ្ណោះ។ ក្នុងឧទាហរណ៍ខាងក្រោម យើងបង្ហាញពីរបៀបបញ្ចូល JavaScript គំរូរបស់យើង៖

// 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/offcanvas';
// 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';

វិធីនេះ អ្នកមិនរួមបញ្ចូល JavaScript ណាមួយដែលអ្នកមិនមានបំណងប្រើសម្រាប់សមាសធាតុដូចជា ប៊ូតុង រង្វង់ និងព័ត៌មានជំនួយ។ ប្���សិនបើអ្នកកំពុងនាំចូលបញ្ជីទម្លាក់ចុះ គន្លឹះឧបករណ៍ ឬផ្ទាំងព័ត៌មាន ត្រូវប្រាកដថារាយបញ្ជីភាពអាស្រ័យ Popper នៅក្នុង package.jsonឯកសាររបស់អ្នក។

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

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

បុព្វបទស្វ័យប្រវត្តិ .browserslistrc

Bootstrap ពឹងផ្អែកលើ Autoprefixer ដើម្បីបន្ថែមបុព្វបទកម្មវិធីរុករកដោយស្វ័យប្រវត្តិទៅលក្ខណៈសម្បត្តិ CSS ជាក់លាក់។ បុព្វបទ​ត្រូវ​បាន​កំណត់​ដោយ .browserslistrc​ឯកសារ​របស់​យើង ដែល​មាន​នៅ​ក្នុង​ឫស​នៃ Bootstrap repo ។ ការប្ដូរបញ្ជីកម្មវិធីរុករកតាមបំណង និងការចងក្រង Sass ឡើងវិញនឹងដក CSS មួយចំនួនចេញពី CSS ដែលបានចងក្រងរបស់អ្នកដោយស្វ័យប្រវត្តិ ប្រសិនបើមានបុព្វបទរបស់អ្នកលក់តែមួយគត់ចំពោះកម្មវិធីរុករក ឬកំណែនោះ។

CSS ដែលមិនប្រើ

ចង់បានជំនួយជាមួយផ្នែកនេះ សូមពិចារណាបើក PR ។ អរគុណ!

ខណៈពេលដែលយើងមិនមានឧទាហរណ៍ដែលបានបង្កើតជាមុនសម្រាប់ការប្រើប្រាស់ PurgeCSS ជាមួយ Bootstrap មានអត្ថបទ និងការណែនាំដែលមានប្រយោជន៍មួយចំនួនដែលសហគមន៍បានសរសេរ។ នេះគឺជាជម្រើសមួយចំនួន៖

• 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 Tricks លើ CSS ដែលមិនបានប្រើ បង្ហាញពីរបៀបប្រើ PurgeCSS និងឧបករណ៍ស្រដៀងគ្នាផ្សេងទៀត។

បង្រួមនិង gzip

នៅពេលណាដែលអាចធ្វើទៅបាន ត្រូវប្រាកដថាបង្ហាប់កូដទាំងអស់ដែលអ្នកបម្រើដល់ភ្ញៀវរបស់អ្នក។ ប្រសិនបើអ្នកកំពុងប្រើឯកសារ Bootstrap dist សូមព្យាយាមនៅជាប់នឹងកំណែដែលបានបង្រួមតូច (បង្ហាញដោយ .min.cssនិង .min.jsផ្នែកបន្ថែម)។ ប្រសិនបើអ្នកកំពុងបង្កើត Bootstrap ពីប្រភពជាមួយប្រព័ន្ធសាងសង់ផ្ទាល់ខ្លួនរបស់អ្នក ត្រូវប្រាកដថាអនុវត្តកម្មវិធីកំណត់ផ្ទាល់ខ្លួនរបស់អ្នកសម្រាប់ HTML, CSS និង JS ។

ឯកសារដែលមិនរារាំង

ខណៈពេលដែលការបង្រួមតូច និងការប្រើប្រាស់ការបង្ហាប់អាចហាក់ដូចជាគ្រប់គ្រាន់ ការធ្វើឱ្យឯកសាររបស់អ្នកមិនទប់ស្កាត់ក៏ជាជំហានដ៏ធំមួយក្នុងការធ្វើឱ្យគេហទំព័ររបស់អ្នកប្រសើរឡើង និងលឿនគ្រប់គ្រាន់ផងដែរ។

ប្រសិនបើអ្នកកំពុងប្រើ កម្មវិធីជំនួយ Lighthouse នៅក្នុង Google Chrome អ្នកប្រហែលជាជំពប់ដួលលើ FCP ។ មាត្រដ្ឋានថ្នាំលាបខ្លឹមសារដំបូង វាស់ពេលវេលាពីពេលដែលទំព័រចាប់ផ្តើមផ្ទុកទៅពេលដែលផ្នែកណាមួយនៃមាតិការបស់ទំព័រត្រូវបានបង្ហាញនៅលើអេក្រង់។

អ្នកអាចកែលម្អ FCP ដោយពន្យារ JavaScript ឬ CSS ដែលមិនសំខាន់។ មានន័យថា​ម៉េច? និយាយឱ្យសាមញ្ញ JavaScript ឬសន្លឹករចនាប័ទ្មដែលមិនចាំបាច់មានវត្តមាននៅលើថ្នាំលាបដំបូងនៃទំព័ររបស់អ្នកគួរតែត្រូវបានសម្គាល់ដោយ asyncឬ deferគុណលក្ខណៈ។

នេះធានាថាធនធានដែលមិនសូវសំខាន់ត្រូវបានផ្ទុកនៅពេលក្រោយ និងមិនរារាំងថ្នាំលាបដំបូងឡើយ។ ម្យ៉ាងវិញទៀត ធនធានសំខាន់ៗអាចត្រូវបានរួមបញ្ចូលជាស្គ្រីបក្នុងជួរ ឬរចនាប័ទ្ម។

ប្រសិនបើអ្នកចង់ស្វែងយល់បន្ថែមអំពីរឿងនេះ មានអត្ថបទល្អៗជាច្រើនរួចហើយអំពីវា៖

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

ប្រើ HTTPS ជានិច្ច

គេហទំព័ររបស់អ្នកគួរតែមានតែតាមរយៈការតភ្ជាប់ HTTPS នៅក្នុងការផលិតប៉ុណ្ណោះ។ HTTPS ធ្វើអោយប្រសើរឡើងនូវសុវត្ថិភាព ឯកជនភាព និងលទ្ធភាពទទួលបាននៃគេហទំព័រទាំងអស់ ហើយ មិនមានអ្វីដូចជាចរាចរណ៍គេហទំព័រដែលមិនរសើប នោះទេ។ ជំហានដើម្បីកំណត់រចនាសម្ព័ន្ធគេហទំព័ររបស់អ្នកឱ្យបម្រើទាំងស្រុងលើ HTTPS មានភាពខុសប្លែកគ្នាយ៉ាងទូលំទូលាយអាស្រ័យលើស្ថាបត្យកម្ម និងអ្នកផ្តល់សេវាបង្ហោះគេហទំព័ររបស់អ្នក ហើយដូច្នេះវាហួសពីវិសាលភាពនៃឯកសារទាំងនេះ។

គេហទំព័រដែលបម្រើតាមរយៈ HTTPS ក៏គួរតែចូលប្រើសន្លឹករចនាប័ទ្ម ស្គ្រីប និងទ្រព្យសម្បត្តិផ្សេងទៀតនៅលើការតភ្ជាប់ HTTPS ផងដែរ។ បើមិនដូច្នេះទេ អ្នកនឹងបញ្ជូនអ្នកប្រើប្រាស់ នូវមាតិកាសកម្មចម្រុះ ដែលនាំឱ្យមានភាពងាយរងគ្រោះដែលអាចកើតមាន ដែលគេហទំព័រអាចត្រូវបានសម្របសម្រួលដោយការផ្លាស់ប្តូរភាពអាស្រ័យ។ នេះអាចនាំឱ្យមានបញ្ហាសុវត្ថិភាព និងការព្រមាននៅក្នុងកម្មវិធីរុករកដែលបង្ហាញដល់អ្នកប្រើប្រាស់។ មិនថាអ្នកកំពុងទទួលបាន Bootstrap ពី CDN ឬបម្រើវាដោយខ្លួនឯងទេ សូមប្រាកដថាអ្នកចូលប្រើវាតាមរយៈការតភ្ជាប់ HTTPS ប៉ុណ្ណោះ។