Web Components CDN Configuration — ตั้งค่า CDN สำหรับ Web Components

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

<button id="inc">+</button>

<span></span>

`;

}

เนื้อหาเกี่ยวข้อง — ทำความเข้าใจ Prometheus PromQL Home Lab Setup

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

แนะนำเพิ่มเติม — ระบบเทรดของ iCafeForex

<my-counter initial="5"></my-counter>

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 ===")

เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: A/B Testing ML Backup Recovery Strategy

total_size = sum(c.size_kb for c in components)

for c in components:

print(f" &lt;{c.tag}&gt; — {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 &amp; 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]

แนะนำเพิ่มเติม — หนังสือเทรดที่ SiamCafeBook

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

เนื้อหาเกี่ยวข้อง — อ่านต่อ: Netlify Edge Metric Collection — เก็บ Metrics จาก Edge Network

# 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",

เนื้อหาเกี่ยวข้อง — อ่านต่อ: Fivetran Connector Open Source Contribution

"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