แสดงโค้ดที่ทันสมัยในเบราว์เซอร์รุ่นใหม่เพื่อให้โหลดหน้าเว็บได้เร็วขึ้น

Houssein Djirdeh

การสร้างเว็บไซต์ที่ทำงานได้ดีในเบราว์เซอร์หลักๆ ทั้งหมดถือเป็นหลักการสำคัญของ ระบบนิเวศเว็บแบบเปิด แต่นั่นหมายความถึงงานเพิ่มเติมเพื่อให้มั่นใจว่า โค้ดที่คุณเขียนรองรับในแต่ละเบราว์เซอร์ที่คุณวางแผนจะกำหนดเป้าหมาย หากคุณ หากต้องการใช้ฟีเจอร์ภาษา JavaScript ใหม่ คุณจะต้องเปลี่ยนรูปแบบ เข้ากับรูปแบบที่เข้ากันได้แบบย้อนหลังสำหรับเบราว์เซอร์ที่ยังไม่รองรับ ให้พวกเขา

Babel เป็นเครื่องมือที่ใช้กันอย่างแพร่หลายที่สุดในการคอมไพล์โค้ด ที่มีไวยากรณ์ใหม่เป็นโค้ดซึ่งเบราว์เซอร์และสภาพแวดล้อมต่างๆ (เช่น โหนด) ที่เข้าใจได้ คู่มือนี้จะถือว่าคุณกำลังใช้ Babel ดังนั้น คุณจึง ต้องปฏิบัติตามวิธีการตั้งค่าเพื่อ ให้รวมข้อมูลดังกล่าวลงในแอปพลิเคชันด้วย หากยังไม่ได้ทำ เลือกwebpack ใน Build Systems หากคุณใช้ Webpack เป็น Bundler ของโมดูลในแอป

หากต้องการใช้ Babel เพื่อถ่ายโอนเฉพาะ สิ่งที่จำเป็นสำหรับผู้ใช้ของคุณ คุณ ต้อง:

1. ระบุเบราว์เซอร์ที่คุณต้องการกำหนดเป้าหมาย
2. ใช้ @babel/preset-env กับเป้าหมายเบราว์เซอร์ที่เหมาะสม
3. ใช้ <script type="module"> เพื่อหยุดส่งรหัสที่แปลงแล้วไปยังเบราว์เซอร์ที่ไม่ต้องการ

ระบุเบราว์เซอร์ที่คุณต้องการกำหนดเป้าหมาย

ก่อนที่คุณจะเริ่มปรับเปลี่ยนวิธีแปลงโค้ดในแอปพลิเคชันของคุณ คุณ ต้องระบุว่าเบราว์เซอร์ใดที่เข้าถึงแอปพลิเคชันของคุณ วิเคราะห์เบราว์เซอร์ ผู้ใช้ของคุณกำลังใช้อยู่ รวมถึงรายการที่คุณวางแผนจะกำหนดเป้าหมายในการสร้าง ข้อมูลประกอบการตัดสินใจ

ใช้ @babel/preset-env

การแปลงโค้ดมักจะทำให้ไฟล์มีขนาดใหญ่กว่า รูปแบบเดิม ด้วยการลดปริมาณ วิดีโอรวมคลิปที่คุณทำ ลดขนาดของแพ็กเกจเพื่อปรับปรุงประสิทธิภาพของหน้าเว็บได้

แทนที่จะรวมปลั๊กอินบางอย่างเพื่อเลือกคอมไพล์บางภาษา คุณลักษณะที่คุณกำลังใช้งาน Babel มีค่าที่กำหนดล่วงหน้าจำนวนหนึ่งที่รวมปลั๊กอินต่างๆ ใช้ @babel/preset-env เพื่อรวมเฉพาะการแปลงและโพลีฟิลล์ที่จำเป็นสำหรับเบราว์เซอร์ที่คุณวางแผนไว้ การกำหนดเป้าหมาย

รวม @babel/preset-env ภายในอาร์เรย์ presets ใน Babel ไฟล์การกำหนดค่า .babelrc:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

ใช้ช่อง targets เพื่อระบุเวอร์ชันของเบราว์เซอร์ที่ต้องการรวมไว้ โดยเพิ่มข้อความค้นหาที่เหมาะสมลงในฟิลด์ browsers @babel/preset-env ผสานรวมกับรายการเบราว์เซอร์ ซึ่งเป็นการกำหนดค่าโอเพนซอร์สที่ใช้ร่วมกันระหว่าง เครื่องมือสำหรับการกำหนดเป้าหมายเบราว์เซอร์ รายการคำค้นหาทั้งหมดที่เข้ากันได้จะอยู่ใน เอกสารประกอบเกี่ยวกับรายการเบราว์เซอร์ อีกตัวเลือกหนึ่งคือการใช้ไฟล์ .browserslistrc เพื่อแสดงรายการสภาพแวดล้อม ที่ต้องการกำหนดเป้าหมาย

ค่า ">0.25%" จะบอกให้ Babel รวมเฉพาะการเปลี่ยนรูปแบบ จำเป็นต้องรองรับเบราว์เซอร์คิดเป็นมากกว่า 0.25% ของ การดำเนินการนี้ช่วยให้มั่นใจได้ว่าไฟล์ของคุณไม่มีการถ่ายโอนโดยไม่จำเป็น สำหรับเบราว์เซอร์ที่มีผู้ใช้งานจำนวนน้อยมาก

ในกรณีส่วนใหญ่ วิธีนี้เป็นวิธีที่ดีกว่าการใช้ การกำหนดค่า:

  "targets": "last 2 versions"

