FileKit — เครื่องมือจัดการไฟล์ที่ทำงานในเบราว์เซอร์ล้วน

🔗 ใช้งานจริง: https://patcharasitp.github.io/filekit/ (ติดตั้งลงมือถือเป็นแอปได้ · ใช้ได้แม้ออฟไลน์)

เว็บแปลง/จัดการไฟล์ PDF · Excel · Word · PowerPoint · รูปภาพ 71 เครื่องมือ ที่ประมวลผลในเครื่องผู้ใช้ทั้งหมด ไม่มีการอัปโหลดไฟล์ขึ้นเซิร์ฟเวอร์ และใช้งานได้แม้ไม่มีอินเทอร์เน็ต

สร้างขึ้นเองทั้งหมด โดยถอดบทเรียนด้าน performance จากการวัดเว็บต้นแบบและงานวิจัยที่เก็บไว้ที่ .claude/research/2026-09-07-web-perf-clientside-converter.md และ .claude/research/2026-09-07-file-tools-market-scan.md

---

ผลด้าน performance (วัดจริง ไม่ใช่ประมาณ)

เทียบกับเว็บต้นแบบ (bbellechy.github.io/ILoveMyJob) ที่โหลดไลบรารีทั้ง 9 ตัวแบบ blocking ตั้งแต่หน้าแรก วัดด้วย Playwright + Chrome DevTools Protocol เงื่อนไขเดียวกันทั้งคู่ (เสิร์ฟจาก localhost, ไลบรารีชุดเดียวกัน):

วัดบน production จริง — ทั้งสองเว็บอยู่บน GitHub Pages เหมือนกัน เน็ตจริงเงื่อนไขเดียวกัน:

ตัวชี้วัด	ต้นแบบ	FileKit	ผล
FCP — มือถือ Slow-4G + CPU ช้า 4×	5,152 ms	328 ms	เร็วขึ้น 15.7×
FCP — เดสก์ท็อป	1,000 ms	448 ms	เร็วขึ้น 2.2×
ข้อมูลที่ต้องโหลดก่อนเห็นหน้าแรก	831 KB	13 KB (29 KB ก่อนบีบ)	ลด 98%
JavaScript ที่เบราว์เซอร์ต้อง parse	3,603 KB	27 KB	ลด 99%
จำนวนไฟล์ที่ขอ	12	5
หน่วยความจำหน้าแรก	17 MB	10 MB	ลด 41%

เทียบแบบตัดตัวแปรเครือข่ายออก (ทั้งคู่เสิร์ฟจาก localhost ไม่มี gzip ไลบรารีชุดเดียวกัน) จะเห็นผลของสถาปัตยกรรมล้วน ๆ: FCP มือถือ 18,736 ms → 272 ms = เร็วขึ้น 68.9×

ทำไมถึงเร็วกว่า — 7 อย่างที่ทำต่างออกไป

