@divriots/jampack 0.20.1 → 0.21.0

package/README.md

@@ -106,7 +106,21 @@ Lazy-load assets below-the-fold ⬇️.
 
 - Images and Iframes are lazy loaded.
 
-See [details](https://jampack.divriots.com/features/optimize-above-the-fold/).
+See [Above-the-fold optimisations](https://jampack.divriots.com/features/optimize-above-the-fold/) for details.
+
+## Inline critical CSS
+
+Avoid [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) while stylesheets are downloaded and parsed.
+`jampack` will inline critical CSS and lazy-load the rest of CSS.
+
+See [Inline critical CSS](https://jampack.divriots.com/features/inline-critical-css/) for details.
+
+## Prefetch links
+
+Speedup the future page navigations by prefetching the links on the page.
+Thanks to [quicklink](https://github.com/GoogleChromeLabs/quicklink), this can be done dynamically as links enter the viewport.
+
+See [Prefetch links](https://jampack.divriots.com/features/prefetch-links/) for details.
 
 ### All assets are compressed
 

package/dist/cache.js

@@ -4,7 +4,7 @@ import * as fs from 'fs/promises';
 import $state from './state.js';
 import { CACHE_VERSIONS } from './packagejson.js';
 const listOfCategories = ['img', 'img-ext'];
-const CACHE_FOLDER = '.jampack/cache';
+const CACHE_FOLDER = $state.args.cache_folder || '.jampack/cache';
 async function cleanCache(full) {
     if (full) {
         try {

package/dist/config-default.js

@@ -3,7 +3,7 @@ const default_options = {
         add_css_reset_as: 'inline',
     },
     css: {
-        inline_critical_css: false, // Doesn't work yet
+        inline_critical_css: false,
     },
     js: {
         compressor: 'esbuild',

package/dist/index.js

@@ -38,11 +38,14 @@ program
     .option('--fail', 'Exits with a non-zero return code if issues.')
     .option('--onlyoptim', 'Only optimize (PASS 1).')
     .option('--onlycomp', 'Only compress (PASS 2).')
+    .option('--cache_folder <cache_folder>', 'Default: .jampack/cache')
     .option('--cleancache', 'Clean cache before running')
     .option('--nocache', 'Run with no use of cache')
     .action(async (dir, options) => {
+    // Arguments
     $state.dir = dir;
     $state.args = options;
+    // Print options
     if (options) {
         console.log('Options:');
         console.log(options);

package/dist/optimize.js

@@ -121,8 +121,7 @@ async function analyse(file) {
     //
     if (config.css.inline_critical_css) {
         try {
-            const location = path.resolve(path.dirname(path.join($state.dir, file)));
-            htmlResult = await inlineCriticalCss(location, htmlResult);
+            htmlResult = await inlineCriticalCss($state.dir, htmlResult);
         }
         catch (e) {
             console.warn('Fail to inline critical CSS', e);
@@ -156,7 +155,7 @@ function getTheFold($) {
     return 0;
 }
 async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
-    var _a, _b;
+    var _a, _b, _c;
     const img = $(imgElement);
     /*
      * Attribute 'src'
@@ -265,19 +264,17 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
     let srcToFormat = 'unchanged';
     if (isAboveTheFold) {
         // Above the fold, nothing beats progressive JPEG for LCP
-        // but it's not transparent
-        if ((_b = (await originalImage.getImageMeta())) === null || _b === void 0 ? void 0 : _b.hasAlpha) {
-            // TODO some images have Alpha metadata but have 0 alpha pixels
-            // We should be able to detect these to take advantage of Progressive JPEG
+        // But jpeg doesn't support transparency
+        if ((_b = (await originalImage.getImageMeta())) === null || _b === void 0 ? void 0 : _b.isOpaque) {
+            srcToFormat = 'jpeg+progressive';
+        }
+        else {
             srcToFormat =
                 (await originalImage.getMime()) === 'image/avif' ||
                     (await originalImage.getMime()) === 'image/webp'
                     ? 'unchanged'
                     : 'webp';
         }
-        else {
-            srcToFormat = 'jpeg+progressive';
-        }
     }
     else if (isInPicture) {
         // srcToFormat should not change if in picture
@@ -429,18 +426,29 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
             // Only try to generate better images
             // TODO generate more compatible formats (avif => webp/jpeg/png)
             //
-            switch (await originalImage.getMime()) {
-                case 'image/jpeg':
+            const mime = await originalImage.getMime();
+            switch (mime) {
                 case 'image/png':
+                case 'image/jpeg':
                     sourcesToGenerate.push({
                         mime: 'image/webp',
                         format: 'webp',
                     });
                 case 'image/webp':
-                    sourcesToGenerate.push({
-                        mime: 'image/avif',
-                        format: 'avif',
-                    });
+                    // Only add AVIF source for lossy images
+                    // AVIF don't perform well on lossless images
+                    // PNG and WebP will perform better
+                    // https://www.reddit.com/r/jpegxl/comments/l9ta2u/how_does_lossless_jpegxl_compared_to_png/
+                    // https://twitter.com/jonsneyers/status/1346389917816008704?s=19
+                    const isLossless = mime === 'image/png' ||
+                        (mime === 'image/webp' &&
+                            ((_c = (await originalImage.getImageMeta())) === null || _c === void 0 ? void 0 : _c.isLossless));
+                    if (!isLossless) {
+                        sourcesToGenerate.push({
+                            mime: 'image/avif',
+                            format: 'avif',
+                        });
+                    }
                 case 'image/avif':
                     // Nothing better
                     break;

package/dist/optimizers/inline-critical-css.js

@@ -4,6 +4,8 @@ export function inlineCriticalCss(path, html) {
     const critters = new Critters({
         compress: false,
         fonts: false,
+        reduceInlineStyles: false,
+        inlineThreshold: 0,
         logLevel: 'info',
         path,
     });

package/dist/state.d.ts

@@ -1,6 +1,7 @@
 export type Args = {
     nowrite?: boolean;
     nocache?: boolean;
+    cache_folder?: string;
 };
 export type ReportItem = {
     action: string;

package/dist/utils/resource.d.ts

@@ -5,7 +5,8 @@ type ImageMeta = {
     width: number | undefined;
     height: number | undefined;
     isProgressive: boolean;
-    hasAlpha: boolean;
+    isOpaque: boolean;
+    isLossless: boolean;
 };
 /**
  * File extension, mime and data are loaded only on demand, then cached.

package/dist/utils/resource.js

@@ -21,21 +21,37 @@ export class Resource {
     async getImageMeta() {
         if (this.image_meta === undefined) {
             const ext = await this.getExt();
+            let isLossless = false;
             switch (ext) {
                 case 'svg':
                 case 'gif':
-                case 'jpg':
                 case 'png':
-                case 'webp':
                 case 'tif':
+                    isLossless = true;
+                case 'webp':
+                    if (!isLossless) {
+                        try {
+                            // TODO check if webp is lossless
+                            // const info = await WebPInfo.from(await this.getData());
+                            // isLossless = info.summary.isLossless;
+                        }
+                        catch (e) {
+                            console.warn('Failed to get WebP info');
+                        }
+                    }
                 case 'avif':
+                // TODO
+                // Check for lossless avif
+                case 'jpg':
                     let sharpFile = await sharp(await this.getData(), { animated: true });
                     const meta = await sharpFile.metadata();
+                    const stats = await sharpFile.stats();
                     this.image_meta = {
                         width: meta.width,
                         height: meta.height,
                         isProgressive: meta.isProgressive || false,
-                        hasAlpha: meta.hasAlpha || false,
+                        isOpaque: stats.isOpaque,
+                        isLossless,
                     };
                     break;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "cache-version": {
     "img": "v1",
     "img-ext": "v1"
@@ -22,29 +22,29 @@
   "dependencies": {
     "@divriots/cheerio": "1.0.0-rc.12",
     "@proload/core": "^0.3.3",
-    "@swc/core": "^1.3.82",
+    "@swc/core": "^1.3.86",
     "add": "^2.0.6",
     "commander": "^10.0.1",
     "critters": "^0.0.20",
     "deepmerge": "^4.3.1",
-    "esbuild": "^0.19.2",
+    "esbuild": "^0.19.3",
     "file-type": "^18.5.0",
     "globby": "^13.2.2",
     "hasha": "^5.2.2",
     "html-minifier-terser": "^7.2.0",
     "kleur": "^4.1.5",
-    "lightningcss": "^1.21.5",
+    "lightningcss": "^1.22.0",
     "mini-svg-data-uri": "^1.4.4",
     "ora": "^7.0.1",
     "quicklink": "^2.3.0",
-    "sharp": "^0.32.5",
+    "sharp": "^0.32.6",
     "svgo": "^3.0.2",
     "table": "^6.8.1",
-    "undici": "^5.23.0"
+    "undici": "^5.24.0"
   },
   "devDependencies": {
     "@types/html-minifier-terser": "^7.0.0",
-    "@types/node": "^20.5.7",
+    "@types/node": "^20.6.2",
     "shx": "^0.3.3",
     "ts-node": "^10.2.1",
     "tslib": "^2.6.2",
@@ -52,7 +52,7 @@
   },
   "scripts": {
     "watch": "pnpm build --watch",
-    "try": "shx rm -fr demo && cp -R demo_ref demo && node ./dist/index.js ./demo --nocache",
+    "try": "shx rm -fr demo && cp -R demo_drc demo && node ./dist/index.js ./demo --nocache",
     "build": "shx rm -rf dist && tsc -b",
     "lint": "eslint . --ext .ts --config .eslintrc",
     "prepublishOnly": "pnpm build",