Web Components CDN Configuration

Web Components CDN

Web Components Custom Elements Shadow DOM HTML Templates CDN Content Delivery Network Cache Edge Server Performance Cloudflare jsDelivr unpkg Reusable Components

Web Components Development

// === Web Components Example ===

// Custom Element — Counter Component
// class MyCounter extends HTMLElement {
//   constructor() {
//     super();
//     this.count = 0;
//     this.attachShadow({ mode: 'open' });
//   }
//
//   connectedCallback() {
//     this.render();
//     this.shadowRoot.querySelector('#inc')
//       .addEventListener('click', () => {
//         this.count++;
//         this.render();
//         this.dispatchEvent(new CustomEvent('count-changed', {
//           detail: { count: this.count },
//           bubbles: true,
//         }));
//       });
//   }
//
//   render() {
//     this.shadowRoot.innerHTML = `
//       
//       +
//       
//     `;
//   }
//
//   static get observedAttributes() { return ['initial']; }
//   attributeChangedCallback(name, old, val) {
//     if (name === 'initial') this.count = parseInt(val) || 0;
//   }
// }
// customElements.define('my-counter', MyCounter);

// Usage in HTML
// 
// 

from dataclasses import dataclass
from typing import List

@dataclass
class WebComponent:
    name: str
    tag: str
    shadow_dom: bool
    size_kb: float
    dependencies: int
    description: str

components = [
    WebComponent("Counter", "my-counter", True, 2.1, 0, "Simple counter with events"),
    WebComponent("Modal", "my-modal", True, 4.5, 0, "Accessible modal dialog"),
    WebComponent("Tabs", "my-tabs", True, 3.8, 0, "Tab navigation component"),
    WebComponent("Toast", "my-toast", True, 2.8, 0, "Notification toast messages"),
    WebComponent("DataTable", "my-table", True, 12.5, 1, "Sortable data table"),
    WebComponent("DatePicker", "my-datepicker", True, 8.2, 0, "Date selection input"),
]

print("=== Web Components Library ===")
total_size = sum(c.size_kb for c in components)
for c in components:
    print(f"  <{c.tag}> — {c.description}")
    print(f"    Size: {c.size_kb}KB | Shadow: {c.shadow_dom} | Deps: {c.dependencies}")
print(f"\n  Total Bundle: {total_size:.1f}KB")

CDN Configuration

# === CDN Setup & Configuration ===

# Cloudflare CDN (cloudflare.toml / wrangler.toml)
# name = "my-components"
# main = "dist/index.js"
# compatibility_date = "2024-03-01"
#
# [site]
# bucket = "./dist"
#
# [[headers]]
# for = "/components/*"
# [headers.values]
#   Cache-Control = "public, max-age=31536000, immutable"
#   Access-Control-Allow-Origin = "*"

# Nginx CDN Config
# server {
#     listen 443 ssl http2;
#     server_name cdn.example.com;
#
#     location /components/ {
#         alias /var/www/components/;
#         expires 1y;
#         add_header Cache-Control "public, immutable";
#         add_header Access-Control-Allow-Origin "*";
#         add_header X-Content-Type-Options "nosniff";
#
#         # Gzip
#         gzip on;
#         gzip_types application/javascript text/css;
#
#         # Brotli (if available)
#         brotli on;
#         brotli_types application/javascript text/css;
#     }
# }

# Package.json for npm + CDN
# {
#   "name": "my-web-components",
#   "version": "1.2.0",
#   "main": "dist/index.js",
#   "module": "dist/index.esm.js",
#   "unpkg": "dist/index.umd.js",
#   "jsdelivr": "dist/index.umd.js",
#   "files": ["dist"],
#   "exports": {
#     ".": { "import": "./dist/index.esm.js", "require": "./dist/index.js" },
#     "./counter": { "import": "./dist/counter.esm.js" }
#   }
# }

