আমার সিডিএন থেকে বুটস্ট্র্যাপ ব্যবহার করা উচিত বা আমার সার্ভারে একটি অনুলিপি তৈরি করা উচিত?

140

টুইটার বুটস্ট্র্যাপ ব্যবহারের সর্বোত্তম অনুশীলন কোনটি, এটি সিডিএন থেকে উল্লেখ করুন বা আমার সার্ভারে একটি স্থানীয় অনুলিপি তৈরি করুন?

যেহেতু বুটস্ট্র্যাপটি বিকশিত হচ্ছে, তাই আমি ভয় করি যে আমি সিডিএন উল্লেখ করি, ব্যবহারকারী সময়ের সাথে সাথে বিভিন্ন ওয়েবপৃষ্ঠাগুলি দেখতে পাবেন এবং কিছু ট্যাগ এমনকি ভেঙে যেতে পারে। বেশিরভাগ মানুষের পছন্দ কি?

twitter-bootstrap twitter-bootstrap-3

— shapeare
সূত্র

204

কেন উভয়ই ¯ \ _ (ツ) _ / ¯ নয়? পারফরম্যান্স লাভের জন্য সিডিএন ব্যবহার করার বিষয়ে স্কট হ্যানসেলম্যানের একটি দুর্দান্ত নিবন্ধ রয়েছে তবে সিডিএন নিচে নেমে গেলে করুণভাবে স্থানীয় কপির কাছে ফিরে যেতে পারেন ।

বুটস্ট্র্যাপের জন্য নির্দিষ্ট, আপনি স্থানীয় ফ্যালব্যাকের সাহায্যে সিডিএন থেকে লোড করতে নিম্নলিখিতগুলি করতে পারেন :

প্লানকারে ওয়ার্কিং ডেমো

<head>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
  <!-- Bootstrap CSS local fallback -->
  <script>
    var test = document.createElement("div")
    test.className = "hidden d-none"

    document.head.appendChild(test)
    var cssLoaded = window.getComputedStyle(test).display === "none"
    document.head.removeChild(test)

    if (!cssLoaded) {
        var link = document.createElement("link");

        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = "lib/bootstrap.min.css";

        document.head.appendChild(link);
    }
  </script>
</head>
<body>
    <!-- APP CONTENT -->

    <!-- jQuery CDN -->
    <script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- jQuery local fallback -->
    <script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>

    <!-- Bootstrap JS CDN -->
    <script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap JS local fallback -->
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>

আপডেট

আপনি ইয়েপনোপ বা ফলব্যাক.জেএস ব্যবহার করে একই পরীক্ষা করতে পারেন
প্রতি ফ্ল্যাশের মন্তব্য এবং এই সমাধান , .visibleপরীক্ষার পরিবর্তে ক্লাসের জন্য চেক করার জন্য আপডেট হওয়া উত্তরrgb(51, 51, 51)
প্রতি ডেটের মন্তব্য , ব্যবহারের জন্য আপডেট .hiddenএবং .d-noneবুস্ট্র্যাপ 3.x বা 4 এর জন্য আপডেট হয়েছে
স্টাইলশিটটি লোড হয়েছে কিনা তা পরীক্ষা করার সময় , আপনাকে এমন একটি শৈলীর সন্ধান করতে হবে যা প্রয়োগ করা হত, একটি উপাদান তৈরি করে দেখুন এবং এটি প্রয়োগ করা হয়েছে কিনা।
ভ্যানিলা জেএস ব্যবহার করে মাথায় তত্ক্ষণাত লোড করার জন্য স্টাইলশিটটি আপডেট করা হয়েছে। আপনার ব্যবহার করে একটি পরীক্ষার উপাদান তৈরি করতে হবে Document.createElement(), বুটস্ট্র্যাপ ক্লাস প্রয়োগ করতে Window.getComputedStyle()হবে, পরীক্ষার জন্য ব্যবহার করতে হবে display:noneএবং জেএস ব্যবহার করে শর্তাধীন একটি স্টাইলশিট .োকানো দরকার।

সেরা অনুশীলন

সেরা অভ্যাসগুলি সম্পর্কে আপনার প্রশ্নের কাছে, উত্পাদন পরিবেশে সিডিএন ব্যবহার করার জন্য খুব ভাল কারণ রয়েছে :

এটি উপলব্ধ সমান্তরালতা বৃদ্ধি করে ।

এটি একটি ক্যাশে-হিট হওয়ার সম্ভাবনা বাড়ায় ।

এটি নিশ্চিত করে যে বেতনের পরিমাণ যথাসম্ভব ছোট হবে ।

এটি আপনার সার্ভার দ্বারা ব্যবহৃত ব্যান্ডউইথের পরিমাণ হ্রাস করে ।

এটি নিশ্চিত করে যে ব্যবহারকারী ভৌগলিকভাবে কাছের প্রতিক্রিয়া পাবে।

