jampack

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

果醬包

最佳化靜態網站以獲得最佳使用者體驗和最佳 Core Web Vitals 分數。

為您帶來

什麼是jampack ？

不是捆綁商。不是一個框架。

jampack是一種後處理工具，它會取得靜態網站產生器（又稱 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 的其餘部分。

閱讀更多

預取連結

透過預取頁面上的連結來加速未來的頁面導航。借助快速鏈接，這可以在鏈接進入視口時動態完成。

閱讀更多

所有資產均被壓縮

在第二個 PASS 中， 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'網站提供支持
• 鑰匙斗篷.ch
• bayjs.org
• qwind.pages.dev
• 布洛西的博客
• gxanshu.in
• 雲端砲網
• 群組同步應用程式

在這裡添加您的

為什麼叫jampack ？

• jam ：來自 Jamstack。
• pack ：讓人想起 90 年代的可執行加殼程序。

執照

該軟體是根據 MIT 許可條款發布的。