jampack

     __                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  __    /     \____ __   _/ ___|  |/ /
    |  |/ __ |  Y Y    |_> > __ \  ___|    < 
/__|  (____  /__|_|  /   __(____  /___  >__|_ 
______|    /      /|  |       /     /     /
                      |__|

جامباك

يعمل على تحسين مواقع الويب الثابتة للحصول على أفضل تجربة للمستخدم وأفضل نتائج Core Web Vitals.

يوجه اليكم من

ما هو jampack ؟

ليس المجمع. ليس إطارا.

jampack هي أداة ما بعد المعالجة التي تأخذ مخرجات Static Site Generator (المعروف أيضًا باسم SSG) وتقوم بتحسينها للحصول على أفضل تجربة للمستخدم وأفضل نتائج Core Web Vitals.

اقرأ مقدمة المدونة

ماذا يمكن أن تفعل jampack ؟

<img>

 < img src =" ./redpanda.jpg " alt =" Red panda " >

يصبح مستجيبًا للأبعاد:

 < img src =" ./redpanda.jpg.webp " alt =" Red panda " 
     srcset ="
     ./redpanda.jpg.webp 3872w, ./[email protected] 3572w, ./[email protected] 3272w, 
     ./[email protected] 2972w, ./[email protected] 2672w, ./[email protected] 2372w,
     ./[email protected] 2072w, ./[email protected] 1772w, ./[email protected] 1472w,
     ./[email protected] 1172w, ./[email protected] 872w "
     sizes =" 100vw "
     loading =" lazy "
     decoding =" async "
     width =" 3872 " 
     height =" 2592 " >

<picture>

 < picture >
    < img src =" ./redpanda.jpg " alt =" Red panda " >
</ picture >

يصبح مستجيبًا بتنسيقات متعددة بما في ذلك AVIF:

 < picture >
    < source type =" image/avif " 
            srcset =" ./[email protected] 1936w, ./[email protected] 1636w,
                    ./[email protected] 1336w, ./[email protected] 1036w,
                    ./[email protected] 736w " >
    < source type =" image/webp " 
            srcset =" ./[email protected] 1936w, ./[email protected] 1636w,
                    ./[email protected] 1336w, ./[email protected] 1036w,
                    ./[email protected] 736w " >
    < img src =" ./redpanda.jpg " 
         alt =" Red panda " 
         loading =" lazy " 
         decoding =" async " 
         width =" 1936 " 
         height =" 1296 " 
         srcset =" ./redpanda.jpg 1936w, ./[email protected] 1636w,
                 ./[email protected] 1336w, ./[email protected] 1036w,
                 ./[email protected] 736w "
         sizes =" 100vw " >
</ picture >

اقرأ المزيد

تصبح صور CDN سريعة الاستجابة

 < img
      src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D "
      alt =" Clouds in the sky by Taylor Van Riper "
      width =" 2848 "
      height =" 4272 "
    />

يصبح

 < img
      src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D "
      alt =" Clouds in the sky by Taylor Van Riper "
      width =" 2848 "
      height =" 4272 "
      loading =" lazy "
      decoding =" async "
      srcset ="
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2848&amp;fit=min&amp;auto=format 2848w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2548&amp;fit=min&amp;auto=format 2548w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2248&amp;fit=min&amp;auto=format 2248w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1948&amp;fit=min&amp;auto=format 1948w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1648&amp;fit=min&amp;auto=format 1648w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1348&amp;fit=min&amp;auto=format 1348w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1048&amp;fit=min&amp;auto=format 1048w
      "
      sizes =" 100vw "
    />

اقرأ المزيد

يمكن تنزيل الصور الخارجية وتحسينها

 < img
     src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=jpg&fit=crop&w=1287&q=80 "
     alt =" Clouds in the sky by Taylor Van Riper "
/>

يصبح

 < img
     src =" _jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp "
     alt =" Clouds in the sky by Taylor Van Riper "
     loading =" lazy "
     decoding =" async "
     width =" 1287 "
     height =" 1931 "
     srcset ="
        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp  1287w,
        _jampack/[email protected]  987w,
        _jampack/[email protected]  687w
     "
     sizes =" 100vw "
    />

اقرأ المزيد

فوق وتحت الطية

يعمل jampack على تحسين الأصول في الجزء العلوي من الصفحة ⬆️.

• يتم تحميل الصور بأولوية أعلى.
• يتم تضمين الصور الصغيرة في HTML.

تحميل الأصول البطيئة في الجزء السفلي من الصفحة .

• يتم تحميل الصور وإطارات iframe بشكل بطيء.

اقرأ المزيد

مضمنة CSS الحرجة

تجنب FOUC أثناء تنزيل أوراق الأنماط وتحليلها. سوف يقوم jampack بتضمين CSS المهم وتحميل بقية CSS ببطء.

اقرأ المزيد

روابط الجلب المسبق

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

اقرأ المزيد

يتم ضغط كافة الأصول

في التمريرة الثانية، تقوم jampack بضغط جميع الأصول التي لم تمسها وتحتفظ بنفس الاسم ونفس التنسيق.

امتداد	ضاغط
.html ، .htm	html-minifier-terser
.css	lightningCSS
.js	esbuild أو swc
.svg	svgo
.jpg ، .jpeg	sharp
.png	sharp
.webp	sharp
.avif	sharp

وأكثر من ذلك بكثير!

الاستخدام السريع

 # Optimize static website in `dist` folder
npx @divriots/jampack ./dist

لمزيد من الخيارات، راجع خيارات CLI.

jampack المستخدمة في البرية

• تشغيل كافة مواقع ‹div›RIOTS
• keycloak.ch
• bayjs.org
• qwind.pages.dev
• مدونة بلويسي
• gxanshu.in
• cloudcannon.com
• groupsync.app

أضف ما يخصك هنا

لماذا سميت jampack ؟

• jam : من جامستاك.
• pack : تذكرنا بالحزم القابلة للتنفيذ من التسعينيات.

رخصة

تم إصدار هذا البرنامج بموجب شروط ترخيص MIT.