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