cdn_config = {
    "Cache Headers": {
        "static": "Cache-Control: public, max-age=31536000, immutable",
        "html": "Cache-Control: public, max-age=300, stale-while-revalidate=86400",
        "api": "Cache-Control: private, no-cache",
    },
    "Compression": {
        "brotli": "ลดขนาด 20-30% เทียบ Gzip",
        "gzip": "รองรับทุก Browser",
        "minify": "ลบ Whitespace Comments",
    },
    "Versioning": {
        "semver": "v1.2.0 — Major.Minor.Patch",
        "hash": "component.a1b2c3.js — Content Hash",
        "latest": "cdn.jsdelivr.net/npm/pkg@latest",
    },
}

print("\nCDN Configuration:")
for category, items in cdn_config.items():
    print(f"\n  [{category}]")
    for k, v in items.items():
        print(f"    {k}: {v}")

Performance Optimization

# === Performance Optimization ===

# Loading Strategies
# 1. Lazy Load — โหลดเมื่อ Component เข้า Viewport
# 

# 2. Preload Critical Components
# 
# 

# 3. Service Worker Cache
# self.addEventListener('install', (event) => {
#   event.waitUntil(
#     caches.open('components-v1').then((cache) => {
#       return cache.addAll([
#         '/components/header.js',
#         '/components/footer.js',
#         '/components/nav.js',
#       ]);
#     })
#   );
# });

@dataclass
class PerformanceMetric:
    strategy: str
    fcp_ms: int
    lcp_ms: int
    bundle_kb: float
    requests: int

metrics = [
    PerformanceMetric("No CDN, No Optimize", 2800, 4500, 250, 15),
    PerformanceMetric("CDN Only", 1800, 3000, 250, 15),
    PerformanceMetric("CDN + Minify + Gzip", 1200, 2200, 85, 15),
    PerformanceMetric("CDN + Code Split", 800, 1500, 45, 5),
    PerformanceMetric("CDN + Lazy Load + SW", 500, 1000, 25, 3),
]

print("Performance Comparison:")
for m in metrics:
    print(f"\n  [{m.strategy}]")
    print(f"    FCP: {m.fcp_ms}ms | LCP: {m.lcp_ms}ms")
    print(f"    Bundle: {m.bundle_kb}KB | Requests: {m.requests}")

เคล็ดลับ

• Shadow DOM: ใช้ Shadow DOM ป้องกัน Style Collision ข้าม Project
• Lazy Load: Lazy Load Components ที่ไม่อยู่ใน Viewport แรก
• Versioning: ใช้ Content Hash ใน Filename สำหรับ Cache Busting
• Preload: Preload Critical Components ที่ใช้ Above the Fold
• Fallback: มี Fallback ถ้า CDN ล่ม โหลดจาก Origin แทน

การดูแลระบบในสภาพแวดล้อม Production

การบริหารจัดการระบบ Production ที่ดีต้องมี Monitoring ครอบคลุม ใช้เครื่องมืออย่าง Prometheus + Grafana สำหรับ Metrics Collection และ Dashboard หรือ ELK Stack สำหรับ Log Management ตั้ง Alert ให้แจ้งเตือนเมื่อ CPU เกิน 80% RAM ใกล้เต็ม หรือ Disk Usage สูง

Backup Strategy ต้องวางแผนให้ดี ใช้หลัก 3-2-1 คือ มี Backup อย่างน้อย 3 ชุด เก็บใน Storage 2 ประเภทต่างกัน และ 1 ชุดต้องอยู่ Off-site ทดสอบ Restore Backup เป็นประจำ อย่างน้อยเดือนละครั้ง เพราะ Backup ที่ Restore ไม่ได้ก็เหมือนไม่มี Backup

เรื่อง Security Hardening ต้องทำตั้งแต่เริ่มต้น ปิด Port ที่ไม่จำเป็น ใช้ SSH Key แทน Password ตั้ง Fail2ban ป้องกัน Brute Force อัพเดท Security Patch สม่ำเสมอ และทำ Vulnerability Scanning อย่างน้อยเดือนละครั้ง ใช้หลัก Principle of Least Privilege ให้สิทธิ์น้อยที่สุดที่จำเป็น

สรุป

Web Components Custom Elements Shadow DOM CDN Cloudflare jsDelivr Cache Performance Lazy Load Preload Service Worker Versioning Compression Brotli Gzip Code Splitting Fallback