আপনার সংস্করণ উদ্বেগের জন্য, লবণের সাথে তার ওজনের মূল্যমানের যে কোনও সিডিএন আপনাকে লাইব্রেরির একটি নির্দিষ্ট সংস্করণকে লক্ষ্যবস্তু করতে দেয় যাতে আপনি দুর্ঘটনাক্রমে প্রতিটি প্রকাশের সাথে ব্রেকিং পরিবর্তনগুলি প্রবর্তন করেন না।

ব্যবহার `document.write`

Mdn অনুযায়ী document.write

নোট : যেমন document.writeদস্তাবেজে লিখেছেন প্রবাহ , কলিং document.writeএকটি বদ্ধ (লোড) নথিটি স্বয়ংক্রিয়ভাবে কল উপর document.open, যা দলিল সাফ করবে ।

তবে এখানে ব্যবহার ইচ্ছাকৃত। কোডটি ডম সম্পূর্ণভাবে লোড হওয়ার আগে এবং সঠিক ক্রমেও সম্পাদন করা দরকার। যদি jQuery ব্যর্থ হয় তবে বুটস্ট্র্যাপ লোড করার চেষ্টা করার আগে আমাদের ডকুমেন্টটি ইনলাইনে ইনজেক্ট করা দরকার, যা jQuery এর উপর নির্ভর করে।

লোডের পরে এইচটিএমএল আউটপুট :

যদিও এই দুটি ক্ষেত্রেই আমরা ডকুমেন্টটি খোলার সময় কল করছি যাতে এটি সম্পূর্ণ নথির পরিবর্তে বিষয়বস্তুগুলিকে ইনলাইন করা উচিত। আপনি যদি শেষ অবধি অপেক্ষা করেন, আপনাকে document.body.appendChildগতিশীল উত্স সন্নিবেশ করানো হবে।

পাশে : এমভিসি 6 এ, আপনি লিঙ্ক এবং স্ক্রিপ্ট ট্যাগ সহায়কগুলির সাথে এটি করতে পারেন

— KyleMit
সূত্র

1

হার্ডকোডিং rgb(51, 51, 51)ঝুঁকিপূর্ণ বলে মনে হচ্ছে - যদি কেউ রঙ পরিবর্তন করে এবং আপডেট করতে ভুলে যায় তবে কী হবে? কেউ ব্যবহার করতে পারে এমন আরও স্থিতিশীল সম্পত্তি আছে কি?

— ফ্ল্যাশ

@ ফ্ল্যাশ, হ্যাঁ, আমি সম্মত হই যে চতুর মনে হচ্ছে। গ্লোবাল জাভাস্ক্রিপ্ট ভেরিয়েবলে সিএসএস পরিবর্তনের জন্য সরাসরি সিএসএসের মাধ্যমে পরীক্ষা করা কঠিন। সিএসএস যেভাবে তাদের বর্ণনা করতে পারে সেভাবে স্টাইল করা হয়েছে কিনা তা দেখার জন্য আমাদের কেবলমাত্র উপাদানগুলির পরীক্ষা করতে হবে এবং আমাদের সর্বদা একটি <body>উপাদান থাকবে। এই উত্তরটি একটি সঙ্গে কিছু মার্কআপ যোগ করা .hiddendiv ও তারপর যদি এটিকে দৃশ্যমান তা দেখতে একটি পরীক্ষা করে: $('#bootstrapCssTest').is(':visible')। সেই শ্রেণীর সময়ের সাথে সাথে ব্রেকিং পরিবর্তন হওয়ার সম্ভাবনা খুব কম।

— কাইলমিট

@ কাইলমিট, গুগল ম্যাটারিয়াল আইকনগুলির জন্য আমি কীভাবে এটি করতে পারি ?

— রানা ডিপো

4

দুর্দান্ত উত্তর! কেবলমাত্র একটি নোট: আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করে থাকেন তবে কাজটি ব্যর্থ হওয়ার জন্য আপনার "লুকানো" পরিবর্তে "ডি-নন" ক্লাস ব্যবহার করা উচিত।

— deste

1

@JarrodW। - দুর্দান্ত প্রশ্ন। আমাকে কিছু খনন করতে হয়েছিল। আমাদের এটি এখানে ব্যবহার করা ভাল হওয়া উচিত - আপডেট উত্তর দেখুন

— কাইলমিট

9

নির্দিষ্ট সাইটে নির্ভর করে।

আপনার অনেক ব্যবহারকারী আছে? আপনি কি ব্যান্ডউইথ ব্যবহার সম্পর্কে যত্নশীল? কর্মক্ষমতা একটি সমস্যা (সিডিএন এর প্রতিক্রিয়া দ্রুত করতে পারে )?

আপনি একটি নির্দিষ্ট সংস্করণে লিঙ্ক করতে পারেন:

//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

অথবা

//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

আপনি লাইব্রেরি আপডেট সম্পর্কে চিন্তা করতে হবে না, এটি আপডেট রাখা এটি আরও ভাল অনুশীলন।

আমি নিশ্চিত নই যে বিকাশকারীদের পছন্দ সম্পর্কে সঠিক পরিসংখ্যানগুলি কী, তবে আপনি এখানে দেখতে পারেন এবং কোটি কোটি অনুরোধগুলি বুটস্ট্র্যাপ সিডিএন-এ প্রেরণ করা হয়েছে যার অর্থ এটি শক্তিশালী এবং নিরাপদ is

