@divriots/jampack 0.2.3 → 0.4.0

package/README.md

@@ -1,3 +1,5 @@
+<div>
+
 ```
      __                                    __    
     |__|____    _____ ___________    ____ |  | __
@@ -7,14 +9,17 @@
 \______|    \/      \/|  |       \/     \/     \/
                       |__|
 ```
+
+</div>
+
 [![npm version](https://img.shields.io/npm/v/@divriots/jampack)](https://npmjs.org/package/@divriots/jampack) 
 [![Discord](https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord)](https://discord.gg/XkQxSU9)
 
-# `jampack`
+# Jampack
 
 Optimizes static websites for best user experience and best Core Web Vitals scores.
 
-<div>
+<div id="banner">
   <div>Brought to you by</div>
   <a href="https://divRIOTS.com#gh-light-mode-only">
     <img width="150" height="40" src="https://divRIOTS.com/divriots.svg" alt="‹div›RIOTS" />
@@ -32,47 +37,11 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 
 ## Why `jampack`?
 
-- **Better user experience**. Specially on low-end devices.
+- **Better user experience** for your website visitors. Specially on low-end devices.
 - **Better SEO**. Page experience now [affects ranking](https://developers.google.com/search/docs/appearance/page-experience).
 - **Easier maintenance**. Generating top performance webpages requires extra engineering in the composition of the pages that is counterproductive with the maintenance of the website.
 - **Time saving**. Spend less time optimizing and let `jampack` perform the heaving-lifting for you.
 
-## Optimizations
-
-### PASS 1 - Optimizations
-
-This pass takes all `*.{html|.htm}` files and parse them for optimisation. 
-
-| Optimization   | Technical details     | Related links | Available |
-| -------------- | --------------------- |:------------:|:---------:|
-| 🔽 `<img>`      |                       |             |           |
-| Optimize `png` to `WebP` | Given `foo.png`, creates a **near loss less** `foo.png.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
-| Optimize `jpeg` to `WebP` | Given `foo.jpg`, creates a **lossly** `foo.jpg.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
-| Optimize `svg` |  |  |  ✅  |
-| Generate responsive images and set `srcset` | Multiple smaller images are generated exclusively in `WebP` and `srcset` attribute is set accordingly.  | [web.dev](https://web.dev/patterns/web-vitals-patterns/images/responsive-images/) |  ✅  |
-| Embed small images | If optimised image size is <500 bytes, image is embed in `[src]` |  |  ✅  |
-| Set `width` and `height` if missing | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
-| Fix `width` or `height` if not numerical | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
-| Set lazy loading by default  | Sets `loading="lazy"` if `[loading]` is not set. | [web.dev](https://web.dev/lazy-loading-images/) |  ✅  |
-| Set async decoding by default  | Sets `decoding="async"`. |  |  ✅  |
-| Warn on missing `[alt]` | Warn on missing `alt` attribute but adds `alt=""` in case image is considered decorative. |  |  ✅  |
-| 🔽 `<picture>`  |                       |      |   |
-| - TODO         |                       |  |  ❌  |
-
-### PASS 2 - Compression
-
-This pass compresses all untouched files without changing filename or format.
-
-| Extension       | Compressor            | Some options |
-| --------------- | --------------------- | ------------ |
-| `.html`,`.htm`  | html-minifier-terser  |              |
-| `.css`          | csso                  |              |
-| `.js`           | swc                   |              |
-| `.svg`          | svgo                  |              |
-| `.jpg`,`.jpeg`  | sharp                 |              |
-| `.png`          | sharp                 |              |
-| `.webp`         | sharp                 |              | 
-
 ## Quick use
 
 ```sh
@@ -80,28 +49,11 @@ This pass compresses all untouched files without changing filename or format.
 npx @divriots/jampack ./dist
 ```
 
-## CLI options
-
-| Option        | Description                    |
-| -----------   | ------------------------------ |
-| `--onlyoptim` | Only runs optimization (PASS 1) |
-| `--onlycomp`  | Only runs compression (PASS 2) |
-| `--fast`      | Go fast. Mostly no compression just checks for issues. |
-| `--fail`      | Exits with a non-zero return code if issues. |
-| `--nowrite`   | Don't write anything to disk (for testing) |
-| `--exclude`   | Files to exclude from processing. Expect glob format like `--exclude 'blog/**'` |
-
-## Configuration
-
-No configuration yet. All defaults.
+For more options see [CLI options](https://jampack.divriots.com/cli-options).
 
-## Considerations
+## Documentation
 
-`jampack` is meant to be used with your static website as is with no particular changes but here are some things you can do to help it extract the best performance of your pages.
-
-### Add `loading="eager"` to your images above the fold
-
-`jampack` sets all images to lazy by default. But, [images above the fold should not be lazy](https://web.dev/lazy-loading-images/#effects-on-largest-contentful-paint-lcp). Just add `loading="eager"` to your images above the fold and `jampack` will treat them as high priority.
+Check the [Documentation side](https://jampack.divriots.com).
 
 ## `jampack` use in the wild
 
@@ -119,3 +71,26 @@ No configuration yet. All defaults.
 ## License
 
 This software is released under the terms of the [MIT license](https://github.com/divriots/jampack/blob/main/LICENSE).
+
+
+## Optimizations
+
+### PASS 1 - Optimizations
+
+This pass takes all `*.{html|.htm}` files and parse them for optimisation. 
+
+| Optimization   | Technical details     | Related links | Available |
+| -------------- | --------------------- |:------------:|:---------:|
+| 🔽 `<img>`      |                       |             |           |
+| Optimize `png` to `WebP` | Given `foo.png`, creates a **near loss less** `foo.png.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
+| Optimize `jpeg` to `WebP` | Given `foo.jpg`, creates a **lossly** `foo.jpg.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
+| Optimize `svg` |  |  |  ✅  |
+| Generate responsive images and set `srcset` | Multiple smaller images are generated exclusively in `WebP` and `srcset` attribute is set accordingly.  | [web.dev](https://web.dev/patterns/web-vitals-patterns/images/responsive-images/) |  ✅  |
+| Embed small images | If optimised image size is <500 bytes, image is embed in `[src]` |  |  ✅  |
+| Set `width` and `height` if missing | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
+| Fix `width` or `height` if not numerical | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
+| Set lazy loading by default  | Sets `loading="lazy"` if `[loading]` is not set. | [web.dev](https://web.dev/lazy-loading-images/) |  ✅  |
+| Set async decoding by default  | Sets `decoding="async"`. |  |  ✅  |
+| Warn on missing `[alt]` | Warn on missing `alt` attribute but adds `alt=""` in case image is considered decorative. |  |  ✅  |
+| 🔽 `<picture>`  |                       |      |   |
+| - TODO         |                       |  |  ❌  |

package/dist/cache.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="node" resolution-mode="require"/>
+import type { Image } from "./types.js";
+declare function cleanCache(): Promise<void>;
+declare function computeCacheHash(buffer: Buffer, options?: any): string;
+declare function getFromCacheCompressImage(hash: string): Promise<Image | undefined>;
+declare function addToCacheCompressImage(hash: string, image: Image): Promise<void>;
+export { cleanCache, computeCacheHash, getFromCacheCompressImage, addToCacheCompressImage };

package/dist/cache.js

@@ -0,0 +1,52 @@
+import hasha from "hasha";
+import path from "path";
+import * as fs from "fs/promises";
+import { VERSION } from './version.js';
+import $state from './state.js';
+const CACHE_FOLDER = ".jampack/cache";
+async function cleanCache() {
+    try {
+        await fs.rm(CACHE_FOLDER, { recursive: true });
+    }
+    catch (e) {
+        // Nothing to do, probably not present
+    }
+}
+function computeCacheHash(buffer, options) {
+    if ($state.args.nocache) {
+        return '';
+    }
+    let hash = `${VERSION}/${hasha(buffer, { algorithm: 'sha256' })}`;
+    if (options) {
+        hash += "/" + hasha(JSON.stringify(options), { algorithm: 'md5' });
+    }
+    return hash;
+}
+function getLocation(hash) {
+    return path.join(CACHE_FOLDER, hash);
+}
+async function getFromCacheCompressImage(hash) {
+    if ($state.args.nocache) {
+        return undefined;
+    }
+    const location = getLocation(hash);
+    try {
+        const data = await fs.readFile(path.join(location, 'data'));
+        const format = JSON.parse((await fs.readFile(path.join(location, 'format'))).toString());
+        return { data, format };
+    }
+    catch (e) {
+        // Problem during cache loading or not in cache
+    }
+    return undefined;
+}
+async function addToCacheCompressImage(hash, image) {
+    if ($state.args.nocache) {
+        return;
+    }
+    const location = getLocation(hash);
+    await fs.mkdir(location, { recursive: true });
+    await fs.writeFile(path.join(location, 'data'), image.data);
+    await fs.writeFile(path.join(location, 'format'), JSON.stringify(image.format));
+}
+export { cleanCache, computeCacheHash, getFromCacheCompressImage, addToCacheCompressImage };

package/dist/compress.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="node" resolution-mode="require"/>
 import sharp from 'sharp';
 import type { Image } from './types.js';
-export declare const compressImage: (data: Buffer, resize: sharp.ResizeOptions, toWebp?: boolean) => Promise<Image | undefined>;
+export declare const compressImage: (data: Buffer, options: {
+    resize?: sharp.ResizeOptions;
+    toFormat?: 'webp' | 'pjpg' | 'unchanged';
+}) => Promise<Image | undefined>;
 export declare function compress(exclude: string): Promise<void>;

package/dist/compress.js

@@ -10,6 +10,17 @@ import $state from './state.js';
 import { globby } from 'globby';
 import config from './config.js';
 import ora from 'ora';
+import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash } from './cache.js';
+async function compressJS(code) {
+    const newjsresult = await swc.minify(code, { compress: true, mangle: true });
+    return newjsresult.code;
+}
+async function compressInlineJS(code) {
+    const newCode = await compressJS(code);
+    if (newCode && newCode.length < code.length)
+        return newCode;
+    return code;
+}
 const processFile = async (file, stats) => {
     let writeData = undefined;
     try {
@@ -28,7 +39,7 @@ const processFile = async (file, stats) => {
             case '.html':
             case '.htm':
                 const htmldata = await fs.readFile(file);
-                const newhtmlData = await htmlminifier(htmldata.toString(), { minifyCSS: true, minifyJS: true, sortClassName: true, sortAttributes: true });
+                const newhtmlData = await htmlminifier(htmldata.toString(), { minifyCSS: true, minifyJS: compressInlineJS, sortClassName: true, sortAttributes: true });
                 writeData = newhtmlData;
                 break;
             case '.css':
@@ -40,9 +51,9 @@ const processFile = async (file, stats) => {
                 break;
             case '.js':
                 const jsdata = await fs.readFile(file);
-                const newjsresult = await swc.minify(jsdata.toString(), { compress: true, mangle: true });
-                if (newjsresult.code && newjsresult.code.length < jsdata.length) {
-                    writeData = newjsresult.code;
+                const newJS = await compressJS(jsdata.toString());
+                if (newJS && newJS.length < jsdata.length) {
+                    writeData = newJS;
                 }
                 break;
         }
@@ -74,7 +85,15 @@ function createWebpOptions(opt) {
         effort: opt.effort
     };
 }
-export const compressImage = async (data, resize, toWebp = false) => {
+export const compressImage = async (data, options) => {
+    var _a, _b;
+    const cacheHash = computeCacheHash(data, options);
+    const imageFromCache = await getFromCacheCompressImage(cacheHash);
+    if (imageFromCache) {
+        return imageFromCache;
+    }
+    // Load modifiable toFormat
+    let toFormat = options.toFormat || 'unchanged';
     if (!config.image.compress)
         return undefined;
     let sharpFile = await sharp(data, { animated: true });
@@ -106,7 +125,7 @@ export const compressImage = async (data, resize, toWebp = false) => {
             return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
         case 'png':
             outputFormat = 'png';
-            if (!toWebp) {
+            if (toFormat === 'unchanged') {
                 sharpFile = sharpFile.png(config.image.png.options || {});
             }
             doSharp = true;
@@ -114,7 +133,7 @@ export const compressImage = async (data, resize, toWebp = false) => {
         case 'jpeg':
         case 'jpg':
             outputFormat = 'jpg';
-            if (!toWebp) {
+            if (toFormat === 'unchanged') {
                 sharpFile = sharpFile.jpeg(config.image.jpeg.options || {});
             }
             doSharp = true;
@@ -123,24 +142,36 @@ export const compressImage = async (data, resize, toWebp = false) => {
             outputFormat = 'webp';
             sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
             doSharp = true;
-            toWebp = false; // Don't need to convert to webP again
+            toFormat = 'unchanged'; // Don't need to convert to webP again
             break;
     }
     if (doSharp) {
-        if (toWebp) {
+        if (toFormat === 'webp') {
             sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png' ? config.image.webp.options_lossless : config.image.webp.options_lossly));
             outputFormat = 'webp';
         }
-        if (resize.width && resize.height) {
-            sharpFile = sharpFile.resize({ ...resize, fit: 'fill', withoutEnlargement: true });
+        else if (toFormat === 'pjpg') {
+            sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
+            outputFormat = 'jpg';
+        }
+        if (((_a = options.resize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = options.resize) === null || _b === void 0 ? void 0 : _b.height)) {
+            sharpFile = sharpFile.resize({ ...options.resize, fit: 'fill', withoutEnlargement: true });
         }
-        return { format: outputFormat, data: await sharpFile.toBuffer() };
+        //
+        // Output image processed
+        //
+        // Add to cache
+        const outputImage = { format: outputFormat, data: await sharpFile.toBuffer() };
+        await addToCacheCompressImage(cacheHash, outputImage);
+        // Go
+        return outputImage;
     }
+    // Unknown input format or error while processing
     return undefined;
 };
-const compressImageFile = async (file, toWebP = false) => {
+const compressImageFile = async (file) => {
     const buffer = await fs.readFile(file);
-    return compressImage(buffer, {}, toWebP);
+    return compressImage(buffer, {});
 };
 export async function compress(exclude) {
     const spinner = ora(getProgressText()).start();

package/dist/config.d.ts

@@ -1,9 +1,9 @@
-export declare type WebpOptions = {
+export type WebpOptions = {
     effort: number;
     mode: 'lossless' | 'lossly';
     quality: number;
 };
-export declare type Options = {
+export type Options = {
     image: {
         embed_size: number;
         srcset_min_width: number;

package/dist/index.js

@@ -9,13 +9,14 @@ import { fast } from './config.js';
 import { printTitle } from './logger.js';
 import { exit } from 'process';
 import kleur from 'kleur';
+import { cleanCache } from './cache.js';
 const logo = `     __                                    __    
     |__|____    _____ ___________    ____ |  | __
     |  \\__  \\  /     \\\\____ \\__  \\ _/ ___\\|  |/ /
     |  |/ __ \\|  Y Y  \\  |_> > __ \\\\  \\___|    < 
 /\\__|  (____  /__|_|  /   __(____  /\\___  >__|_ \\
 \\______|    \\/      \\/|  |       \\/     \\/     \\/
-                      |__| by ‹div›RIOTS (c)2022
+                      |__| by ‹div›RIOTS (c)2022-2023
 `;
 console.log(logo);
 const program = new Command();
@@ -32,6 +33,8 @@ program.command('pack', { isDefault: true })
     .option('--fail', 'Exits with a non-zero return code if issues.')
     .option('--onlyoptim', 'Only optimize (PASS 1).')
     .option('--onlycomp', 'Only compress (PASS 2).')
+    .option('--cleancache', 'Clean cache before running')
+    .option('--nocache', 'Run with no use of cache')
     .action(async (dir, options) => {
     $state.dir = dir;
     $state.args = options;
@@ -39,6 +42,10 @@ program.command('pack', { isDefault: true })
     if (options.fast) {
         fast();
     }
+    // Clean cache
+    if (options.cleancache) {
+        cleanCache();
+    }
     if (!options.onlycomp) {
         printTitle('PASS 1 - Optimizing');
         console.time('Done');
@@ -94,13 +101,13 @@ function printIssues() {
         printTitle('Issues', kleur.bgRed);
         console.log('');
         for (let [file, list] of $state.issues) {
-            console.log(kleur.red('▶ ' + file + '\n'));
+            console.log('▶ ' + file + '\n');
             list.forEach(issue => {
                 issueCount++;
-                console.log(`❌ ${issue.msg}\n`);
+                console.log(`${kleur.bgYellow(` ${issue.type} `)} ${issue.msg}\n`);
             });
         }
+        printTitle(`${issueCount} issue(s) over ${$state.issues.size} files`, kleur.bgYellow);
         console.log('');
-        printTitle(`${issueCount} issue(s) over ${$state.issues.size} files`, kleur.bgRed);
     }
 }