ลดเพย์โหลด JavaScript ด้วยการแยกโค้ด

Houssein Djirdeh

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

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

วัดระยะทาง

และเช่นเคย คุณต้องวัดว่าเว็บไซต์ทำงานได้ดีเพียงใด และพยายามเพิ่มการเพิ่มประสิทธิภาพ

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บเครือข่าย
4. เลือกช่องทำเครื่องหมายปิดใช้แคช
5. โหลดแอปซ้ำ

JavaScript ขนาด 71.2 KB สำหรับจัดเรียงตัวเลข 2-3 ตัวในแอปพลิเคชันง่ายๆ What gives?

ในซอร์สโค้ด (src/index.js) ระบบจะนำเข้าและใช้ไลบรารี lodash ในแอปพลิเคชันนี้ Lodash มียูทิลิตีที่มีประโยชน์มากมาย แต่จะใช้เมธอดจากแพ็กเกจที่นี่เพียงเมธอดเดียวเท่านั้น การติดตั้งและนำเข้าทรัพยากร Dependency ของบุคคลที่สามทั้งหมด การนำข้อมูลส่วนนี้ไปใช้ เป็นข้อผิดพลาดที่พบได้บ่อย

เพิ่มประสิทธิภาพ

คุณตัดขนาดแพ็กเกจได้ 2-3 วิธี ดังนี้

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

ตัวเลือกที่ 1 และ 2 เป็นวิธีที่เหมาะสมอย่างยิ่งในการลดขนาดแพ็กเกจ (และ น่าจะเหมาะกับการใช้งานจริงมากที่สุด) อย่างไรก็ตาม ทั้ง 3 อย่าง ไม่ได้ใช้ในบทแนะนำนี้เพื่อสอน 😈

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

นำเข้าเฉพาะสิ่งที่คุณต้องการ

ต้องแก้ไข 2-3 ไฟล์เพื่อนำเข้าเมธอดจาก lodash เพียงวิธีเดียวเท่านั้น หากต้องการเริ่มต้นด้วย ให้แทนที่การอ้างอิงนี้ใน package.json:

"lodash": "^4.7.0",

ด้วย

"lodash.sortby": "^4.7.0",

ขณะนี้อยู่ใน src/index.js ให้นำเข้าโมดูลเฉพาะนี้:

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

และอัปเดตวิธีจัดเรียงค่า ดังนี้

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

โหลดแอปพลิเคชันซ้ำ เปิดเครื่องมือสำหรับนักพัฒนาเว็บ แล้วดูที่แผงเครือข่าย อีกครั้ง

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

การแยกโค้ด

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

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

• หนึ่งในนั้นคือโค้ดที่ประกอบขึ้นเป็นเส้นทางเริ่มต้นของเรา
• กลุ่มรองที่มีรหัสการจัดเรียงของเรา

เมื่อใช้การนําเข้าแบบไดนามิก กลุ่มรองสามารถโหลดแบบ Lazy Loading หรือ ที่โหลดแบบออนดีมานด์ ในแอปพลิเคชันนี้ โค้ดที่รวมกันเป็นองค์ประกอบต่างๆ ได้ จะโหลดเฉพาะเมื่อผู้ใช้กดปุ่ม

เริ่มต้นด้วยการนำการนำเข้าระดับบนสุดสำหรับวิธีการจัดเรียงใน src/index.js ออก

import sortBy from "lodash.sortby";

และนำเข้าภายใน Listener เหตุการณ์ที่เริ่มทำงานเมื่อกดปุ่ม ดังนี้

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

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

import() จะส่งคืนคำสัญญา และเมื่อได้รับการแก้ไขแล้ว รายการที่เลือก จะมีโมดูลที่แยกออกเป็นส่วนๆ หลังจากโมดูล ส่งคืนแล้ว module.default ใช้เพื่ออ้างอิงค่าเริ่มต้น การส่งออกให้บริการโดย lodash คำสัญญาถูกเชื่อมโยงกับ .then อื่นซึ่ง เรียกใช้เมธอด sortInput เพื่อจัดเรียงค่าอินพุต 3 ค่า ในตอนท้ายของ ห่วงโซ่สัญญา, .ใช้ catch() เพื่อจัดการกรณีที่สัญญาถูกปฏิเสธ เนื่องจากเกิดข้อผิดพลาด

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

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

ติดตามดู

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

หลังจากกดปุ่มเพื่อจัดเรียงหมายเลขอินพุต กลุ่มที่มี ระบบจะดึงข้อมูลและดำเนินการโค้ดการจัดเรียง

สังเกตที่ตัวเลขยังได้รับการจัดเรียงอยู่!

บทสรุป

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

UI การโหลดแบบ Lazy Loading

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

การโหลดโมดูลโหนดของบุคคลที่สามแบบ Lazy Loading

วิธีนี้ไม่ใช่วิธีที่ดีที่สุดสำหรับการโหลดแบบ Lazy Loading ของทรัพยากร Dependency ของบุคคลที่สามใน และขึ้นอยู่กับสถานที่ที่คุณใช้งาน โดยทั่วไป บุคคลที่สาม ทรัพยากร Dependency จะแบ่งออกเป็นแพ็กเกจ vendor แยกต่างหากที่เก็บแคชได้ตั้งแต่ แต่ก็จะไม่อัปเดตบ่อยนัก อ่านเพิ่มเติมเกี่ยวกับวิธี SplitChunksPlugin ช่วยคุณทำสิ่งนี้

การโหลดแบบ Lazy Loading ด้วยเฟรมเวิร์ก JavaScript

เฟรมเวิร์กและไลบรารียอดนิยมจำนวนมากที่ใช้ Webpack มอบข้อมูลนามธรรมให้แก่ ทำให้การโหลดแบบ Lazy Loading ง่ายกว่าใช้การนำเข้าแบบไดนามิกที่ตำแหน่งกลาง แอปพลิเคชัน

• โมดูลการโหลดแบบ Lazy Loading ด้วย Angular
• การแยกโค้ดด้วย React Router
• การโหลดแบบ Lazy Loading ด้วยเราเตอร์ Vue

แม้ว่าจะมีประโยชน์ในการทำความเข้าใจวิธีการทำงานของการนำเข้าแบบไดนามิก แต่ให้ใช้ เมธอดที่เฟรมเวิร์ก/ไลบรารีของคุณแนะนำให้กับโมดูลเฉพาะแบบ Lazy Loading

การโหลดล่วงหน้าและการดึงข้อมูลล่วงหน้า

หากเป็นไปได้ ให้ใช้ประโยชน์จากคำแนะนำของเบราว์เซอร์ เช่น <link rel="preload"> หรือ <link rel="prefetch"> เพื่อลองโหลดโมดูลที่สำคัญ เร็วขึ้น Webpack รองรับคำแนะนำทั้ง 2 แบบผ่านการใช้ความคิดเห็นมหัศจรรย์ในการนำเข้า ข้อความ ซึ่งจะมีการอธิบายไว้อย่างละเอียดใน คู่มือโหลดส่วนที่สำคัญไว้ล่วงหน้า

การโหลดแบบ Lazy Loading เป็นมากกว่าโค้ด

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