パフォーマンス最適化とビルドデプロイメント

// 使用するモジュールのみをインポート
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";

@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/forms";

@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";

npm install -D purgecss

// purgecss.config.js
module.exports = {
  content: ['.//*.html', './/*.js'],
  css: ['./dist/style.css'],
  safelist: ['show', 'active', 'fade', 'collapse', 'modal-open']
}

npx purgecss --config purgecss.config.js --output dist/style.min.css

<!-- 本番環境では常に .min.css / .min.js を使用 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

// 必要なJSコンポーネントのみをインポート
import Alert from 'bootstrap/js/dist/alert'
import Button from 'bootstrap/js/dist/button'
import Carousel from 'bootstrap/js/dist/carousel'
import Collapse from 'bootstrap/js/dist/collapse'
import Dropdown from 'bootstrap/js/dist/dropdown'
import Modal from 'bootstrap/js/dist/modal'
import Offcanvas from 'bootstrap/js/dist/offcanvas'

// すべてのツールチップを初期化
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el))

<!-- 重要でないJSを遅延 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>

<!-- 使用するアイコンが少ない場合、アイコンフォントの代わりにインラインSVGを使用 -->
<svg class="bi" width="16" height="16" fill="currentColor">
  <use href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#house"/>
</svg>

<!-- または、必要なSVGをローカルにダウンロードして、CDNリクエストを回避 -->

<!-- 常に width + height を指定してレイアウトシフトを防止 -->
<img src="photo.webp" width="800" height="450" class="img-fluid" alt="Photo"
     loading="lazy">

<!-- モダンフォーマットを使用 -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" class="img-fluid" alt="Photo">
</picture>

// package.json
{
  "scripts": {
    "dev": "sass scss/custom.scss:dist/style.css --watch",
    "build:css": "sass scss/custom.scss:dist/style.css --style compressed",
    "build:purge": "purgecss --config purgecss.config.js --output dist/style.min.css",
    "build": "npm run build:css && npm run build:purge",
    "serve": "npx live-server --port=3000"
  }
}

npm run build    # コンパイル + パージ
npm run serve    # ローカル開発サーバー

// purgecss.config.js — 完全な本番設定
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.php',
  ],
  css: [
    './dist/style.css',
    './node_modules/bootstrap-icons/font/bootstrap-icons.css',
  ],
  safelist: {
    standard: [
      // Bootstrapの動的クラス
      /^bs-/,            // すべてのBootstrap CSS変数
      /^data-bs-/,       // すべてのdata属性
      'active', 'show', 'fade', 'collapsing',
      'modal-open', 'modal-backdrop',
      'carousel-item-start', 'carousel-item-end',
      'tooltip', 'popover', 'toast',
      /^btn-/,           // ボタンバリアントクラス
      /^bg-/,            // 背景クラス
      /^text-/,          // テキストカラークラス
      /^border-/,        // ボーダークラス
      /^alert-/,         // アラートバリアント
      /^badge-/,         // バッジバリアント
    ],
    deep: [
      /^theme$/,
    ],
    greedy: [
      /dark/,
    ],
  },
  blocklist: [
    /^bi-/,              // 未使用のBIアイコンをオプションで削除
  ],
  variables: true,
};

// 実行: npx purgecss --config purgecss.config.js --output dist/style.purged.css

