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