เพิ่มความเร็วในการไปยังส่วนต่างๆ ใน React ด้วย Quicklink

โหลดลิงก์ในวิดเจ็ตแสดงผลล่วงหน้าโดยอัตโนมัติด้วย Quick Link สําหรับแอปพลิเคชันหน้าเว็บเดียวของ React

Addy Osmani
Addy Osmani
X GitHub
Anton Karlovskiy
Demián Renzulli

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

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

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

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

การบรรลุเป้าหมายนี้ถือเป็นความท้าทายหลายประการ:

  • การกำหนดว่าข้อมูลโค้ดส่วนใด (เช่น article.chunk.js) เชื่อมโยงกับเส้นทางหนึ่งๆ (เช่น /article) ก่อนที่จะไปยังเส้นทางนั้นไม่ใช่เรื่องง่าย
  • ระบบไม่สามารถคาดเดาชื่อ URL สุดท้ายของกลุ่มเหล่านี้ได้ เนื่องจากเครื่องมือรวมโมดูลสมัยใหม่มักใช้การแฮชระยะยาวสำหรับการจัดรุ่น (เช่น article.chunk.46e51.js)

คู่มือนี้จะอธิบายวิธีที่ Quicklink แก้ปัญหาเหล่านี้และช่วยให้คุณทำการเตรียมข้อมูลล่วงหน้าในวงกว้างในแอปหน้าเว็บเดียวของ React ได้

ระบุกลุ่มที่เชื่อมโยงกับแต่ละเส้นทาง

คอมโพเนนต์หลักอย่างหนึ่งของ quicklink คือ webpack-route-manifest ซึ่งเป็นปลั๊กอิน webpack ที่ช่วยให้คุณสร้างพจนานุกรม JSON ของเส้นทางและกลุ่ม วิธีนี้จะช่วยให้ไลบรารีทราบว่าแต่ละเส้นทางของแอปพลิเคชันจำเป็นต้องใช้ไฟล์ใด และดึงข้อมูลไฟล์เหล่านั้นไว้ล่วงหน้าเมื่อเส้นทางปรากฏบนหน้าจอ

หลังจากผสานรวมปลั๊กอินกับโปรเจ็กต์แล้ว ระบบจะสร้างไฟล์ Manifest JSON ที่เชื่อมโยงแต่ละเส้นทางกับข้อมูลโค้ดที่เกี่ยวข้อง ดังนี้

{
  '/about': [
    {
      type: 'style',
      href: '/static/css/about.f6fd7d80.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/about.1cdfef3b.chunk.js',
    },
  ],
  '/blog': [
    {
      type: 'style',
      href: '/static/css/blog.85e80e75.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/blog.35421503.chunk.js',
    },
  ],
}

คุณขอไฟล์ Manifest นี้ได้ 2 วิธีดังนี้

  • ตาม URL เช่น https://site_url/rmanifest.json
  • ผ่านออบเจ็กต์หน้าต่างที่ window.__rmanifest

โหลดข้อมูลบางส่วนล่วงหน้าสำหรับเส้นทางในวิวพอร์ต

เมื่อไฟล์ Manifest พร้อมใช้งานแล้ว ขั้นตอนถัดไปคือการติดตั้ง Quicklink โดยการเรียกใช้ npm install quicklink

จากนั้นใช้ Higher Order Component (HOC) withQuicklink() เพื่อระบุว่าควรทำการดึงข้อมูลเส้นทางหนึ่งๆ ล่วงหน้าเมื่อลิงก์ปรากฏในมุมมอง

โค้ดต่อไปนี้เป็นของคอมโพเนนต์ App ของแอป React ที่แสดงผลเมนูด้านบนที่มีลิงก์ 4 รายการ

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={Home} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/blog/:title" component={Article} />
        <Route path="/about" exact component={About} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

วิธีบอก Quicklink ว่าควรโหลดเส้นทางเหล่านี้ล่วงหน้าเมื่อปรากฏในมุมมอง

  1. นําเข้า quicklink HOC ที่จุดเริ่มต้นของคอมโพเนนต์
  2. ปิดท้ายเส้นทางแต่ละรายการด้วย withQuicklink() HOC โดยส่งคอมโพเนนต์หน้าเว็บและพารามิเตอร์ตัวเลือกไปยัง HOC
const options = {
  origins: [],
};
const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={withQuicklink(Home, options)} />
        <Route path="/blog" exact component={withQuicklink(Blog, options)} />
        <Route
          path="/blog/:title"
          component={withQuicklink(Article, options)}
        />
        <Route path="/about" exact component={withQuicklink(About, options)} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

withQuicklink() HOC ใช้เส้นทางของเส้นทางเป็นคีย์ในการรับข้อมูลโค้ดที่เกี่ยวข้องจาก rmanifest.json เบื้องหลังคือเมื่อลิงก์ปรากฏขึ้น ไลบรารีจะแทรกแท็ก <link rel="prefetch"> ในหน้าเว็บสำหรับแต่ละกลุ่มเพื่อให้ระบบสามารถเรียกข้อมูลล่วงหน้าได้ เบราว์เซอร์จะขอทรัพยากรที่ดึงข้อมูลไว้ล่วงหน้าในระดับความสำคัญต่ำสุดและเก็บไว้ในแคช HTTP เป็นเวลา 5 นาที หลังจากนั้นจะใช้กฎ cache-control ของทรัพยากร ด้วยเหตุนี้ เมื่อผู้ใช้คลิกลิงก์และย้ายไปยังเส้นทางที่กำหนด ระบบจะดึงข้อมูลชิ้นส่วนมาจากแคช ซึ่งช่วยประหยัดเวลาในการแสดงภาพเส้นทางดังกล่าวได้อย่างมาก

บทสรุป

การเรียกข้อมูลล่วงหน้าช่วยปรับปรุงเวลาในการโหลดสำหรับการไปยังส่วนต่างๆ ในอนาคตได้อย่างมาก ในแอปหน้าเว็บเดียวของ React คุณสามารถดำเนินการนี้ได้ด้วยการโหลดข้อมูลโค้ดที่เชื่อมโยงกับแต่ละเส้นทางก่อนที่ผู้ใช้จะไปยังหน้านั้น โซลูชันของ Quicklink สำหรับ React SPA ใช้ webpack-route-manifest เพื่อสร้างแผนที่ของเส้นทางและข้อมูลโค้ด เพื่อระบุไฟล์ที่จะโหลดล่วงหน้าเมื่อลิงก์ปรากฏในมุมมอง การใช้เทคนิคนี้ทั่วทั้งเว็บไซต์จะช่วยปรับปรุงการนําทางได้อย่างมากจนทำให้ดูเหมือนว่าหน้าเว็บจะปรากฏขึ้นทันที