Rest
...objects: TsOptional
Option: InterfaceRest
...objects: Ts | Related — | ||
| 🦔 Inline — | | 🗻 Format — |
This Astro integration
brings compression utilities to
+your Astro project.
🎁 CSS (csso)
—
🎁 HTML (html-minifier-terser)
—
🎁 Image (sharp)
—
🎁 SVG (svgo)
—
++Note
++
Compress
will not compress your requests, only your statically generated +build and pre-rendered routes.
++[!IMPORTANT]
+Use
+Compress
last in your integration list for the best optimizations.
There are two ways to add integrations to your project. Let's try the most +convenient option first!
+astro add
commandAstro includes a CLI tool for adding first party integrations: astro add
. This
+command will:
astro.config.*
file to apply this integrationTo install Compress
, run the following from your project directory and follow
+the prompts:
Using NPM:
+npx astro add astro-compress
+
+
+Using Yarn:
+yarn astro add astro-compress
+
+
+Using PNPM:
+pnpx astro add astro-compress
+
+
+First, install the Compress
integration like so:
npm install -D -E astro-compress
+
+
+Then, apply this integration to your astro.config.*
file using the
+integrations
property:
astro.config.ts
export default {
integrations: [(await import("astro-compress")).default()],
};
+
+
+The utility will now automatically compress all your CSS, HTML, SVG, JavaScript
+and image files in the Astro outDir
folder.
The following image file types will be compressed via sharp
:
SVG compression is supported, as well via [svgo
].
You can override any of the default options from the configurations of:
+csso
lightningcss
html-minifier-terser
sharp
svgo
terser
astro.config.ts
export default {
integrations: [
(await import("astro-compress")).default({
CSS: false,
HTML: {
"html-minifier-terser": {
removeAttributeQuotes: false,
},
},
Image: false,
JavaScript: false,
SVG: false,
}),
],
};
+
+
+or disable them entirely:
+astro.config.ts
export default {
integrations: [
(await import("astro-compress")).default({
CSS: false,
HTML: false,
Image: false,
JavaScript: false,
SVG: false,
}),
],
};
+
+
+You can see the full option map here:
+Source/Interface/Option.ts
By default Compress
compresses the outDir
Astro
directory, if you'd like
+it to compress a different directory you would have to add it to the Compress
+Path
option, as well:
export default {
integrations: [
(await import("astro-compress")).default({
Path: ["./dist", "./Compress"],
}),
],
};
+
+
+You can add multiple paths to compress by specifying an array as the Path
+variable.
astro.config.ts
export default {
integrations: [
(await import("astro-compress")).default({
Path: ["./Target", "./Build"],
}),
],
};
+
+
+You can also provide a map of paths for different input output directories.
+astro.config.ts
export default {
integrations: [
(await import("astro-compress")).default({
Path: new Map([["./Source", "./Target"]]),
}),
],
};
+
+
+Or an array of the two:
+astro.config.ts
export default {
integrations: [
(await import("astro-compress")).default({
Path: [
// Compress Target
"./Target",
// Compress Target one more time into a different directory
new Map([["./Target", "./TargetCompress"]]),
],
}),
],
};
+
+
+You can filter files to exclude specific ones from compression. A filter can be +an array of regular expressions or a single match. You can also use functions to +match on file names:
+astro.config.ts
export default {
integrations: [
(await import("astro-compress")).default({
Exclude: [
"File.png",
(File: string) =>
File === "./Target/Favicon/Image/safari-pinned-tab.svg",
],
}),
],
};
+
+
+You can control the logging level by setting the Logger
parameter. The default
+value is 2
, but you can set it to 0
if you don't want to see debug messages:
astro.config.ts
export default {
integrations: [
(await import("astro-compress")).default({
Logger: 0,
}),
],
};
+
+
+See CHANGELOG.md
for a history of changes to this integration.
Optional
afterCalled right after compress() is run.
+Optional
beforeCalled right after parse is run.
+Optional
cloneTransform a copy of input AST if true. Useful in case of AST reuse.
+Optional
commentsSpecify what comments to leave:
+Optional
debugOutput debug information to stderr.
+Optional
filenameFilename of input CSS, uses for source map generation.
+Optional
forceEnables merging of
+Optional
loggerFunction to track every step of transformation.
+Optional
restructureDisable or enable a structure optimisations.
+Optional
sourceGenerate a source map when true.
+Optional
usageUsage data for advanced optimisations.
+Optional
analyzeWhether to analyze dependencies (e.g. @import
and url()
).
+When enabled, @import
rules are removed, and url()
dependencies
+are replaced with hashed placeholders that can be replaced with the final
+urls later (after bundling). Dependencies are returned as part of the result.
Optional
cssWhether to compile this file as a CSS module.
+Optional
customDefines how to parse custom CSS at-rules. Each at-rule can have a prelude, defined using a CSS +syntax string, and +a block body. The body can be a declaration list, rule list, or style block as defined in the +css spec.
+Optional
draftsWhether to enable parsing various draft syntax.
+Optional
errorWhether to ignore invalid rules and declarations rather than erroring. +When enabled, warnings are returned, and the invalid rule or declaration is +omitted from the output code.
+Optional
excludeFeatures that should never be compiled, even when unsupported by targets.
+Optional
includeFeatures that should always be compiled, even when supported by targets.
+Optional
inputAn input source map to extend.
+Optional
minifyWhether to enable minification
+Optional
nonWhether to enable various non-standard syntax.
+Optional
projectAn optional project root path, used as the source root in the output source map. +Also used to generate relative paths for sources used in CSS module hashes.
+Optional
pseudoReplaces user action pseudo classes with class names that can be applied from JavaScript. +This is useful for polyfills, for example.
+Optional
sourceWhether to output a source map.
+Optional
targetsThe browser targets for the generated code.
+Optional
unusedWhether to remove unused selectors or keywords.
+Optional
visitorAn AST visitor object. This allows custom transforms or analysis to be implemented in JavaScript.
+Multiple visitors can be composed into one using the composeVisitors
function.
+For optimal performance, visitors should be as specific as possible about what types of values
+they care about so that JavaScript has to be called as little as possible.
The size after the action.
+The size before the action.
+biome-ignore lint/suspicious/noExplicitAny:
+The input file.
+The output file.
+Optional
avifOptional
gifOptional
heifOptional
jpegOptional
pngOptional
sharpOptional
tiffOptional
webpOptional
Option: InterfaceOptional
ActionAction pipe configuration.
+Optional
CacheConfiguration for the target cache.
+Optional
CSScsso, lightningcss option properties
+Optional
ExcludeCriteria for excluding files.
+Optional
FileFile patterns to be matched.
+Optional
HTMLhtml-minifier-terser option properties
+Optional
Imagesharp option properties
+Optional
Javaterser option properties
+Optional
LoggerDebugging level.
+Optional
MapMap to different file paths
+Optional
ParserParsers for different file types
+Optional
PathConfiguration for the target path(s).
+Optional
SVGsvgo option properties
+biome-ignore lint/suspicious/noExplicitAny:
+TODO: Test this for security
+
biome-ignore lint/suspicious/noExplicitAny:
+