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

كيفية التحميل البطيء للوحدات النمطية في تطبيق 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


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