— Ofiris
সূত্র

10

শেষ লিঙ্কটি নষ্ট হয়ে গেছে।

— নিউক্লিয়ারম্যান

@ নিউক্লিয়ারম্যান, ট্রেন্ডস। বিল্টইথথ / সিডিএন / স্ট্যাকপ্যাথ- বুটস্ট্র্যাপ সিডিএন , আমিও একটি সম্পাদনা জমা দিচ্ছি।

— it4zahoor

2

আমি কাইলমিটের উত্তরটি সম্পাদনা করার চেষ্টা করেছি কিন্তু ফোরামটি একটি ভুল ইনডেন্ট কোড হিসাবে চিহ্নিত করছে, এমনকি এটি ছিল না, তাই আমি আমার অবদানটি যুক্ত করছি সঠিকভাবে:

প্রশ্ন হিসাবে হিসাবে ট্যাগ হয় টুইটার-বুটস্ট্র্যাপ বিষয় (এবং না শুধুমাত্র টুইটার-বুটস্ট্র্যাপ -3 ), সম্ভবত এটি বুটস্ট্র্যাপের নতুন সংস্করণটির প্রতিক্রিয়া আপডেট করতে সহায়ক।

ফ্রেমওয়ার্কটি চতুর্থ সংস্করণে উপাদানগুলি আড়াল করার জন্য একটি নতুন শ্রেণি যুক্ত করেছে, এই ক্ষেত্রে .d-noneপরিবর্তে আমাদের ব্যবহার করা উচিত .hidden।

লিবি সংস্করণ (অবশ্যই!) ব্যতীত অন্য সমস্ত কিছু সেই ক্ষেত্রে একই থাকে

— আন্দ্রে রোচা
সূত্র

1

কাইলিমিটকে ধন্যবাদ পিছনে পড়ার আর একটি উপায় 'উইন্ডো' অবজেক্টটি নীচে হিসাবে ব্যবহার করা হচ্ছে -

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>");
</script>

স্নিপেট প্রসারিত করুন

এটি এর মতো কাজ করে - যদি সিডিএন লিঙ্কটি কাজ করে তবে 'উইন্ডো' অবজেক্টটিতে 'jQuery' সম্পত্তি উপলব্ধ থাকবে অন্যথায় স্ক্রিপ্টের দ্বিতীয় অংশ অর্থাৎ ডকুমেন্ট.উইরাইট কার্যকর হবে যা স্থানীয় অনুলিপিটির দিকে নির্দেশ করে।

মূল প্রশ্নের উত্তর - সিডিএন থাকাতে আপনার সার্ভার এবং ব্যান্ডউইথকে প্রভাবিত না করে দ্রুত ডাউনলোডের মতো অনেক সুবিধা রয়েছে। একটি স্থানীয় অনুলিপি থাকার নিজস্ব সুবিধা রয়েছে (পিছনের ব্যবস্থা হিসাবে)। ইন্ট্রানেটে, প্রক্সি সেটিংস, সুরক্ষা নীতিগুলির কারণে, সিডিএন লিঙ্কটি কাজ করতে পারে না বা সিডিএন লিঙ্কটি নিচে থাকলে এটি কাজ নাও করতে পারে। সরাসরি উত্তর উভয় আছে।

— আনন্দ
সূত্র

1

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

<html>
  <head>
    <!-- Bootstrap CSS CDN with Fallback -->
    <link rel="stylesheet" href="https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous">
    <script>
    var test = document.createElement("div")
    test.className = "hidden d-none"

    document.head.appendChild(test)
    var cssLoaded = window.getComputedStyle(test).display === "none"
    document.head.removeChild(test)

    if (!cssLoaded) {
        var link = document.createElement("link");

        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css";

        document.head.appendChild(link);
    }
    </script>
  </head>
  <body>
    <!-- APP CONTENT -->

    <!-- jQuery CDN with Fallback -->
    <script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');</script>

    <!-- Bootstrap JS CDN with Fallback -->
    <script src="https://pagecdn.io/lib/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"><\/script>')}</script>
  </body>
</html>

আপনার দ্বিতীয় উদ্বেগ সম্পর্কে: এই পোস্টের লিঙ্কগুলি বুটস্ট্র্যাপ এবং jquery এর হার্ড কোডেড সংস্করণ। সুতরাং, এমনকি যদি বুটস্ট্র্যাপ এবং jquery গ্রন্থাগারগুলি অবিচ্ছিন্নভাবে বিকাশ করা হয় এবং নতুন বৈশিষ্ট্যগুলি পেতে থাকে তবে আপনার সাইট সময়ের সাথে একই থাকবে।

— হামিদ সরফরাজ
সূত্র

আমার সিডিএন থেকে বুটস্ট্র্যাপ ব্যবহার করা উচিত বা আমার সার্ভারে একটি অনুলিপি তৈরি করা উচিত?

প্লানকারে ওয়ার্কিং ডেমো

আপডেট

সেরা অনুশীলন

ব্যবহার document.write

ব্যবহার `document.write`