ਅਨੁਕੂਲ ਬਣਾਓ

ਲੀਨ ਸਾਸ ਆਯਾਤ

ਆਪਣੀ ਸੰਪੱਤੀ ਪਾਈਪਲਾਈਨ ਵਿੱਚ Sass ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸਿਰਫ਼ @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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਇਸ 'ਤੇ ਟਿੱਪਣੀ ਕਰੋ ਜਾਂ ਇਸਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮਿਟਾਓ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ ਕੈਰੋਜ਼ਲ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਆਪਣੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਕੁਝ ਫਾਈਲ ਆਕਾਰ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨ ਲਈ ਉਸ ਆਯਾਤ ਨੂੰ ਹਟਾਓ। ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ Sass ਆਯਾਤ ਵਿੱਚ ਕੁਝ ਨਿਰਭਰਤਾਵਾਂ ਹਨ ਜੋ ਇੱਕ ਫਾਈਲ ਨੂੰ ਛੱਡਣਾ ਵਧੇਰੇ ਮੁਸ਼ਕਲ ਬਣਾ ਸਕਦੀਆਂ ਹਨ।

ਲੀਨ JavaScript

ਬੂਟਸਟਰੈਪ ਦੀ JavaScript ਵਿੱਚ ਸਾਡੀਆਂ ਪ੍ਰਾਇਮਰੀ ਡਿਸਟ ਫਾਈਲਾਂ ( bootstrap.jsਅਤੇ ) ਵਿੱਚ ਹਰੇਕ ਭਾਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਸਾਡੀਆਂ ਬੰਡਲ ਫਾਈਲਾਂ ( ਅਤੇ ) bootstrap.min.jsਦੇ ਨਾਲ ਸਾਡੀ ਪ੍ਰਾਇਮਰੀ ਨਿਰਭਰਤਾ (ਪੌਪਰ) ਵੀ ਸ਼ਾਮਲ ਹੈ । ਜਦੋਂ ਤੁਸੀਂ Sass ਦੁਆਰਾ ਅਨੁਕੂਲਿਤ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਸੰਬੰਧਿਤ JavaScript ਨੂੰ ਹਟਾਉਣਾ ਯਕੀਨੀ ਬਣਾਓ।bootstrap.bundle.jsbootstrap.bundle.min.js

ਉਦਾਹਰਨ ਲਈ, ਇਹ ਮੰਨ ਕੇ ਕਿ ਤੁਸੀਂ ਵੈੱਬਪੈਕ ਜਾਂ ਰੋਲਅੱਪ ਵਰਗੇ ਆਪਣੇ ਖੁਦ ਦੇ JavaScript ਬੰਡਲ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤੁਸੀਂ ਸਿਰਫ਼ ਉਹ 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

ਇਸ ਤਰੀਕੇ ਨਾਲ, ਤੁਸੀਂ ਕੋਈ ਵੀ JavaScript ਸ਼ਾਮਲ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਬਟਨਾਂ, ਕੈਰੋਜ਼ਲ ਅਤੇ ਟੂਲਟਿੱਪਾਂ ਵਰਗੇ ਭਾਗਾਂ ਲਈ ਵਰਤਣ ਦਾ ਇਰਾਦਾ ਨਹੀਂ ਰੱਖਦੇ। ਜੇਕਰ ਤੁਸੀਂ ਡ੍ਰੌਪਡਾਉਨ, ਟੂਲਟਿਪਸ ਜਾਂ ਪੌਪਓਵਰ ਆਯਾਤ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਆਪਣੀ 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 ਅਤੇ ਹੋਰ ਸਮਾਨ ਸਾਧਨਾਂ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ.

Minify ਅਤੇ gzip

ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਉਹ ਸਾਰੇ ਕੋਡ ਨੂੰ ਸੰਕੁਚਿਤ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਮਹਿਮਾਨਾਂ ਨੂੰ ਦਿੰਦੇ ਹੋ। .min.cssਜੇਕਰ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਡਿਸਟ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਛੋਟੇ ਸੰਸਕਰਣਾਂ ( ਅਤੇ .min.jsਐਕਸਟੈਂਸ਼ਨਾਂ ਦੁਆਰਾ ਦਰਸਾਏ ਗਏ) ਨਾਲ ਜੁੜੇ ਰਹਿਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ । ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਬਿਲਡ ਸਿਸਟਮ ਨਾਲ ਸਰੋਤ ਤੋਂ ਬੂਟਸਟਰੈਪ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ HTML, CSS, ਅਤੇ JS ਲਈ ਆਪਣੇ ਖੁਦ ਦੇ ਮਿਨੀਫਾਇਰ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।

ਗੈਰ-ਬਲੌਕ ਕਰਨ ਵਾਲੀਆਂ ਫ਼ਾਈਲਾਂ

