@divriots/jampack 0.11.2 → 0.11.4

package/README.md

@@ -35,16 +35,78 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 
 `jampack` is a post-processing tool that takes the output of your [Static Site Generator (aka SSG)](https://jamstack.org/generators/) and optimizes it for best user experience and best [Core Web Vitals](https://web.dev/learn-core-web-vitals/) scores.
 
-[Read the introduction blog post](https://divriots.com/blog/introducing-jampack)
+[Read the introduction blog post](https://divriots.com/blog/introducing-jampack/)
 
 ## What can `jampack` do?
 
-- [Optimize images](https://jampack.divriots.com/features/optimize-images)
-- [Optimize assets above-the-fold](https://jampack.divriots.com/features/optimize-above-the-fold)
-- [Embed small images](https://jampack.divriots.com/features/embed-small-images)
-- [Compress all assets](https://jampack.divriots.com/features/compress-all)
-- [Fix things automatically](https://jampack.divriots.com/features/autofixes)
-- [Raise warnings](https://jampack.divriots.com/features/warnings)
+### `<img>`
+
+```html
+<img src="./redpanda.jpg" alt="Red panda">
+```
+
+becomes responsive with dimensions:
+
+```html
+<img src="./redpanda.jpg.webp" alt="Red panda" 
+     srcset="./redpanda.jpg.webp 3872w, ./redpanda@3572w.jpg.webp 3572w, ./redpanda@3272w.jpg.webp 3272w, ./redpanda@2972w.jpg.webp 2972w, ./redpanda@2672w.jpg.webp 2672w, ./redpanda@2372w.jpg.webp 2372w, ./redpanda@2072w.jpg.webp 2072w, ./redpanda@1772w.jpg.webp 1772w, ./redpanda@1472w.jpg.webp 1472w, ./redpanda@1172w.jpg.webp 1172w, ./redpanda@872w.jpg.webp 872w"
+     sizes="100vw"
+     loading="lazy"
+     decoding="async"
+     width="3872" 
+     height="2592">
+```
+
+### `<picture>`
+
+```html
+<picture>
+    <img src="./redpanda.jpg" alt="Red panda">
+</picture>
+```
+
+becomes responsive with multiple formats including AVIF:
+
+```html
+<picture>
+    <source type="image/avif" srcset="./redpanda@1936w.avif 1936w, ./redpanda@1636w.avif 1636w, ./redpanda@1336w.avif 1336w, ./redpanda@1036w.avif 1036w, ./redpanda@736w.avif 736w">
+    <source type="image/webp" srcset="./redpanda@1936w.webp 1936w, ./redpanda@1636w.webp 1636w, ./redpanda@1336w.webp 1336w, ./redpanda@1036w.webp 1036w, ./redpanda@736w.webp 736w">
+    <img src="./redpanda.jpg" alt="Red panda" loading="lazy" decoding="async" width="1936" height="1296" srcset="./redpanda.jpg 1936w, ./redpanda@1636w.jpg 1636w, ./redpanda@1336w.jpg 1336w, ./redpanda@1036w.jpg 1036w, ./redpanda@736w.jpg 736w" sizes="100vw">
+</picture>
+```
+
+### Above & below-the-fold
+
+`jampack` optimizes assets above-the-fold ⬆️.
+
+- Images are loaded with higher priority.
+- Images are compress as Progressive JPEG.
+- Small images are embedded in HTML.
+
+Lazy-load assets below-the-fold ⬇️.
+
+- Images and Iframes are lazy loaded.
+
+See [details](https://jampack.divriots.com/features/optimize-above-the-fold/).
+
+### All assets are compressed
+
+In a 2nd PASS, `jampack` compresses all untouched assets and keep the same name and the same format.
+
+| Extension       | Compressor            | 
+| --------------- | --------------------- | 
+| `.html`,`.htm`  | [`html-minifier-terser`](https://github.com/terser/html-minifier-terser) |   
+| `.css`          | Best of [`csso`](https://github.com/css/csso) & [`lightningCSS`](https://lightningcss.dev)  |
+| `.js`           | [`swc`](https://swc.rs/)                   |   
+| `.svg`          | [`svgo`](https://github.com/svg/svgo)                  |  
+| `.jpg`,`.jpeg`  | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
+| `.png`          | [`sharp`](https://sharp.pixelplumbing.com/)                |    
+| `.webp`         | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
+| `.avif`         | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
+
+### And more!
+
+See [Documentation](https://jampack.divriots.com/) for all feature list and examples.
 
 ## Quick use
 
@@ -53,7 +115,7 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 npx @divriots/jampack ./dist
 ```
 
-For more options see [CLI options](https://jampack.divriots.com/cli-options).
+For more options see [CLI options](https://jampack.divriots.com/cli-options/).
 
 ## `jampack` used in the wild
 

package/dist/compressors/css.js

@@ -1,14 +1,7 @@
-import { minify as csso } from 'csso';
 import { transform as lightcss, transformStyleAttribute as lightcssStyleAttribute, } from 'lightningcss';
 export async function compressCSS(originalCode, type) {
-    // csso only support css files. No inline style
-    let cssoCSSData = undefined;
-    if (type !== 'inline') {
-        // Compress with csso
-        cssoCSSData = Buffer.from(await csso(originalCode.toString(), { comments: false }).css);
-    }
     // Compress with lightningcss
-    let lightCSSData;
+    let lightCSSData = undefined;
     try {
         const options = {
             code: originalCode,
@@ -24,18 +17,10 @@ export async function compressCSS(originalCode, type) {
     }
     catch (e) {
         // Error while processing with lightningcss
-        // Ignore, we have csso as backup
+        // Take original code
     }
     let resultBuffer = undefined;
-    // Pick the best
-    if (cssoCSSData && lightCSSData) {
-        resultBuffer =
-            cssoCSSData.length <= lightCSSData.length ? cssoCSSData : lightCSSData;
-    }
-    else if (cssoCSSData && !lightCSSData) {
-        resultBuffer = cssoCSSData;
-    }
-    else if (!cssoCSSData && lightCSSData) {
+    if (lightCSSData && lightCSSData.length < originalCode.length) {
         resultBuffer = lightCSSData;
     }
     return resultBuffer || originalCode;

package/dist/compressors/html.js

@@ -8,9 +8,12 @@ async function minifyJSinHTML(originalCode) {
     return originalCode;
 }
 async function minifyCSSinHTML(originalCode, type) {
+    // Don't compress media
+    if (type === 'media')
+        return originalCode;
     const originalBuffer = Buffer.from(originalCode);
     const newCSS = await compressCSS(originalBuffer, type);
-    if (newCSS && newCSS.length < originalBuffer.length)
+    if (newCSS && newCSS.length > 0 && newCSS.length < originalBuffer.length)
         return newCSS.toString();
     return originalCode;
 }

package/dist/config-default.js

@@ -5,6 +5,11 @@ const default_options = {
     image: {
         embed_size: 1500,
         srcset_min_width: 640,
+        external: {
+            process: 'download',
+            src_include: /.*/,
+            src_exclude: null,
+        },
         compress: true,
         jpeg: {
             options: {

package/dist/config-types.d.ts

@@ -10,6 +10,11 @@ export type Options = {
     image: {
         embed_size: number;
         srcset_min_width: number;
+        external: {
+            process: 'download' | 'add-dimensions-only' | 'off';
+            src_include: RegExp | undefined;
+            src_exclude: RegExp | null;
+        };
         compress: boolean;
         jpeg: {
             options: {

package/dist/optimize.js

@@ -184,9 +184,21 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
      * Attribute 'decoding'
      */
     img.attr('decoding', 'async');
+    /*
+     * Check for external images
+     */
     if (!isLocal(attrib_src)) {
-        // Image not local, don't touch it
-        return;
+        switch (config.image.external.process) {
+            case 'off':
+                // Don't process external images
+                return;
+            case 'download':
+                // Download external image for local processing
+                break;
+            case 'add-dimensions-only':
+                // Only add dimensions of image
+                return;
+        }
     }
     /*
      * Loading image

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -19,12 +19,10 @@
     "@divriots/cheerio": "1.0.0-rc.12",
     "@proload/core": "^0.3.3",
     "@swc/core": "^1.3.57",
-    "@types/csso": "^5.0.0",
     "@types/html-minifier-terser": "^7.0.0",
     "@types/sharp": "^0.32.0",
     "@types/svgo": "^3.0.0",
     "commander": "^10.0.1",
-    "csso": "^5.0.5",
     "deepmerge": "^4.3.1",
     "file-type": "^18.4.0",
     "globby": "^13.1.4",