Chrome กำลังร่วมมือกับเฟรมเวิร์กโอเพนซอร์สเพื่อสร้างเว็บที่ดีขึ้น
Chrome เป็นผู้มีส่วนร่วมอย่างแข็งขันสำหรับระบบนิเวศเฟรมเวิร์กเว็บ และการพูดคุยของเราในงาน Chrome Dev Summit ปี 2019 ครอบคลุมสิ่งที่เราได้ทำไปในปีที่ผ่านมา
โปรดอ่านต่อไปเพื่อสรุปการพูดคุยเพิ่มเติมพร้อมรายละเอียดและแหล่งข้อมูลเพิ่มเติม
เราจะปรับปรุงเว็บให้ดีขึ้นได้อย่างไร
เป้าหมายของทุกคนในทีม Chrome คือการทำให้เว็บดีขึ้น เราพยายามปรับปรุง API ของเบราว์เซอร์และ V8 ซึ่งเป็นเครื่องมือ JavaScript และ WebAssembly หลักที่ขับเคลื่อน Chrome เพื่อให้นักพัฒนาซอฟต์แวร์มีฟีเจอร์ต่างๆ ที่ช่วยในการสร้างหน้าเว็บที่ยอดเยี่ยม นอกจากนี้ เรายังพยายามที่จะปรับปรุงเว็บไซต์ที่ใช้งานได้จริงในปัจจุบันด้วยการร่วมให้ข้อมูลเกี่ยวกับเครื่องมือโอเพนซอร์สในหลายๆ ทาง
นักพัฒนาเว็บส่วนใหญ่พึ่งพาเครื่องมือโอเพนซอร์สทุกครั้งที่เป็นไปได้ และไม่ต้องการสร้างโครงสร้างพื้นฐานที่กำหนดเองทั้งหมด เฟรมเวิร์ก JavaScript และไลบรารี UI ฝั่งไคลเอ็นต์เป็นส่วนหนึ่งของการใช้งานโอเพนซอร์สที่เพิ่มขึ้น ข้อมูลเกี่ยวกับเฟรมเวิร์กและไลบรารีฝั่งไคลเอ็นต์ที่ได้รับความนิยมสูงสุด 3 รายการ ได้แก่ React, Angular และ Vue แสดงให้เห็นว่า
- 72% ของผู้เข้าร่วมในแบบสำรวจนักพัฒนาซอฟต์แวร์และนักออกแบบเว็บประจำปีครั้งแรกของ MDN ใช้เฟรมเวิร์กและไลบรารีเหล่านี้อย่างน้อย 1 รายการ
- เว็บไซต์มากกว่า 320,000 แห่งใน URL 5 ล้านรายการแรกที่วิเคราะห์โดยที่เก็บถาวรของ HTTP ใช้เฟรมเวิร์กและไลบรารีเหล่านี้อย่างน้อย 1 รายการ
- เมื่อจัดกลุ่มตามเวลาที่ใช้ไป URL 30 รายการจาก 100 อันดับแรกจะใช้เฟรมเวิร์กและไลบรารีเหล่านี้อย่างน้อย 1 รายการ (เราทำการวิจัยเกี่ยวกับข้อมูลภายในของ)
ซึ่งหมายความว่าเครื่องมือโอเพนซอร์สที่ดีขึ้นอาจส่งผลให้เกิดเว็บที่ดีขึ้นโดยตรง และนั่นคือเหตุผลที่วิศวกร Chrome ได้เริ่มทำงานโดยตรงกับเฟรมเวิร์กภายนอกและผู้เขียนห้องสมุด
การร่วมให้ข้อมูลกับเว็บเฟรมเวิร์ก
เฟรมเวิร์กที่ใช้กันโดยทั่วไปเพื่อสร้างและจัดโครงสร้างหน้าเว็บแบ่งออกเป็น 2 หมวดหมู่ ดังนี้
- เฟรมเวิร์ก UI (หรือไลบรารี) เช่น Preact, React หรือ Vue ซึ่งให้การควบคุมเลเยอร์การแสดงผลของแอปพลิเคชัน (เช่น ผ่านโมเดลคอมโพเนนต์)
- เฟรมเวิร์กเว็บ เช่น Next.js, Nuxt.js และ Gatsby ซึ่งมีระบบแบบต้นทางถึงปลายทางพร้อมฟีเจอร์ที่ได้รับการแสดงความคิดเห็นในตัว เช่น การแสดงผลฝั่งเซิร์ฟเวอร์ เฟรมเวิร์กเหล่านี้มักจะใช้ประโยชน์จากเฟรมเวิร์ก UI หรือไลบรารีสำหรับเลเยอร์มุมมอง
นักพัฒนาซอฟต์แวร์สามารถเลือกไม่ใช้เฟรมเวิร์ก แต่การรวมไลบรารี View เลเยอร์ เราเตอร์ ระบบการจัดรูปแบบ ตัวแสดงผลเซิร์ฟเวอร์ ฯลฯ เข้าด้วยกัน พวกเขามักจะสร้างเฟรมเวิร์กประเภทของตัวเอง แม้ว่าเว็บเฟรมเวิร์กจะดูแลข้อกังวลต่างๆ เหล่านี้ได้โดยค่าเริ่มต้น
ส่วนที่เหลือของโพสต์นี้ไฮไลต์การปรับปรุงหลายอย่างที่เพิ่งเกิดขึ้นในเฟรมเวิร์กและเครื่องมือต่างๆ รวมถึงการสนับสนุนจากทีม Chrome
Angular
ทีม Angular ได้ส่งการปรับปรุงหลายอย่างไปยังเฟรมเวิร์กเวอร์ชัน 8 ดังนี้
- ใช้การโหลดที่แตกต่างกันโดยค่าเริ่มต้นเพื่อลด Polyfill ที่ไม่จำเป็นสำหรับเบราว์เซอร์ใหม่ๆ
- การรองรับไวยากรณ์การนำเข้าแบบไดนามิกมาตรฐานสำหรับเส้นทางการโหลดแบบ Lazy Loading
- การรองรับ Web Worker เพื่อเรียกใช้การดําเนินการในเทรดในเบื้องหลังแยกต่างหากจากเทรดหลัก
- Ivy เป็นเครื่องมือการแสดงผลใหม่ของ Angular ที่ประสิทธิภาพการคอมไพล์ซ้ำดีกว่าเดิมและลดขนาดชุด ใช้งานได้ในโหมดแสดงตัวอย่างสำหรับโปรเจ็กต์ที่มีอยู่
ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับปรุงเหล่านี้ได้ใน "เวอร์ชัน 8 ของ Angular" และทีม Chrome หวังเป็นอย่างยิ่งว่าจะได้ร่วมงานกับคุณอย่างใกล้ชิดในปีหน้าเมื่อมีฟีเจอร์อื่นๆ เพิ่มเติม
Next.js
Next.js เป็นเฟรมเวิร์กเว็บที่ใช้ React เป็นเลเยอร์มุมมอง นอกจากโมเดลคอมโพเนนต์ UI ที่นักพัฒนาซอฟต์แวร์จำนวนมากคาดหวังจากเฟรมเวิร์กฝั่งไคลเอ็นต์แล้ว Next.js ยังมีฟีเจอร์เริ่มต้นในตัวจำนวนหนึ่ง ดังนี้
- การกำหนดเส้นทางด้วยการแยกโค้ดเริ่มต้น
- การคอมไพล์และการรวมกลุ่ม (โดยใช้ Babel และ Webpack)
- การแสดงผลฝั่งเซิร์ฟเวอร์
- กลไกในการดึงข้อมูลที่ระดับแต่ละหน้า
- การจัดรูปแบบที่ครอบคลุม (ด้วย styled-jsx)
Next.js เพิ่มประสิทธิภาพสำหรับชุดซอฟต์แวร์ที่เล็กลง และทีม Chrome ได้ช่วยระบุจุดต่างๆ ที่เราอาจช่วยปรับปรุงประสิทธิภาพให้ดียิ่งขึ้นได้ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับโซลูชันแต่ละรายการด้วยการดูคำขอความคิดเห็น (RFC) และดึงคำขอ (PR)
- กลยุทธ์การแบ่งข้อมูลเป็นส่วนย่อยๆ ของ WebP ที่ได้รับการปรับปรุงซึ่งปล่อยแพ็กเกจที่ละเอียดยิ่งขึ้น ซึ่งจะช่วยลดปริมาณของโค้ดที่ซ้ำกันที่ดึงข้อมูลผ่านหลายเส้นทาง (RFC, PR)
- การโหลดที่แตกต่างกันด้วย รูปแบบโมดูล/ไม่มีโมดูล ซึ่งสามารถลดจำนวน JavaScript ในแอป Next.js ลงสูงสุด 20% โดยไม่ต้องเปลี่ยนแปลงโค้ด (RFC, PR)
- การติดตามเมตริกประสิทธิภาพที่ได้รับการปรับปรุงซึ่งใช้ User Timing API (PR)
นอกจากนี้ เรายังสำรวจฟีเจอร์อื่นๆ เพื่อปรับปรุงประสบการณ์การใช้งาน Next.js ทั้งของผู้ใช้และนักพัฒนาซอฟต์แวร์ เช่น
- การเปิดใช้โหมดพร้อมกันเพื่อปลดล็อก Progressive หรือ Hydration บางส่วนขององค์ประกอบ
- ระบบการตรวจสอบแบบ Webpack ที่วิเคราะห์ไฟล์แหล่งที่มาและเนื้อหาที่สร้างขึ้นทั้งหมดเพื่อให้พบข้อผิดพลาดและคำเตือนที่ดียิ่งขึ้น (RFC)
Nuxt.js
Nuxt.js เป็นเว็บเฟรมเวิร์กที่รวม Vue.js กับไลบรารีต่างๆ เพื่อให้ได้การตั้งค่าตามความเห็น โดยมีฟีเจอร์ที่พร้อมใช้งานมากมายเช่นเดียวกับ Next.js ดังนี้
- การกำหนดเส้นทางด้วยการแยกโค้ดเริ่มต้น
- การคอมไพล์และการรวมกลุ่ม (โดยใช้ Babel และ Webpack)
- การแสดงผลฝั่งเซิร์ฟเวอร์
- การดึงข้อมูลแบบอะซิงโครนัสสำหรับทุกหน้า
- พื้นที่เก็บข้อมูลเริ่มต้น (Vuex)
นอกจากการปรับปรุงประสิทธิภาพของเครื่องมือต่างๆ โดยตรงแล้ว เรายังได้ขยายเงินทุนสำหรับเฟรมเวิร์กเพื่อให้การสนับสนุนทางการเงินแก่เฟรมเวิร์กและไลบรารีโอเพนซอร์สเพิ่มเติม ด้วยการสนับสนุนล่าสุดสำหรับ Nuxt.js จะมีการเปิดตัวบางฟีเจอร์ในอนาคตอันใกล้นี้ ซึ่งรวมถึงการแสดงผลเซิร์ฟเวอร์ที่ชาญฉลาดขึ้นและการเพิ่มประสิทธิภาพรูปภาพ
Babel
นอกจากนี้ เรายังมีความคืบหน้าในการปรับปรุงประสิทธิภาพของเครื่องมือสำคัญในเฟรมเวิร์กเกือบทั้งหมดที่กล่าวไว้ ซึ่งได้แก่ Babel
Babel คอมไพล์โค้ดที่มีไวยากรณ์ที่ใหม่กว่าเป็นโค้ดที่เบราว์เซอร์ต่างๆ เข้าใจได้
เป็นเรื่องปกติที่จะใช้ @babel/preset-env เพื่อกำหนดเป้าหมายเบราว์เซอร์ที่ทันสมัยซึ่งสามารถระบุเป้าหมายของเบราว์เซอร์ที่แตกต่างกันเพื่อให้มี Polyfill ที่เพียงพอสำหรับสภาพแวดล้อมที่เลือกทั้งหมด วิธีหนึ่งในการระบุเป้าหมายคือการใช้ <script
type="module"> เพื่อกำหนดเป้าหมายเบราว์เซอร์ทั้งหมดที่รองรับโมดูล ES
เราได้เปิดตัวค่าที่กำหนดล่วงหน้าใหม่อย่าง @babel/preset-modules เพื่อเพิ่มประสิทธิภาพให้กับเคสนี้ แทนที่จะแปลงไวยากรณ์สมัยใหม่เป็นไวยากรณ์เก่าเพื่อหลีกเลี่ยงข้อบกพร่องของเบราว์เซอร์ preset-modules จะแก้ไขข้อบกพร่องเฉพาะแต่ละรายการด้วยการเปลี่ยนรูปแบบไปใช้ไวยากรณ์สมัยใหม่ที่ไม่สมบูรณ์ให้ใกล้เคียงที่สุด ซึ่งทำให้เกิดเป็นโค้ดที่ทันสมัยที่ส่งไปยังเบราว์เซอร์ส่วนใหญ่แบบแทบจะไม่มีการเปลี่ยนแปลง
นักพัฒนาแอปที่ใช้ preset-env อยู่แล้วจะได้รับประโยชน์จากการเพิ่มประสิทธิภาพเหล่านี้โดยไม่ต้องดำเนินการใดๆ เนื่องจากจะผสานรวมเข้ากับ preset-env ในเร็วๆ นี้
ขั้นตอนถัดไปคือ
การทำงานอย่างใกล้ชิดกับเฟรมเวิร์กโอเพนซอร์สและไลบรารีเพื่อมอบประสบการณ์การใช้งานที่ดียิ่งขึ้นช่วยให้ทีม Chrome ตระหนักได้ว่าอะไรคือสิ่งที่สำคัญโดยพื้นฐานสำหรับผู้ใช้และนักพัฒนาซอฟต์แวร์
หากคุณใช้งานเว็บเฟรมเวิร์ก, ไลบรารี UI หรือเครื่องมือบนเว็บรูปแบบต่างๆ (แพ็กเกจ คอมไพเลอร์ โปรแกรมวิเคราะห์เว็บ) โปรดสมัครรับเงินโบนัสเฟรมเวิร์ก