ਜਦੋਂ ਕਿ ਸੰਕੁਚਨ ਨੂੰ ਘੱਟ ਕਰਨਾ ਅਤੇ ਵਰਤਣਾ ਕਾਫ਼ੀ ਜਾਪਦਾ ਹੈ, ਤੁਹਾਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਨਾਨਬਲੌਕ ਕਰਨ ਵਾਲੀਆਂ ਬਣਾਉਣਾ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਚੰਗੀ-ਅਨੁਕੂਲਿਤ ਅਤੇ ਤੇਜ਼ ਬਣਾਉਣ ਲਈ ਇੱਕ ਵੱਡਾ ਕਦਮ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ Google Chrome ਵਿੱਚ ਲਾਈਟਹਾਊਸ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਤੁਸੀਂ FCP 'ਤੇ ਠੋਕਰ ਖਾਧੀ ਹੋਵੇ। ਫਸਟ ਕੰਟੈਂਟਫੁੱਲ ਪੇਂਟ ਮੈਟ੍ਰਿਕ ਉਸ ਸਮੇਂ ਨੂੰ ਮਾਪਦਾ ਹੈ ਜਦੋਂ ਪੰਨਾ ਲੋਡ ਹੋਣਾ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਪੰਨੇ ਦੀ ਸਮੱਗਰੀ ਦਾ ਕੋਈ ਹਿੱਸਾ ਸਕ੍ਰੀਨ 'ਤੇ ਰੈਂਡਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਤੁਸੀਂ ਗੈਰ-ਨਾਜ਼ੁਕ JavaScript ਜਾਂ CSS ਨੂੰ ਮੁਲਤਵੀ ਕਰਕੇ FCP ਨੂੰ ਸੁਧਾਰ ਸਕਦੇ ਹੋ। ਇਸਦਾ ਮਤਲੱਬ ਕੀ ਹੈ? ਬਸ, JavaScript ਜਾਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਹਾਡੇ ਪੰਨੇ ਦੇ ਪਹਿਲੇ ਪੇਂਟ 'ਤੇ ਮੌਜੂਦ ਹੋਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਉਹਨਾਂ ਨੂੰ ਗੁਣਾਂ ਨਾਲ ਚਿੰਨ੍ਹਿਤ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ asyncਹੈ defer।

ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਘੱਟ ਮਹੱਤਵਪੂਰਨ ਸਰੋਤਾਂ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਲੋਡ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਪਹਿਲੇ ਪੇਂਟ ਨੂੰ ਰੋਕਿਆ ਨਹੀਂ ਜਾ ਰਿਹਾ ਹੈ। ਦੂਜੇ ਪਾਸੇ, ਨਾਜ਼ੁਕ ਸਰੋਤਾਂ ਨੂੰ ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟਾਂ ਜਾਂ ਸ਼ੈਲੀਆਂ ਵਜੋਂ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਜੇ ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਬਾਰੇ ਪਹਿਲਾਂ ਹੀ ਬਹੁਤ ਸਾਰੇ ਵਧੀਆ ਲੇਖ ਹਨ:

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

ਹਮੇਸ਼ਾ HTTPS ਦੀ ਵਰਤੋਂ ਕਰੋ

ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਉਤਪਾਦਨ ਵਿੱਚ ਸਿਰਫ਼ HTTPS ਕਨੈਕਸ਼ਨਾਂ 'ਤੇ ਉਪਲਬਧ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। HTTPS ਸਾਰੀਆਂ ਸਾਈਟਾਂ ਦੀ ਸੁਰੱਖਿਆ, ਗੋਪਨੀਯਤਾ ਅਤੇ ਉਪਲਬਧਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਗੈਰ-ਸੰਵੇਦਨਸ਼ੀਲ ਵੈਬ ਟ੍ਰੈਫਿਕ ਵਰਗੀ ਕੋਈ ਚੀਜ਼ ਨਹੀਂ ਹੈ । ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਨੂੰ HTTPS 'ਤੇ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਸੇਵਾ ਦੇਣ ਲਈ ਕੌਂਫਿਗਰ ਕਰਨ ਦੇ ਪੜਾਅ ਤੁਹਾਡੇ ਢਾਂਚੇ ਅਤੇ ਵੈੱਬ ਹੋਸਟਿੰਗ ਪ੍ਰਦਾਤਾ ਦੇ ਆਧਾਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਹੁੰਦੇ ਹਨ, ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਇਹਨਾਂ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਦਾਇਰੇ ਤੋਂ ਬਾਹਰ ਹਨ।

HTTPS 'ਤੇ ਦਿੱਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਸਾਈਟਾਂ ਨੂੰ HTTPS ਕਨੈਕਸ਼ਨਾਂ 'ਤੇ ਸਾਰੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ, ਸਕ੍ਰਿਪਟਾਂ ਅਤੇ ਹੋਰ ਸੰਪਤੀਆਂ ਤੱਕ ਪਹੁੰਚ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਨਹੀਂ ਤਾਂ, ਤੁਸੀਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਮਿਸ਼ਰਤ ਸਰਗਰਮ ਸਮੱਗਰੀ ਭੇਜ ਰਹੇ ਹੋਵੋਗੇ , ਜਿਸ ਨਾਲ ਸੰਭਾਵੀ ਕਮਜ਼ੋਰੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜਿੱਥੇ ਇੱਕ ਨਿਰਭਰਤਾ ਨੂੰ ਬਦਲ ਕੇ ਇੱਕ ਸਾਈਟ ਨਾਲ ਸਮਝੌਤਾ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਸ ਨਾਲ ਸੁਰੱਖਿਆ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਅਤੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਇਨ-ਬ੍ਰਾਊਜ਼ਰ ਚੇਤਾਵਨੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਭਾਵੇਂ ਤੁਸੀਂ ਇੱਕ CDN ਤੋਂ ਬੂਟਸਟਰੈਪ ਪ੍ਰਾਪਤ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਇਸਨੂੰ ਆਪਣੇ ਆਪ ਪ੍ਰਦਾਨ ਕਰ ਰਹੇ ਹੋ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਇਸਨੂੰ ਸਿਰਫ਼ HTTPS ਕਨੈਕਸ਼ਨਾਂ 'ਤੇ ਹੀ ਐਕਸੈਸ ਕਰਦੇ ਹੋ।