الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

؟ الأداء المتوفر التالي

ترطيب جزئي لـ Next.js مع Preact X.

Explanation: في الربيع ، نقوم بإنشاء مواقع ويب للصحف ونحن ندرك الأداء للغاية .

الصحف هي في الغالب صفحات ثابتة. الآن إذا أردنا إنشاء تطبيق صفحة واحدة ، فسنقوم بإنشاء حزمة ضخمة مع رمز غير ضروري في الغالب.

هذا لا يعني فقط أن المستخدمين ينتظرون تنزيل ملف كبير ، ولكن كما يشير Addy Osmami إلى أن هناك تكلفة كبيرة في الأداء مع تحليل التعليمات البرمجية. كقاعدة غامضة من الإبهام ، يمكننا القول ، كلما زاد حجم حزمةك ، كلما كان أدائك أسوأ.


هذا هو السبب في أننا نهدف إلى خفض حجم الحزمة عن طريق شحن الرمز الذي نحتاجه فعليًا في العميل وترك الباقي إلى جانب الخادم.

ملخص

لا يزال هذا الريبو دليلًا على المفهوم ، سنواصل العمل على هذا وتنفيذ عملنا كحزمتين:

  • pool-attendant-preact مكتبة تنفذ ترطيبًا جزئيًا مع preact x
  • next-super-performance A next.js المكون الإضافي الذي يستخدم حمامات السباحة-المفتاح لتحسين الأداء الجانبي للعميل

علاوة على الترطيب الجزئي ، سنقوم بتنفيذ استراتيجيات التحميل بما في ذلك critical CSS ، critical JS ، lazy loading ، preloading ressources ، وما إلى ذلك كجزء من الأداء الخاطف التالي.

الوثائق

في الوقت الحالي ، لدينا ترطيب جزئي POC لـ next.js وهذا هو ما يعمل. عند إنشاء next.config.js واستخدم المكون الإضافي الخاص بنا مثل ذلك 

 const withSuperPerformance = require ( "next-super-performance" ) ;
module . exports = withSuperPerformance ( ) ;

2 شيء سيحدث:

  • سيتم استبدال React بـ Preact لأنه لا يزيد عن 3 كيلو بايت
  • سيتم تجاهل ملف JavaScript العميل الرئيسي NEXT.JS واستبداله بملف JavaScript في جهاز التحكم الخاص بك

هذا يعني أنه يتعين عليك إنشاء client.js في مجلد جذر التطبيق الخاص بك والذي سيكون بمثابة نقطة دخول لجافا سكريبت التي سيتم إرسالها إلى العميل. نقوم بذلك لنقدم لك التحكم الكامل في ما تريد تنزيله ، والأهم من ذلك ، اختيار استراتيجية التحميل المناسبة لك.

الآن ، يلعب pool-attendant-preact . صادرات صادر عن المجمع-المطبخ 3 واجهات برمجة التطبيقات:

  • withHydration مخصص يتيح لك وضع علامة على مكوناتك للترطيب
  • hydrate وظيفة لترطيب مكونات ملحوظة في العميل
  • HydrationData مكون يكتب الدعائم المسلسل للعميل ، مثل NEXT_DATA

دعونا نوضح هذا بالقدوة. لنفترض أن لديك تطبيقًا التالي header ، وقسم main teaser (قد تكون مجرد صور بنص وعنوان ، على سبيل المثال). من أجل هذا المثال ، دعنا نحاول أن نجعل من المضايقين ديناميكيين 2 و 3 (فقط لاختيار بعض العناصر الموجودة على الصفحة) وترك الراحة ثابتة.

إليكم كيف ستفعل ذلك:

تثبيت الأداء المتوفر التالي 

 npm i next-super-performance --save

قم بإنشاء next.config.js واستخدم المكون الإضافي 

 const withSuperPerformance = require ( "next-super-performance" ) ;
module . exports = withSuperPerformance ( ) ;

react بتعديل package.json preact بك. 

  "scripts" : {
    "dev" : "next:performance dev" ,
    "start" : "next:performance start" ,
    "build" : "next:performance build"
  } ,

إنشاء pages/index.js 

 import Header from "../components/header" ;
import Main from "../components/main" ;
import { HydrationData } from "next-super-performance" ;

export default function Home ( ) {
  return (
    < section >
      < Header />
      < Main />
      < HydrationData />
    </ section >
  ) ;
}

