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

ดึงข้อมูลลิงก์ในวิวพอร์ตล่วงหน้าโดยอัตโนมัติด้วย Quicklink สำหรับแอปพลิเคชันหน้าเว็บเดียวของ React

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

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

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

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

การบรรลุเป้าหมายนี้มีความท้าทายอยู่บ้าง:

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

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

ระบุส่วนที่เกี่ยวข้องกับแต่ละเส้นทาง

หนึ่งในองค์ประกอบหลักของ quicklink คือ webpack-redirect-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

จากนั้นจึงจะใช้คอมโพเนนต์ลำดับสูงกว่า (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. นำเข้า HOC quicklink ที่จุดเริ่มต้นของคอมโพเนนต์
2. ตัดแต่ละเส้นทางด้วย withQuicklink() 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>
);

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

บทสรุป

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