หน้านี้ได้รับการแปลโดย Cloud Translation API

เพิ่มความเร็วในการไปยังส่วนต่างๆ ใน React ด้วย 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-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

จากนั้น คอมโพเนนต์ลำดับสูงกว่า (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 ทราบว่าควรดึงข้อมูลเส้นทางเหล่านี้ล่วงหน้าเมื่อเข้ามายังมุมมอง

นำเข้า HOC ของ quicklink ที่จุดเริ่มต้นของคอมโพเนนต์
ตัดแต่ละเส้นทางด้วย HOC ของ withQuicklink() เพื่อส่งคอมโพเนนต์ของหน้าเว็บและพารามิเตอร์ตัวเลือกไปยังเส้นทางดังกล่าว

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 เพื่อสร้างแผนที่เส้นทางและกลุ่มต่างๆ เพื่อกำหนดว่าจะดึงข้อมูลไฟล์ใดล่วงหน้าเมื่อลิงก์แสดงในมุมมอง การใช้เทคนิคนี้ทั่วทั้งเว็บไซต์จะช่วยปรับปรุงการนำทางไปถึงจุดที่จะปรากฏทันทีได้เป็นอย่างมาก