الجزء المهم هنا هو <HydrationData /> الذي سيدخل شيئًا كهذا: 

 < script type =" application/hydration-data " >
  { "1" : { "name" : "Teaser" , "props" : { "column" : 2 } } , "2" : { "name" : "Teaser" , "props" : { "column" : 3 } } }
</ script >

هذه هي أسماء ودعائم المكونات التي سيتم رطبها.

لإخبار تطبيقك بأنه يجب أن يكون مكونًا معينًا withHydration . يمكن أن يبدو main.js مثل هذا: 

 import Teaser from "./teaser" ;
import { withHydration } from "next-super-performance" ;

const HydratedTeaser = withHydration ( Teaser ) ;

export default function Body ( ) {
  return (
    < main >
      < Teaser column = { 1 } />
      < HydratedTeaser column = { 2 } />
      < HydratedTeaser column = { 3 } />

      < Teaser column = { 1 } />
      < Teaser column = { 2 } />
      < Teaser column = { 3 } />

      < Teaser column = { 1 } />
      < Teaser column = { 2 } />
      < Teaser column = { 3 } />
    </ main >
  ) ;
}

في السطر 4 ، قمنا بإنشاء مكون سيتم ترطيبه في العميل ونستخدمه مرتين على صفحتنا مع الدعائم المختلفة.

ستعمل withHydration على إعداد المكون الخاص بك مع علامة بحيث يمكن تقديمه على الخادم ويتم العثور عليه في HTML الخاص بك على العميل. لذلك <HydratedTeaser column={2} /> 

 < Fragment >
  < script type = "application/hydration-marker" />
  < Teaser column = { 2 } />
</ Fragment >

الجزء الأخير والأكثر أهمية هو client.js الخاص بك. js وهو الرمز الذي سيتم شحنه إلى المستخدمين الخاص بك وأيها ستقوم بترطيب مكوناتك. بالنسبة لمكون واحد ( Teaser ) ، يمكن أن يكون بسيطًا. 

 import { hydrate } from "next-super-performance" ;
import Teaser from "./components/teaser" ;

hydrate ( [ Teaser ] ) ;

أوه ، يأتي next-super-performance مع pool-attendant-preact وهذا هو السبب في أنك تستورد كل شيء من هنا بدلاً من pool-attendant-preact . إنها فقط تستورد وتصدير withHydration hydrate HydrationData للراحة.

ستجد hydrate المكونات التي قمت بتمييزها باستخدام withHydration واستخدام البيانات من <HydrationData /> لترطيبها بالمكونات التي انتقلت إليها كصفيف.

سيتطلب منك ذلك استيراد المكونات التي تريد استخدامها في العميل (ونقلها إلى وظيفة hydrate ). نظرًا لأن client.js هي نقطة الإدخال لجميع رمز العميل ، فهذا يعني أيضًا أنك سترى والتحكم في الرمز الذي ترسله إلى المستخدمين بالضبط. بصرف النظر عن preact ، لن يتم شحن أي شيء آخر.

إذا كانت مكوناتك تبعية من تلقاء نفسها ، فسيتم شحن هذه التبعيات "natually" أيضًا لأن client.js هو إدخالك وسيتم حل كل تعتمد من خلال WebPack.

حالة

هذا الريبو هو POC وشيء سنبني عليه. لتجربة ذلك ، استنساخ هذا المستودع ثم تشغيله 

 # Init Preact Git Sumodule
git submodule init
git submodule update

# Install dependencies
yarn

# Build Preact
cd packages/preact
yarn build

# Build the pool-attendant-preact package
# └─ cd to the pool-attendant-preact dir
cd ...
cd packages/pool-attendant-preact
# └─ build the package
yarn build

# cd to the app dir
cd ...
cd packages/app

# run the app
yarn dev

خاتمة

يبدو أن هذا POC يعمل بشكل جيد ، ويمكننا تقليل حجم حزمة لدينا بشكل كبير. لا يزال هناك الكثير لتفعله. Next.js لا يزال الرمز لا نريد رؤيته في العميل (مثل core-js ). كما نهدف إلى تنفيذ الأدوات وبرامج واجهات برمجة التطبيقات لإنشاء لغة للجوانب المهمة للأداء من الكود الخاص بك لتزويدك بأدوات لتحديد مسار التقديم الحاسم.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل