🌐 หน้า WebUI ของ Chromium ใน iBrowe

หน้า WebUI ใน iBrowe (ซึ่งพัฒนาต่อยอดจาก Chromium) ใช้ระบบพื้นฐานเดียวกันสำหรับการจัดการเส้นทาง (routing), การคอมไพล์ (compiling) และการปรับแต่งประสิทธิภาพ (optimizing) ของโมดูล HTML/JS โดยโมดูลเหล่านี้สามารถอ้างอิงไฟล์ได้ทั้งแบบ relative (เช่น …/my_module.html) หรือ absolute ผ่าน URL ภายในระบบ (เช่น ibrowe://settings/my_module.html)

ทรัพยากร (resources) ทั้งหมดจำเป็นต้องสามารถเข้าถึงได้ผ่านทั้ง HTTP และ FileSystem ในระหว่างกระบวนการ build โดยแต่ละ URL ที่ขึ้นต้นด้วย ibrowe:// จะถูกแมป (map) ไปยังเส้นทางไฟล์ (file path) ที่เกี่ยวข้อง โดยใช้คำสั่ง optimize_web_ui ในระบบ build ของ GN

🧱 ขั้นตอนการ Build โดยทั่วไปสำหรับ WebUI ที่พัฒนาบน Chromium

สำหรับ WebUI ส่วนใหญ่ (เช่น ibrowe://settings) กระบวนการในระบบ GN pipeline จะประกอบด้วยขั้นตอนดังนี้:

• Closure Compiler → ทำการตรวจสอบประเภทตัวแปร (type-checking) สำหรับไฟล์ JavaScript modules
• Grit Tool → รวมทรัพยากรต่าง ๆ (resources) ให้อยู่ในไฟล์ .pak ผ่านไฟล์ manifest นามสกุล .grd
• Unpacking → แยกเนื้อหาในไฟล์ .pak ไปยังโฟลเดอร์ staging สำหรับขั้นตอนต่อไป
• optimize_web_ui → ทำการรวมไฟล์โมดูลต่าง ๆ ให้อยู่ในไฟล์เดียว (flatten) และย่อขนาดไฟล์ (minify) เพื่อเพิ่มประสิทธิภาพ
• Repacking → สร้างไฟล์ .pak ที่ถูกปรับแต่งและย่อขนาดแล้วอีกครั้งด้วย Grit

🔁 การแมป URL ไปยัง Path บน Filesystem

เพื่อให้สามารถแปลงเส้นทาง เช่น ibrowe://resources/… ไปยังตำแหน่งไฟล์จริงในระบบไฟล์ (filesystem) สคริปต์ optimize_web_ui.py จะใช้ตาราง mapping ที่ตั้งค่าไว้ล่วงหน้า เช่น:

_URL_MAPPINGS = [ (‘chrome://resources/cr_components/’, _CR_COMPONENTS_PATH), (‘chrome://resources/cr_elements/’, _CR_ELEMENTS_PATH), (‘chrome://resources/css/’, _CSS_RESOURCES_PATH), (‘chrome://resources/html/’, _HTML_RESOURCES_PATH), (‘chrome://resources/js/’, _JS_RESOURCES_PATH), (‘chrome://resources/polymer/v1_0/’, _POLYMER_PATH), (‘chrome://brave-resources/’, _BR_RESOURCES_PATH) # ใน iBrowe จะเปลี่ยนเป็น ibrowe-resources ]

สำหรับ path ที่ไม่ใช่ core เช่น ibrowe://history การ mapping จะถูกกำหนดโดยตรงในไฟล์ GN build เช่น:

optimize_webui(“build”) { host = “history” input = rebase_path(“.”, root_build_dir) … }

ซึ่งจะเป็นการแจ้งให้ระบบ build ทราบว่า ให้แมป URL ibrowe://history/xyz.html ไปยังโฟลเดอร์หรือไฟล์ที่สอดคล้องกันใน filesystem

🧪 Debug Builds vs Release Builds

🔧 Debug Builds

• ในโหมด Debug จะให้บริการไฟล์แบบแยกกัน (Serve individual files) เช่น ibrowe://settings/module1.js
• จะไม่มีการรวมไฟล์ (flattening) หรือย่อไฟล์ (minification)
• เหมาะสำหรับการดีบัก (debug) เพื่อตรวจสอบการโหลดโมดูลในรูปแบบดิบ (raw)

🚀 Release Builds

• ในโหมด Release หน้า WebUIs จะถูกปรับแต่งให้มีประสิทธิภาพสูงสุด ด้วยการใช้คำสั่ง optimize_web_ui
• ไฟล์ต่าง ๆ จะถูก รวม (flattened) และ ย่อขนาด (minified) ให้อยู่ใน bundle เดียว
• จำเป็นต้องทำการทดสอบเพิ่มเติม เพื่อให้แน่ใจว่าเว็บทำงานได้ถูกต้องทั้งในโหมด Debug และ Release

🐾 WebUIs เฉพาะของ iBrowe WebUI ที่สร้างขึ้นมาเฉพาะสำหรับ iBrowe (ไม่ได้สืบทอดมาจาก Chromium โดยตรง) จะ ไม่ใช้ optimize_web_ui แต่จะพึ่งพา Webpack ซึ่งมีความสามารถดังนี้:

• รองรับทั้ง TypeScript และ JavaScript
• การแก้ปัญหาเรื่องเส้นทางโมดูล (module resolution) และการลบโค้ดส่วนที่ไม่ถูกใช้ (tree-shaking)
• การแบ่งโค้ดออกเป็นส่วนย่อย ๆ (code splitting) หรือรวมเป็นไฟล์เดียว (bundling)
• การย่อโค้ด (minification) เพื่อลดขนาดไฟล์
• การสร้างไฟล์ .grd แบบไดนามิกจากคำสั่ง import ต่าง ๆ

📚 ศึกษาข้อมูลเพิ่มเติมได้ที่: https://github.com/brave/brave-browser/wiki/Javascript-and-Typescript-Bundling

เนื้อหานี้ดัดแปลงและปรับปรุงมาจากเอกสารของ Brave เกี่ยวกับ Chromium WebUI: https://github.com/brave/brave-browser/wiki

โดยในเนื้อหานี้ ได้เปลี่ยนการอ้างอิงจาก chrome:// และ brave:// ให้เป็น ibrowe:// ตามการใช้งานใน iBrowe