Должен ли я использовать Bootstrap из CDN или делать копию на моем сервере?

Какая наилучшая практика использования Twitter Bootstrap, обратитесь к нему из CDN или создайте локальную копию на моем сервере?

Поскольку Bootstrap продолжает развиваться, я боюсь, если я буду ссылаться на CDN, пользователь со временем будет видеть разные веб-страницы, а некоторые теги могут даже сломаться. Какой выбор большинства людей?

ОТВЕТЫ

Ответ 1

Почему не оба ¯\_ (ツ) _/¯? Скотт Хансельман (Scott Hanselman) написал отличную статью об использовании CDN для повышения производительности, но изящно прибегает к локальной копии на случай, если CDN не работает.

В зависимости от начальной загрузки вы можете выполнить следующие действия для загрузки из CDN с локальным резервом:

Рабочая демонстрация в Plunker

<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>

Обновления

Лучшие практики

На ваш вопрос о передовой практике есть много очень веских причин для использования CDN в производственной среде:

  1. Это увеличивает доступность параллелизма.
  2. Это увеличивает вероятность попадания в кеш.
  3. Это гарантирует, что полезная нагрузка будет как можно меньше.
  4. Это уменьшает количество полосы пропускания, используемой вашим сервером.
  5. Это гарантирует, что пользователь получит географически близкий ответ.

Что касается вашей работы с версиями, то любой CDN, достойный своего веса, позволяет вам ориентироваться на конкретную версию библиотеки, чтобы вы не случайно вносили критические изменения в каждом выпуске.

Использование document.write

Согласно МДН на document.write

Примечание: когда document.write записывает в поток документов, вызов document.write для закрытого (загруженного) документа автоматически вызывает document.open, который очищает документ.

Тем не менее, использование здесь является намеренным. Код должен быть выполнен до полной загрузки DOM, а также в правильном порядке. Если jQuery дает сбой, нам нужно вставить его в документ, прежде чем мы попытаемся загрузить начальную загрузку, которая опирается на jQuery.

HTML-вывод после загрузки:

Example Output

В обоих случаях мы звоним, пока документ еще открыт, поэтому он должен включать содержимое, а не заменять весь документ. Если вы ждете до конца, вам придется заменить на document.body.appendChild для вставки динамических источников.

Ответ 2

Зависит от конкретного сайта.

У вас много пользователей? Вы заботитесь об использовании пропускной способности? Является ли производительность проблемой (CDN может ускорить ответы)?

Вы можете сослаться на конкретную версию:

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

Или же

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

Таким образом, вам не нужно беспокоиться об обновлениях библиотек, поэтому рекомендуется постоянно обновляться.

Я не уверен, каковы точные статистические данные о выборе разработчиков, но вы можете посмотреть здесь и увидеть, что миллиарды запросов отправляются в Bootstrap CDN, что означает, что он надежен и безопасен в использовании.

Ответ 3

Я попытался отредактировать ответ KyleMit, но форум отмечался как неправильный код с отступом, даже это не так, поэтому я добавляю свой вклад прямо ниже:

Поскольку вопрос помечен как тема twitter-bootstrap (и не только twitter-bootstrap-3), возможно, полезно обновить ответ для более новой версии Bootstrap.

Поскольку платформа добавила новый класс для сокрытия элементов в своей четвертой версии, мы должны использовать .d-none вместо .hidden в этом случае.

Все остальное остается тем же в этом случае, кроме версии lib (конечно!)

Ответ 4

Благодаря @KyleMit. Другой способ отступить - использовать объект "окно", как показано ниже:

<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>

Ответ 5

Почти все публичные CDN довольно надежны. Однако, если вы беспокоитесь о той части времени, когда CDN может быть недоступен, вы можете загрузить Bootstrap из одного CDN Bootstrap и перейти к альтернативному CDN в случае, если первый не работает.

<html>
  <head>
    <!-- Bootstrap CSS CDN with Fallback -->
    <link rel="stylesheet" href="#" onclick="location.href='https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css'; return false;" 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 постоянно развиваются и получают новые функции, ваш сайт со временем останется прежним.