ค่า "last 2 versions" จะแปลงโค้ดสำหรับฟิลด์ สองเวอร์ชันล่าสุดของเบราว์เซอร์ทุกเบราว์เซอร์ ซึ่งหมายความว่ามีการสนับสนุนสำหรับเบราว์เซอร์ที่ปิดให้บริการแล้ว เช่น Internet Explorer ซึ่งอาจเพิ่มขนาดของแพ็กเกจโดยไม่จำเป็นหากคุณคาดว่า เบราว์เซอร์ที่จะใช้เข้าถึงแอปพลิเคชันของคุณ

สุดท้าย คุณควรเลือกชุดค่าผสมของข้อความค้นหาที่เหมาะสม กำหนดเป้าหมายเบราว์เซอร์ที่ตรงกับความต้องการของคุณ

เปิดใช้การแก้ไขข้อบกพร่องสมัยใหม่

@babel/preset-env จัดกลุ่มฟีเจอร์ไวยากรณ์ JavaScript หลายรายการเป็นคอลเล็กชันและเปิด/ปิดใช้ ตามเบราว์เซอร์เป้าหมายที่ระบุ แม้ว่าวิธีนี้จะได้ผลดี แต่คอลเล็กชันของ ฟีเจอร์ไวยากรณ์จะเปลี่ยนรูปแบบเมื่อเบราว์เซอร์เป้าหมายมีข้อบกพร่องที่มีเพียงฟีเจอร์เดียว ซึ่งมักจะทำให้มีการเปลี่ยนรูปแบบของโค้ดเกินกว่าที่จำเป็น

เดิมทีการพัฒนาเป็นค่าที่กำหนดล่วงหน้าแยกต่างหาก ตัวเลือกแก้ไขข้อบกพร่องใน @babel/preset-env แก้ไขปัญหานี้โดยการแปลงไวยากรณ์สมัยใหม่ที่เสียหายในบางเบราว์เซอร์ให้ใกล้เคียงที่สุด ไวยากรณ์ที่เทียบเท่าซึ่งไม่เสียหายในเบราว์เซอร์เหล่านั้น ผลที่ได้คือโค้ดสมัยใหม่เกือบเหมือนกัน ด้วยการปรับเปลี่ยนไวยากรณ์เล็กน้อย เพื่อรับประกันความสามารถในการใช้งานร่วมกันในเบราว์เซอร์เป้าหมายทั้งหมด เพื่อใช้งาน โปรดตรวจสอบว่าคุณได้ติดตั้ง @babel/preset-env เวอร์ชัน 7.10 ขึ้นไปแล้ว จากนั้นตั้งค่า พร็อพเพอร์ตี้ bugfixes ไปยัง true:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

ใน Babel 8 ตัวเลือก bugfixes จะเปิดใช้โดยค่าเริ่มต้น

ใช้ <script type="module">

โมดูล JavaScript หรือโมดูล ES เป็นฟีเจอร์ใหม่ที่ได้รับการสนับสนุนใน เบราว์เซอร์หลักๆ ทั้งหมด คุณสามารถใช้โมดูล เพื่อสร้างสคริปต์ที่สามารถนำเข้าและส่งออกจากโมดูลอื่นๆ แต่คุณสามารถ ให้ใช้การกำหนดค่าดังกล่าวกับ @babel/preset-env เพื่อกำหนดเป้าหมายเฉพาะเบราว์เซอร์ที่รองรับ ให้พวกเขา

แทนที่จะค้นหาเวอร์ชันของเบราว์เซอร์หรือส่วนแบ่งการตลาดที่เจาะจง ให้พิจารณา ระบุ "esmodules" : true ภายในฟิลด์ targets ของไฟล์ .babelrc

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

ระบบรองรับฟีเจอร์ใหม่ๆ มากมายของ ECMAScript ที่คอมไพล์ด้วย Babel อยู่แล้ว ในสภาพแวดล้อมที่รองรับโมดูล JavaScript ดังนั้น ในการดำเนินการนี้ คุณ ลดความซับซ้อนของขั้นตอนเพื่อตรวจสอบว่ามีการใช้เฉพาะโค้ดที่เปลี่ยนรูปแบบแล้ว สำหรับเบราว์เซอร์ที่ต้องการใช้จริงๆ

เบราว์เซอร์ที่รองรับโมดูลจะไม่สนใจสคริปต์ที่มีแอตทริบิวต์ nomodule ในทางกลับกัน เบราว์เซอร์ที่ไม่สนับสนุนโมดูลจะไม่สนใจองค์ประกอบของสคริปต์ที่มี type="module" ซึ่งหมายความว่าคุณสามารถรวมโมดูล และ วิดีโอสำรองที่คอมไพล์ แล้วได้

ตามหลักการแล้ว สคริปต์สองเวอร์ชันของแอปพลิเคชันจะรวมไว้ดังนี้

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

เบราว์เซอร์ที่รองรับโมดูลจะดึงข้อมูลและเรียกใช้ main.mjs และละเว้น compiled.js เบราว์เซอร์ที่ไม่รองรับโมดูลจะทำหน้าที่ตรงกันข้าม

หากใช้ Webpack คุณก็สามารถตั้งเป้าหมายที่แตกต่างกันในการกำหนดค่าสำหรับ เวอร์ชันแยกของแอปพลิเคชันของคุณ

• เวอร์ชันสำหรับเบราว์เซอร์ที่รองรับโมดูลเท่านั้น
• เวอร์ชันที่มีสคริปต์ที่คอมไพล์ซึ่งทำงานได้ในเบราว์เซอร์เดิมทุกชนิด ไฟล์มีขนาดไฟล์ใหญ่กว่า เนื่องจากการเปลี่ยนรูปแบบต้องรองรับเบราว์เซอร์ที่หลากหลายมากขึ้น

ขอขอบคุณ Connor Clark และ Jason Miller สำหรับรีวิว