Как использовать различные CDN?vue-92

CDN (Content Delivery Network) позволяют подключать Vue.js и сопутствующие библиотеки без необходимости локальной установки. Рассмотрим основные подходы и лучшие практики.

Популярные CDN для Vue.js

  1. UNPKG (https://unpkg.com) - самый популярный CDN для npm пакетов
  2. jsDelivr (https://www.jsdelivr.com) - быстрый и надежный CDN
  3. CDNJS (https://cdnjs.com) - обширная коллекция библиотек
  4. BootCDN (https://www.bootcdn.cn) - китайский CDN с зеркалами

Базовое подключение Vue через CDN

<!DOCTYPE html>
<html>
<head>
  <title>Vue CDN Example</title>
  <!-- Подключаем Vue 3 через jsDelivr -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

Различия между сборками в CDN

  1. Полная сборка (global):

    https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js
    • Содержит компилятор шаблонов
    • Доступ через глобальную переменную Vue

  2. Runtime-only сборка:

    https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.runtime.global.js
    • Меньший размер
    • Требует предварительной компиляции шаблонов

Подключение экосистемы Vue через CDN

Пример с Vue Router и Pinia:

<!-- Подключаем зависимости -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@4.1.6/dist/vue-router.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pinia@2.0.33/dist/pinia.global.js"></script>

<script>
  const { createApp } = Vue
  const { createRouter, createWebHashHistory } = VueRouter
  const { createPinia } = Pinia

  const app = createApp({})
  app.use(createPinia())
  app.use(createRouter({
    history: createWebHashHistory(),
    routes: []
  }))
  app.mount('#app')
</script>

Оптимизация загрузки

  1. Использование SRI (Subresource Integrity):

    <script
  src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js"
  integrity="sha384-...sha384-hash..."
  crossorigin="anonymous"></script>

  2. Preconnect для ускорения:

    <link rel="preconnect" href="https://cdn.jsdelivr.net">

Версионирование

Рекомендуемые подходы:

  1. Фиксированная версия (рекомендуется): 
    https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js
  2. Последняя версия мажорного релиза (не рекомендуется для production): 
    https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js

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

  1. Всегда фиксируйте версии в production
  2. Используйте SRI для безопасности
  3. Для критически важных приложений - резервный локальный файл
  4. Для PWA - кэшируйте CDN ресурсы в Service Worker

Резюмируем:

CDN предоставляют удобный способ быстрого подключения Vue.js и его экосистемы. Выбирайте подходящую сборку, фиксируйте версии, используйте SRI и preconnect для оптимизации. Для production-проектов рекомендуется использовать локальную сборку.