1. หน้าแรกไม่โหลดไลบรารีสักตัว — src/registry.js เก็บแค่ข้อมูลเครื่องมือ ไม่ import โค้ด ไลบรารีถูกดึงตอนเปิดเครื่องมือนั้นจริงผ่าน src/loader.js (แคช promise กันโหลดซ้ำ)
2. Prefetch ตามเจตนา — ชี้เมาส์/โฟกัสที่การ์ด = เริ่มดึงโค้ดเครื่องมือ + ไลบรารีทันทีใน requestIdleCallback ผู้ใช้ใช้เวลาจากชี้ถึงคลิกราว 100–300 ms ซึ่งพอให้โหลดล่วงหน้าได้ ตัวค้นหาก็เหมือนกัน (src/search.js กับคำค้นสำรอง src/registry-keys.js) ดึงตอนชี้หรือโฟกัสช่องค้นหา ไม่มากับหน้าแรก
3. Self-host ไลบรารีทั้งหมด — ตั้งแต่ Chrome 86 แคชถูกแบ่งตามเว็บที่เรียก ไฟล์จาก CDN สาธารณะ จึงไม่ถูกใช้ซ้ำข้ามเว็บอีกแล้ว การ self-host ตัด DNS + TLS + connect ของโดเมนที่สามทิ้ง (vendor/ มี fallback ไป CDN อัตโนมัติถ้าไฟล์หาย)
4. CSS วิกฤตฝังใน HTML — หน้าแรกวาดได้ครบโดยไม่รอไฟล์ CSS ภายนอก ส่วนสไตล์หน้าเครื่องมือโหลดทีหลัง
5. ฟอนต์ไทย subset — Sarabun ตัดเหลือเฉพาะช่วงอักขระที่ใช้: 90 KB → 45.7 KB ต่อน้ำหนัก และโหลดเมื่อจะสร้าง PDF เท่านั้น
6. คืนคิวให้เบราว์เซอร์ระหว่างงานหนัก — ทุกลูปประมวลผลเรียก scheduler.yield() (fallback setTimeout) จอจึงไม่ค้างและ INP ไม่พุ่งแม้กำลังแปลงไฟล์ใหญ่
7. Service Worker — GitHub Pages ตั้ง max-age=600 เท่ากันหมดและไม่ส่ง brotli เราจึงคุมแคชเอง: vendor/* แบบ cache-first, ที่เหลือ stale-while-revalidate → เปิดซ้ำเร็วและใช้งานออฟไลน์ได้

การใช้งานออฟไลน์ทำงานอย่างไร (และข้อจำกัดที่วัดมาแล้ว)

เว็บนี้ไม่ได้คุยกับเซิร์ฟเวอร์ระหว่างแปลงไฟล์อยู่แล้ว — โค้ดทั้งหมดรันในเบราว์เซอร์ Service Worker จึงทำได้แค่เก็บ "ตัวเว็บ" ไว้ในเครื่อง แล้วหลังจากนั้นทุกอย่างทำงานได้เองโดยไม่ต้องมีเน็ต

แต่เดิมมีข้อจำกัดที่ต้องพูดตรง ๆ (พิสูจน์ด้วยการตัดเน็ตระดับเครือข่ายจริง ไม่ใช่แค่ navigator.onLine):

สถานการณ์	ผลจริงที่วัดได้
เครื่องมือที่เคยเปิดตอนมีเน็ตแล้ว	✅ ใช้ออฟไลน์ได้
เครื่องมือที่ยังไม่เคยเปิดเลย	❌ ใช้ไม่ได้ (ไลบรารียังไม่ถูกเก็บ)

เพราะไลบรารีถูกดาวน์โหลดแบบ on-demand ตามหลัก performance ข้างบน — ตอนเปิดหน้าแรกจึงมีไลบรารีเก็บไว้ 0 ไฟล์

วิธีแก้ที่เลือกใช้: ปุ่ม "เตรียมใช้งานออฟไลน์" ท้ายหน้าแรก (src/offline.js) กดครั้งเดียวจะดึงไลบรารี ฟอนต์ และโค้ดของทุกเครื่องมือ (~5 MB, 45 ไฟล์) มาเก็บไว้ล่วงหน้า เลือกทำแบบให้ผู้ใช้กดเอง ไม่ใช่โหลดอัตโนมัติ เพราะการโหลด 5 MB ตั้งแต่หน้าแรกจะทำลายข้อดีเรื่องความเร็วทั้งหมด

หลังกดปุ่มแล้ว ทดสอบด้วยการตัดเน็ตจริง + เปิดเบราว์เซอร์ใหม่: Excel→PDF, PowerPoint→Word, PDF→Word และย่อรูป ใช้ได้ครบทั้งที่ไม่เคยเปิดเครื่องมือเหล่านั้นมาก่อน (8/8 ผ่าน)

ข้อจำกัดที่ยังเหลือ: OCR ครั้งแรกต้องมีเน็ต เพราะชุดภาษาไทย (~10-30 MB) โหลดจาก CDN ของ Tesseract

เครื่องมือทั้งหมด (71)

กลุ่ม	เครื่องมือ
จัดหน้า PDF	จัดการหน้า PDF, รวมไฟล์ PDF, แยกไฟล์ PDF, บีบอัดไฟล์ PDF, ครอบตัดขอบ PDF, เปลี่ยนขนาดกระดาษ PDF, หลายหน้าต่อแผ่น และหนังสือเล่มเล็ก, ลบหน้าว่างจากไฟล์สแกน
แก้ไขและประทับตรา	แก้ไขและเซ็นบน PDF, เซ็นชื่อบน PDF, เทียบ PDF สองฉบับ, ใส่ลายน้ำ PDF, ลบชั้นที่ทับบนหน้า PDF, ใส่เลขหน้า PDF, OCR อ่านข้อความจากสแกน
ความปลอดภัย PDF	ใส่รหัสผ่าน PDF, ตรวจ PDF ก่อนส่ง, ลบข้อมูลลับออกจาก PDF, ปลดรหัสผ่าน PDF
แปลงจาก PDF	ดึงรูปออกจาก PDF, PDF เป็น PowerPoint, PDF เป็น Images, PDF เป็นภาพยาวแผ่นเดียว, PDF เป็นข้อความ, PDF เป็น Markdown, PDF เป็น Word, PDF เป็น Excel
รูปภาพ	แปลงชนิดไฟล์รูป, ย่อและบีบอัดรูปภาพ, ลบพื้นหลังรูปภาพ, Images เป็น PDF, สร้าง QR
เอกสารและจดหมายเวียน	รวมไฟล์ Word, ค้นหาและแทนที่ทั้งชุด, ตรวจเอกสารก่อนส่ง, จดหมายเวียน Word + Excel, Word เป็น PDF, ข้อความเป็น PDF
PowerPoint	PowerPoint เป็น Word, PowerPoint เป็น PDF
Excel และการคำนวณ	หายอดที่บวกกันได้เท่านี้, สลับ Excel กับ CSV, แยกไฟล์ Excel ตามคอลัมน์, รวมหลายไฟล์ Excel, ดึงข้อมูลจากอีกไฟล์มาเติม, Excel เป็น PDF
งานเอกสารไทย	ซ่อมไฟล์ไทยเพี้ยน, จัดข้อมูลลูกค้าไทยครบในรอบเดียว, สลับปี พ.ศ. กับ ค.ศ. ทั้งคอลัมน์, ตรวจเลขบัตร ปชช. / ผู้เสียภาษี, แยกคำนำหน้า, ชื่อ, นามสกุล, แยกที่อยู่ไทยเป็นคอลัมน์, ตัวเลขเป็นบาทถ้วน / เลขไทย, นับคำภาษาไทย
Power BI	กราฟโดนัท Deneb, กราฟแท่งแนวนอน Deneb, กราฟ Gantt แผนงาน Deneb, ของสำเร็จรูปแจกฟรี, รายละเอียดหลายคอลัมน์ในช่องเดียวของ Matrix, สร้างธีม Power BI (theme.json), แผนที่พื้นที่รอบจุด, แผนที่การย้ายที่ตั้ง
Power Query	ตารางเป็นสูตร Power Query, จัดกลุ่มตัวเลขเป็นช่วง, สร้างสูตรค้นข้ามหลายแหล่ง, ยุบหลายแถวให้เหลือแถวเดียว, แปลงข้อความให้เป็นวันที่, เลือกวันล่าสุดจากหลายคอลัมน์, รวมหลาย query เป็นตัวเดียว
Power Automate Cloud	ตารางเป็น Schema ของ Parse JSON, ตาราง HTML สำหรับอีเมลใน flow

This is the beginning of the README. Read the rest at the original. Read the full README ↗