Bootstrap: 性能优化与构建部署

// 只导入用到的模块
@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

<!-- Always use .min.css / .min.js in production -->
<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'

// Initialize all tooltips
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el))

<!-- Defer non-critical 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 请求 -->

<!-- Always use width + height to prevent layout shift -->
<img src="photo.webp" width="800" height="450" class="img-fluid" alt="Photo"
     loading="lazy">

<!-- Use modern formats -->
<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    # Compile + purge
npm run serve    # Local dev server

// purgecss.config.js — Full production configuration
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.php',
  ],
  css: [
    './dist/style.css',
    './node_modules/bootstrap-icons/font/bootstrap-icons.css',
  ],
  safelist: {
    standard: [
      // Bootstrap dynamic classes
      /^bs-/,            // All Bootstrap CSS variables
      /^data-bs-/,       // All data attributes
      'active', 'show', 'fade', 'collapsing',
      'modal-open', 'modal-backdrop',
      'carousel-item-start', 'carousel-item-end',
      'tooltip', 'popover', 'toast',
      /^btn-/,           // Button variant classes
      /^bg-/,            // Background classes
      /^text-/,          // Text color classes
      /^border-/,        // Border classes
      /^alert-/,         // Alert variants
      /^badge-/,         // Badge variants
    ],
    deep: [
      /^theme$/,
    ],
    greedy: [
      /dark/,
    ],
  },
  blocklist: [
    /^bi-/,              // Optionally remove unused BI icons
  ],
  variables: true,
};

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

// package.json scripts for optimized build
{
  "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 Meta -->
  <title>Optimized Bootstrap Page</title>
  <meta name="description" content="Lighthouse score 95+ page built with Bootstrap.">

  <!-- Preconnect to CDN -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">

  <!-- Critical CSS inline (load first) -->
  <style>
    /* Minimal critical CSS for above-the-fold content */
    .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>

  <!-- Non-critical CSS (deferred) -->
  <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>

  <!-- Preload hero image -->
  <link rel="preload" href="hero.webp" as="image" fetchpriority="high">
</head>
<body>
  <div class="hero">
    <div class="container">
      <h1 class="display-4 fw-bold">Optimized Bootstrap</h1>
      <p class="lead mb-4">Lighthouse score: Performance 98, Accessibility 100, Best Practices 95</p>
      <a href="#" class="btn btn-light btn-lg px-4">Get Started</a>
    </div>
  </div>

  <div class="container py-5">
    <div class="row g-4">
      <!-- Cards with lazy loaded images -->
      <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">Optimized Card</h5>
          <p class="card-text text-body-secondary">Lazy-loaded WebP image, proper aspect ratio.</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">Fast Loading</h5>
          <p class="card-text text-body-secondary">Font display swap enabled.</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">Accessible</h5>
          <p class="card-text text-body-secondary">100 Accessibility score guaranteed.</p>
        </div>
      </div>
    </div>
  </div>

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

  <!-- Lazy load images -->
  <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 with Fallback</title>

  <!-- Primary 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">

  <!-- Fallback: if primary CDN fails, load from 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 Multi-Source Fallback</h1>
    <div class="alert alert-success">
      <i class="bi bi-check-circle-fill me-2"></i> Bootstrap loaded successfully!
    </div>
    <p class="text-body-secondary">If jsDelivr is down, automatically falls back to unpkg.</p>

    <div class="card p-4 shadow-sm">
      <h5>CDN Source Chain</h5>
      <ol class="mb-0">
        <li class="mb-1"><strong>Primary:</strong> cdn.jsdelivr.net</li>
        <li class="mb-1"><strong>Fallback 1:</strong> unpkg.com</li>
        <li><strong>Fallback 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 fallback — 在defer脚本之后运行
    document.addEventListener('DOMContentLoaded', function() {
      if (typeof bootstrap === 'undefined') {
        var script = document.createElement('script');
        script.src = 'https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
        document.body.appendChild(script);
      }
    });
  </script>
</body>
</html>

// package.json — Full build pipeline
{
  "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"
  }
}

# Full build commands

# Development
npm run build:dev     # Compile SCSS + copy HTML

# Production
npm run build:prod    # Compile → Autoprefix → Purge → Minify JS → Optimize images

# Local preview
npm run serve         # Serve dist/ with auto-reload

# Deploy to GitHub Pages
npm run deploy        # Build + publish

# Individual steps
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