// 最適化ビルド用のpackage.jsonスクリプト
{
  "scripts": {
    "dev": "sass scss/custom.scss dist/style.css --watch",
    "build:css": "sass scss/custom.scss dist/style.css --style compressed",
    "build:purge": "purgecss --config purgecss.config.js --output dist/style.purged.css",
    "build:copy": "cp dist/style.purged.css dist/style.min.css",
    "build": "npm run build:css && npm run build:purge && npm run build:copy",
    "build:all": "npm run build && npx terser dist/script.js -o dist/script.min.js",
    "serve": "npx live-server --port=3000 --no-browser"
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO メタ -->
  <title>最適化されたBootstrapページ</title>
  <meta name="description" content="Bootstrapで構築されたLighthouseスコア95以上のページ。">

  <!-- CDNへの事前接続 -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">

  <!-- クリティカルCSSのインライン化（最初に読み込む） -->
  <style>
    /* ファーストビューのコンテンツ用の最小限のクリティカルCSS */
    .hero { background: #0d6efd; color: #fff; padding: 4rem 0; }
    .container { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
    @media (max-width: 768px) { .hero { padding: 2rem 0; } }
  </style>

  <!-- 重要でないCSS（遅延読み込み） -->
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"></noscript>

  <!-- ヒーロー画像のプリロード -->
  <link rel="preload" href="hero.webp" as="image" fetchpriority="high">
</head>
<body>
  <div class="hero">
    <div class="container">
      <h1 class="display-4 fw-bold">最適化されたBootstrap</h1>
      <p class="lead mb-4">Lighthouseスコア: パフォーマンス98、アクセシビリティ100、ベストプラクティス95</p>
      <a href="#" class="btn btn-light btn-lg px-4">開始する</a>
    </div>
  </div>

  <div class="container py-5">
    <div class="row g-4">
      <!-- 遅延読み込み画像付きカード -->
      <div class="col-md-4">
        <div class="card p-4 h-100">
          <img src="placeholder.svg" data-src="card1.webp" class="card-img-top lazy" alt="Card 1" width="400" height="250" loading="lazy">
          <h5 class="card-title mt-2">最適化されたカード</h5>
          <p class="card-text text-body-secondary">遅延読み込みWebP画像、適切なアスペクト比。</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4 h-100">
          <img src="placeholder.svg" data-src="card2.webp" class="card-img-top lazy" alt="Card 2" width="400" height="250" loading="lazy">
          <h5 class="card-title mt-2">高速読み込み</h5>
          <p class="card-text text-body-secondary">フォントディスプレイのスワップが有効。</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4 h-100">
          <img src="placeholder.svg" data-src="card3.webp" class="card-img-top lazy" alt="Card 3" width="400" height="250" loading="lazy">
          <h5 class="card-title mt-2">アクセシブル</h5>
          <p class="card-text text-body-secondary">アクセシビリティスコア100を保証。</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 遅延Bootstrap JS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>

  <!-- 画像の遅延読み込み -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const lazyImages = document.querySelectorAll('.lazy');
      if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver(function(entries) {
          entries.forEach(function(entry) {
            if (entry.isIntersecting) {
              const img = entry.target;
              img.src = img.dataset.src;
              img.classList.remove('lazy');
              observer.unobserve(img);
            }
          });
        });
        lazyImages.forEach(function(img) { observer.observe(img); });
      }
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォールバック付きCDN</title>

  <!-- プライマリCDN: jsDelivr -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        id="bootstrap-css"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">

  <!-- フォールバック: プライマリCDNが失敗した場合、unpkgから読み込む -->
  <script>
    window.onload = function() {
      var css = document.getElementById('bootstrap-css');
      if (css && !css.sheet) {
        var fallback = document.createElement('link');
        fallback.rel = 'stylesheet';
        fallback.href = 'https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css';
        document.head.appendChild(fallback);
      }
    };
  </script>
</head>
<body>
  <div class="container py-5">
    <h1>CDNマルチソースフォールバック</h1>
    <div class="alert alert-success">
      <i class="bi bi-check-circle-fill me-2"></i> Bootstrapの読み込みに成功しました!
    </div>
    <p class="text-body-secondary">jsDelivrがダウンした場合、自動的にunpkgにフォールバックします。</p>

    <div class="card p-4 shadow-sm">
      <h5>CDNソースチェーン</h5>
      <ol class="mb-0">
        <li class="mb-1"><strong>プライマリ:</strong> cdn.jsdelivr.net</li>
        <li class="mb-1"><strong>フォールバック1:</strong> unpkg.com</li>
        <li><strong>フォールバック2:</strong> cdnjs.cloudflare.com</li>
      </ol>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
          crossorigin="anonymous"
          defer></script>
  <script>
    // JSフォールバック
    if (typeof bootstrap === 'undefined') {
      var script = document.createElement('script');
      script.src = 'https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
      script.defer = true;
      document.body.appendChild(script);
    }
  </script>
</body>
</html>

// package.json — フルビルドパイプライン
{
  "name": "bootstrap-production-build",
  "version": "1.0.0",
  "scripts": {
    "clean": "rimraf dist",
    "sass:compile": "sass scss/custom.scss:dist/css/style.css --style compressed",
    "sass:watch": "sass scss/custom.scss:dist/css/style.css --watch",
    "prefix": "postcss dist/css/style.css --use autoprefixer -o dist/css/style.prefixed.css",
    "purge": "purgecss --config purgecss.config.js --output dist/css/style.min.css",
    "js:bundle": "esbuild src/js/main.js --bundle --minify --outfile=dist/js/main.min.js",
    "img:min": "imagemin src/images/* --out-dir=dist/images",
    "copy:html": "cp src/*.html dist/",
    "build:dev": "npm run clean && npm run sass:compile && npm run copy:html",
    "build:prod": "npm run build:dev && npm run prefix && npm run purge && npm run js:bundle && npm run img:min",
    "serve": "lite-server --baseDir='dist'",
    "deploy": "npm run build:prod && gh-pages -d dist"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.17",
    "esbuild": "^0.20.0",
    "imagemin-cli": "^7.0.0",
    "lite-server": "^2.6.1",
    "postcss": "^8.4.33",
    "postcss-cli": "^11.0.0",
    "purgecss": "^6.0.0",
    "rimraf": "^5.0.5",
    "sass": "^1.70.0"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3"
  }
}

# フルビルドコマンド

# 開発
npm run build:dev     # SCSSのコンパイル + HTMLのコピー

# 本番
npm run build:prod    # コンパイル → オートプレフィックス → パージ → JSの圧縮 → 画像の最適化

# ローカルプレビュー
npm run serve         # dist/を自動リロードで配信

# GitHub Pagesへのデプロイ
npm run deploy        # ビルド + パブリッシュ

# 個別のステップ
npx sass scss/custom.scss dist/css/style.css --style compressed
npx postcss dist/css/style.css --use autoprefixer -o dist/css/style.prefixed.css
npx purgecss --css dist/css/style.prefixed.css --content dist/**/*.html --output dist/css/
npx esbuild src/js/main.js --bundle --minify --outfile=dist/js/main.min.js