وحدات التحميل الكسولة في Next.js

تعد القدرة على تحليل الحزمة بصريًا أمرًا رائعًا لأنه يمكننا تحسين تطبيقنا بسهولة بالغة.

لنفترض أننا بحاجة إلى تحميل مكتبة Moment في منشورات المدونة الخاصة بنا. يركض:

npm install moment

لإدراجه في المشروع.

الآن دعنا نحاكي حقيقة أننا نحتاجها في طريقين مختلفين:/blogو/blog/[id].

نقوم باستيراده بتنسيقpages/blog/[id].js:

import moment from 'moment'
…
const Post = props => {
return (
<div>
<h1>{props.post.title}</h1>
<p>Published on {moment().format(‘dddd D MMMM YYYY’)}</p>
<p>{props.post.content}</p>
</div>
)
}

أنا فقط أضيف تاريخ اليوم ، كمثال.

سيشمل ذلك Moment.js في حزمة صفحة منشور المدونة ، كما ترى من خلال التشغيلnpm run analyze:

نرى أن لدينا الآن إدخال أحمر في/blog/[id]، المسار الذي أضفنا إليه Moment.js!

لقد انتقلت من ~ 1 كيلوبايت إلى 350 كيلوبايت ، وهي صفقة كبيرة جدًا. وذلك لأن مكتبة Moment.js نفسها تبلغ 349 كيلوبايت.

يوضح تصور حزم العميل الآن أن الحزمة الأكبر هي الصفحة الأولى ، والتي كانت من قبل قليلة جدًا. و 99٪ من كودها هو Moment.js.

في كل مرة نقوم فيها بتحميل منشور مدونة ، سننقل كل هذا الرمز إلى العميل. وهي ليست مثالية.

قد يكون أحد الحلول هو البحث عن مكتبة ذات حجم أصغر ، لأن Moment.js غير معروف بكونه خفيف الوزن (خاصة خارج الصندوق مع تضمين جميع اللغات) ، ولكن دعنا نفترض من أجل المثال الذي يجب أن نستخدمه هو - هي.

ما يمكننا فعله بدلاً من ذلك هو فصل كل كود اللحظة في ملفحزمة منفصلة.

كيف؟ بدلاً من استيراد اللحظة على مستوى المكون ، نقوم بإجراء استيراد غير متزامن بالداخلgetInitialProps، ونحسب القيمة لإرسالها إلى المكون. تذكر أنه لا يمكننا إرجاع كائنات معقدة داخلgetInitialProps()تم إرجاع كائن ، لذلك نحسب التاريخ بداخله:

import posts from '../../posts.json'
const Post = props => {
return (
<div>
<h1>{props.post.title}</h1>
<p>Published on {props.date}</p>
<p>{props.post.content}</p>
</div>
)
}
Post.getInitialProps = async ({ query }) => {
const moment = (await import(‘moment’)).default()
return {
date: moment.format(‘dddd D MMMM YYYY’),
post: posts[query.id]
}
}
export default Post

انظر الى تلك المكالمة الخاصة.default()بعد، بعدماawait import؟ من الضروري الإشارة إلى التصدير الافتراضي في استيراد ديناميكي (راجعhttps://v8.dev/features/dynamic-import)

الآن إذا ركضناnpm run analyzeمرة أخرى ، يمكننا رؤية هذا:

ملكنا/blog/[id]الحزمة مرة أخرى صغيرة جدًا ، حيث تم نقل Moment إلى ملف الحزمة الخاص بها ، وتحميله بشكل منفصل بواسطة المتصفح.

المزيد من البرامج التعليمية التالية:

• الابتداء مع Next.js
• Next.js vs Gatsby vs create-response-app
• كيفية تثبيت Next.js
• ربط صفحتين في Next.js باستخدام Link
• محتوى ديناميكي في Next.js مع جهاز التوجيه
• قم بتغذية البيانات إلى مكون Next.js باستخدام getInitialProps
• تنميط مكونات Next.js باستخدام CSS
• الجلب المسبق للمحتوى في Next.js
• استخدام جهاز التوجيه لاكتشاف الارتباط النشط في Next.js
• اعرض المصدر لتأكيد عمل SSR في Next.js
• Next.js: ملء علامة الرأس بالعلامات المخصصة
• نشر تطبيق Next.js على الآن
• Next.js: قم بتشغيل التعليمات البرمجية فقط على جانب الخادم أو جانب العميل في Next.js
• نشر تطبيق Next.js في الإنتاج
• كيفية تحليل حزم تطبيقات Next.js
• وحدات التحميل الكسولة في Next.js
• إضافة مكون غلاف إلى تطبيق Next.js الخاص بك
• الرموز التي أضافها Next.js إلى تطبيقك
• حزم تطبيقات Next.js
• كيفية استخدام جهاز التوجيه Next.js
• كيفية استخدام مسارات Next.js API
• كيفية الحصول على ملفات تعريف الارتباط من جانب الخادم في تطبيق Next.js
• كيفية تغيير منفذ تطبيق Next.js