Configuration
The configuration file can be one of these files
jampack.config.js
(in ESM or CJS format)jampack.config.mjs
jampack.config.cjs
config/jampack.config.js
(in ESM or CJS format)config/jampack.config.mjs
config/jampack.config.cjs
Or in a top-level jampack
property in your package.json
.
Example
// jampack.config.js
export default {
image: {
compress: false,
},
};
Options
Available in config-types.js.
export type WebpOptions = {
effort: number;
mode: 'lossless' | 'lossly';
quality: number;
};
export type Options = {
html: {
/*
jampack adds a little bit of css to make
image keep correct aspect ratio after adding
image dimensions.
":where(img){height:auto}"
*/
add_css_reset_as: 'inline' | 'off';
sort_attributes: boolean;
};
js: {
compressor: 'esbuild' | 'swc'; // swc have smaller result but can break code (seen with SvelteKit code)
};
css: {
inline_critical_css: boolean;
};
image: {
embed_size: number; // Embed above the fold images if size < embed_size
srcset_min_width: number; // Minimum width of generate image in srcset
srcset_max_width: number; // Maximum width of generate image in srcset
max_width: number; // Maximum width of original images - if bigger => resized output
external: {
process:
| 'off' // Default
| 'download'; // Experimental
src_include: RegExp;
src_exclude: RegExp | null;
};
cdn: {
process:
| 'off' //default
| 'optimize';
src_include: RegExp;
src_exclude: RegExp | null;
};
compress: boolean;
jpeg: {
options: {
quality: number;
mozjpeg: boolean;
};
};
png: {
options: {
compressionLevel: number;
};
};
webp: {
options_lossless: WebpOptions;
options_lossly: WebpOptions;
};
svg: {
optimization: boolean;
};
};
misc: {
prefetch_links: 'in-viewport' | 'off';
};
};
Default values
Available in config-default.js.
import { Options } from './config-types.js';
const default_options: Options = {
html: {
add_css_reset_as: 'inline',
sort_attributes: false,
},
css: {
inline_critical_css: false,
},
js: {
compressor: 'esbuild',
},
image: {
embed_size: 1500,
srcset_min_width: 390 * 2, // HiDPI phone
srcset_max_width: 1920 * 2, // 4K
max_width: 99999,
external: {
process: 'off',
src_include: /^.*$/,
src_exclude: null,
},
cdn: {
process: 'off',
src_include: /^.*$/,
src_exclude: null,
},
compress: true,
jpeg: {
options: {
quality: 75,
mozjpeg: true,
},
},
png: {
options: {
compressionLevel: 9,
},
},
webp: {
options_lossless: {
effort: 4,
quality: 77,
mode: 'lossless',
},
options_lossly: {
effort: 4,
quality: 77,
mode: 'lossly',
},
},
svg: {
optimization: true,
},
},
misc: {
prefetch_links: 'off',
},
};
export default default_options;
Technical notes
Jampack is using Nate Moore’s proload package to load configuration.