ทั้งหมดที่คุณต้องรู้เกี่ยวกับการแยกรหัส JavaScript

ไซต์สมัยใหม่มักจะรวมจาวาสคริปต์ทั้งหมดของพวกเขาเข้าสู่ขนาดใหญ่ main.js สคริปต์ สิ่งนี้มีสคริปต์สำหรับทุกหน้าหรือเส้นทางของคุณแม้ว่าผู้ใช้จะต้องมีส่วนเล็ก ๆ เพียงเล็กน้อยสำหรับหน้าเว็บที่กำลังดูอยู่

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

• วิธีการโค้ดได้เร็วขึ้นจาวาสคริปต์ที่เบากว่า

การแยกรหัสมีปัญหาอะไร

เมื่อเว็บเบราว์เซอร์เห็น & lt; สคริปต์ & gt; มันต้องใช้เวลาในการดาวน์โหลดและประมวลผล JavaScript ที่คุณอ้างอิง สิ่งนี้สามารถรู้สึกได้อย่างรวดเร็วบนอุปกรณ์ระดับไฮเอนด์ แต่การโหลดการแยกวิเคราะห์และการดำเนินการรหัส JavaScript ที่ไม่ได้ใช้อาจใช้เวลาสักครู่ในอุปกรณ์มือถือโดยเฉลี่ยที่มีเครือข่ายที่ช้ากว่าและ CPU ที่ช้าลง หากคุณเคยต้องเข้าสู่ร้านกาแฟหรือ WiFi Hotel คุณรู้ว่าประสบการณ์เครือข่ายช้าสามารถเกิดขึ้นได้กับทุกคน

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

ฉันต้องรำคาญกับการแยกโค้ดหรือไม่?

มันคุ้มค่าที่จะถามตัวเองว่าคุณต้องการรหัสแยก (ถ้าคุณใช้ง่าย สร้างเว็บไซต์ คุณอาจไม่) หากไซต์ของคุณต้องการ JavaScript สำหรับเนื้อหาแบบโต้ตอบ (สำหรับคุณสมบัติเช่นลิ้นชักเมนูและ Carousels) หรือเป็นแอปพลิเคชั่นหน้าเดียวที่ต้องใช้ JavaScript Frameworks เพื่อแสดง UI คำตอบน่าจะเป็น 'ใช่' ไม่ว่าจะมีการแยกรหัสที่คุ้มค่าสำหรับไซต์ของคุณเป็นคำถามที่คุณต้องตอบรับตัวเอง คุณเข้าใจสถาปัตยกรรมของคุณและวิธีการโหลดไซต์ของคุณดีที่สุด โชคดีที่มีเครื่องมือที่มีอยู่เพื่อช่วยคุณที่นี่ จำไว้ว่าหากคุณใช้การเปลี่ยนแปลงในระบบการออกแบบของคุณให้บันทึกการเปลี่ยนแปลงเหล่านั้นในการแชร์ของคุณ การจัดเก็บเมฆ ดังนั้นทีมของคุณสามารถดู

ขอความช่วยเหลือ

สำหรับการแยกรหัส JavaScript เหล่านั้น ประภาคาร - แผงตรวจสอบใน Chrome Developer Tools - สามารถช่วยส่องแสงได้ว่านี่เป็นปัญหาสำหรับเว็บไซต์ของคุณหรือไม่ การตรวจสอบที่คุณต้องการค้นหาคือลดเวลาดำเนินการ JavaScript (เอกสาร ที่นี่ . การตรวจสอบนี้เน้นสคริปต์ทั้งหมดในหน้าของคุณที่สามารถชะลอผู้ใช้ที่มีปฏิสัมพันธ์กับมัน

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

รหัสครอบคลุมในเครื่องมือนักพัฒนาโครเมี่ยม

หากดูเหมือนว่าคุณมีสคริปต์ราคาแพงที่สามารถแยกได้ดีกว่าเครื่องมือถัดไปที่จะดูคือคุณสมบัติการครอบคลุมโค้ดในเครื่องมือนักพัฒนาโครเมี่ยม (DevTools & GT; เมนูด้านบนขวา & GT; เครื่องมือ & GT เพิ่มเติม; ครอบคลุม) มาตรการนี้มีการใช้ JavaScript (และ CSS) ที่ไม่ได้ใช้เท่าใดในหน้าของคุณ สำหรับแต่ละสคริปต์สรุป DevTools จะแสดง 'ไบต์ที่ไม่ได้ใช้' นี่คือรหัสที่คุณสามารถพิจารณาแยกออกและโหลดขี้เกียจเมื่อผู้ใช้ต้องการ

การแยกรหัสชนิดต่าง ๆ

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

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

การแยกรหัสผู้ขาย: กรอบและห้องสมุดที่คุณพึ่งพา (E.G. ตอบสนองเชิงมุม Vue หรือ Lodash) ไม่น่าจะเปลี่ยนในสคริปต์ที่คุณส่งไปยังผู้ใช้ของคุณซึ่งมักเป็น 'ตรรกะ' สำหรับเว็บไซต์ของคุณ เพื่อลดผลกระทบเชิงลบของการลบแคชสำหรับผู้ใช้ที่ส่งคืนไปยังไซต์ของคุณคุณสามารถแยก 'ผู้ขาย' ของคุณเป็นสคริปต์แยกต่างหาก

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

สำหรับวัตถุประสงค์ของเราในบทความนี้เราจะมุ่งเน้นไปที่การแยกรหัสแบบไดนามิก

รับมือกับการแยกรหัส

มาปรับประสิทธิภาพจาวาสคริปต์ของ A เพิ่มประสิทธิภาพ แอปพลิเคชั่นที่เรียบง่ายที่เรียงลำดับสามตัวเลข ผ่านการแยกโค้ด - นี่คือแอปโดยเพื่อนร่วมงานของฉัน HousseIn Djirdeh เวิร์กโฟลว์เราจะใช้การโหลด JavaScript ของเราอย่างรวดเร็วคือการวัดเพิ่มประสิทธิภาพและตรวจสอบ เริ่มที่นี่ .

ประสิทธิภาพการวัด

ก่อนที่จะพยายามเพิ่มการเพิ่มประสิทธิภาพใด ๆ เราจะวัดประสิทธิภาพการทำงานของ JavaScript ของเราก่อน เนื่องจากแอป Magic Sorter เป็นเจ้าภาพใน Glitch เราจะใช้สภาพแวดล้อมการเข้ารหัส นี่คือวิธีการไปเกี่ยวกับมัน:

• คลิกปุ่มแสดงสด
• เปิด DevTools โดยกด CMD + OPTION + I / CTRL + SHIFT + I
• เลือกแผงเครือข่าย
• ตรวจสอบให้แน่ใจว่ามีการตรวจสอบแคชและโหลดแอปใหม่

แอปพลิเคชั่นที่เรียบง่ายนี้ดูเหมือนจะใช้ JavaScript 71.2 KB เพียงเพื่อเรียงลำดับผ่านตัวเลขสองสามรายการ แน่นอนว่าดูเหมือนจะไม่ถูกต้อง ในแหล่งที่มาของเรา SRC / index.js ห้องสมุด Lodash Utility นำเข้าและเราใช้ ไส้กรอก - หนึ่งในโปรแกรมอรรถประโยชน์การเรียงลำดับ - เพื่อเรียงลำดับหมายเลขของเรา Lodash มีฟังก์ชั่นที่มีประโยชน์หลายอย่าง แต่แอปใช้วิธีเดียวจากมันเท่านั้น มันเป็นข้อผิดพลาดทั่วไปในการติดตั้งและนำเข้าการพึ่งพาของบุคคลที่สามทั้งหมดเมื่ออยู่ในความเป็นจริงที่แท้จริงคุณเพียงแค่ใช้ส่วนเล็ก ๆ ของมัน

เพิ่มประสิทธิภาพบันเดิลของคุณ

มีตัวเลือกบางอย่างสำหรับการตัดขนาด JavaScript Bundle ของเรา:

1. เขียนวิธีการเรียงลำดับที่กำหนดเองแทนการพึ่งพาห้องสมุดส่วนที่สอง
2. ใช้ array.prototype.sort () ซึ่งสร้างขึ้นในเบราว์เซอร์
3. นำเข้าเท่านั้น ไส้กรอก วิธีการจาก Lodash แทนห้องสมุดทั้งหมด
4. ดาวน์โหลดรหัสสำหรับการเรียงลำดับเมื่อผู้ใช้ต้องการ (เมื่อพวกเขาคลิกปุ่ม)

ตัวเลือกที่ 1 และ 2 มีความเหมาะสมสำหรับการลดขนาดบันเดิลของเรา - สิ่งเหล่านี้อาจสมเหตุสมผลสำหรับการใช้งานจริง เพื่อวัตถุประสงค์ในการสอนเราจะลองสิ่งที่แตกต่างกัน ตัวเลือก 3 และ 4 ช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชัน

นำเข้ารหัสที่คุณต้องการเท่านั้น

เราจะแก้ไขไฟล์สองสามไฟล์เพื่อนำเข้าเดียวเท่านั้น ไส้กรอก วิธีที่เราต้องการจาก Lodash เริ่มต้นด้วยการแทนที่ของเรา ไลอาจ การพึ่งพา แพคเกจ json :

"lodash": "^4.7.0",

ด้วยสิ่งนี้:

"lodash.sortby": "^4.7.0",

ใน SRC / index.js เราจะนำเข้าโมดูลเฉพาะเพิ่มเติมนี้:

 JS
นำเข้า "./style.css";
นำเข้า _ จาก "Lodash";
นำเข้า Sortby จาก "Lodash.Sortby"; 

ต่อไปเราจะอัปเดตว่าค่าที่เรียงลำดับ:

 JS
form.addeventlistener ("ส่ง", e = & gt; {
  e.preventDefault ();
  ค่า const = [input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  const sortedvalues ​​= _.sortby (ค่า);
  const sortedvalues ​​= sortby (ค่า);
  ผลลัพธ์.innerhtml = `
    & lt; h2 & gt;
      $ {sortedvalues}
    & lt; / h2 & gt;
  `
}); 

โหลดแอป Magic Numbers ใหม่ให้เปิดเครื่องมือนักพัฒนาและดูที่แผงเครือข่ายอีกครั้ง สำหรับแอปเฉพาะนี้ขนาดมัดของเราลดลงจากระดับสี่ที่มีงานเล็ก ๆ น้อย ๆ แต่ยังมีห้องพักมากสำหรับการปรับปรุง

การแยกรหัส JavaScript

Webpack เป็นหนึ่งใน Bundlers โมดูล JavaScript ที่ได้รับความนิยมมากที่สุดที่ใช้โดยนักพัฒนาเว็บในปัจจุบัน มัน 'รวมกลุ่ม' (รวม) โมดูล JavaScript ทั้งหมดของคุณและสินทรัพย์อื่น ๆ ในเว็บเบราว์เซอร์แบบคงที่สามารถอ่านได้

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

• หนึ่งรับผิดชอบรหัสการทำเส้นทางเริ่มต้น
• อีกอันหนึ่งมีรหัสการเรียงลำดับของเรา

ใช้การนำเข้าแบบไดนามิก (กับ นำเข้า () คำหลัก) สคริปต์ที่สองสามารถโหลดขี้เกียจตามความต้องการ ในแอป Magic Numbers ของเรารหัสการทำสคริปต์สามารถโหลดได้ตามต้องการเมื่อผู้ใช้คลิกปุ่ม เราเริ่มต้นด้วยการลบการนำเข้าระดับบนสุดสำหรับวิธีการเรียงลำดับใน SRC / index.js :

 นำเข้า sortby จาก "lodash.sortsby"; 

นำเข้าภายในผู้ฟังเหตุการณ์ที่ยิงเมื่อคลิกปุ่ม:

form.addeventlistener ("ส่ง", e = & gt; {
  e.preventDefault ();
  นำเข้า ('lodash.sortsby')
    . จากนั้น (โมดูล = & gt; module.default)
    . จากนั้น (sortinput ())
    . catch (ERR = & GT; {Alert (ERR)});
});

แบบไดนามิกนี้ นำเข้า () คุณลักษณะที่เราใช้เป็นส่วนหนึ่งของข้อเสนอ StandardStrack สำหรับการรวมถึงความสามารถในการนำเข้าโมดูลในมาตรฐานภาษา JavaScript แบบไดนามิก Webpack รองรับไวยากรณ์นี้แล้ว คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีการนำเข้าแบบไดนามิกทำงานอย่างไร ในบทความนี้ .

ที่ นำเข้า () คำสั่งส่งคืนสัญญาเมื่อมันแก้ไข Webpack คิดว่านี่เป็นจุดแยกที่จะแยกออกเป็นสคริปต์แยกต่างหาก (หรือก้อน) เมื่อโมดูลถูกส่งคืนแล้ว module.default ใช้เพื่ออ้างอิงการส่งออกเริ่มต้นที่จัดทำโดย ไลอาจ . สัญญาถูกล่ามโซ่กับอีก . จากนั้น () การโทร การแยกประเภท วิธีการเรียงลำดับค่าอินพุตสามค่า ในตอนท้ายของห่วงโซ่สัญญา .จับ() ถูกเรียกให้จัดการที่สัญญาถูกปฏิเสธเนื่องจากข้อผิดพลาด

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

ในกรณีที่คุณเห็นข้อผิดพลาดที่ยื่นออกมาเช่น "ข้อผิดพลาดการแยกวิเคราะห์: การนำเข้าและส่งออกอาจปรากฏขึ้นที่ระดับบนสุดเท่านั้น" รู้ว่านี่เป็นเพราะไวยากรณ์นำเข้าแบบไดนามิกยังไม่ได้รับการสรุป แม้ว่า Webpack รองรับการตั้งค่าสำหรับ ESLINT (เครื่องมือ Linting JavaScript) ที่ใช้โดย Glitch ยังไม่ได้รับการอัพเดตเพื่อรวมไวยากรณ์นี้ แต่ยังทำงานอยู่

สิ่งสุดท้ายที่เราต้องทำคือเขียน การแยกประเภท วิธีการที่ส่วนท้ายของไฟล์ของเรา นี่จะต้องเป็นฟังก์ชั่นที่ส่งคืนฟังก์ชั่นที่ใช้ในวิธีการนำเข้าจาก lodash.sortsby . ฟังก์ชั่นที่ซ้อนกันสามารถเรียงลำดับค่าอินพุตทั้งสามและอัปเดต DOM:

 const sortinput = () = & gt; {
  ส่งคืน (sortby) = & gt; {
    ค่า const = [
      input1.valueasnumber,
      input2.valueasnumber
      input3.valueasnumber
    ];
    const sortedvalues ​​= sortby (ค่า);
    ผลลัพธ์.innerhtml = `
      & lt; h2 & gt;
        $ {sortedvalues}
      & lt; / h2 & gt;
    `
  };
} 

ตรวจสอบตัวเลข

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

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

lazy โหลดด้วยห้องสมุด JavaScript หรือกรอบงาน

Frameworks ที่ได้รับความนิยมจำนวนมากสนับสนุนการเพิ่มรหัสแยกและโหลดขี้เกียจโดยใช้การนำเข้าและ Webpack แบบไดนามิก

นี่คือวิธีที่คุณอาจใช้ส่วนประกอบ 'คำอธิบาย' ของภาพยนตร์ที่ใช้ทำปฏิกิริยา (ด้วย React.lazy () และคุณสมบัติที่น่าสงสัยของพวกเขา) เพื่อให้ "กำลังโหลด ... " ทางเลือกในขณะที่ส่วนประกอบกำลังขี้เกียจโหลดใน (ดู ที่นี่ สำหรับรายละเอียดเพิ่มเติมบางอย่าง):

 นำเข้าตอบสนอง {Suspense} จาก 'ตอบโต้';
คำอธิบาย const = react.lazy ((() = & gt; นำเข้า ('./ คำอธิบาย');
ฟังก์ชั่นแอป () {
  กลับมา (
    & lt; div & gt;
      & lt; h1 & gt; ภาพยนตร์ของฉัน & lt; / h1 & gt;
      & lt; Suspense Fallback = "กำลังโหลด ... " & GT;
        & lt; คำอธิบาย / & gt;
      & lt; / ใจจดใจจ่อ & gt;
    & lt; / div & gt;
  );
} 

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 317 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 317 ที่นี่ หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

• 9 ของกรอบ JavaScript ที่ดีที่สุด
• 15 เครื่องมือ JavaScript ที่จำเป็นที่คุณควรใช้
• 14 ของ apis JavaScript ที่ดีที่สุด