Compressโ๐๏ธ
npm install astro-compress| | Related | ||
| | Inlineโ๐ฆ | | Formatโ๐ป |
This [Astro integration][astro-integration] brings compression utilities
to your Astro project.
[CSS (csso)][csso]โ๐
[CSS (lightningcss)][lightningcss]โ๐
[HTML (html-minifier-terser)][html-minifier-terser]โ๐
[Image (sharp)][sharp]โ๐
[JavaScript (terser)][terser]โ๐
[SVG (svgo)][svgo]โ๐
[JSON][JSON]โ๐
> 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 includes a CLI tool for adding first party integrations: astro add. This
command will:
1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your astro.config.* file to apply this integration
To install Compress, run the following from your project directory and follow
the prompts:
Using NPM:
``sh`
npx astro add astro-compress
Using Yarn:
`sh`
yarn astro add astro-compress
Using PNPM:
`sh`
pnpx astro add astro-compress
First, install the Compress integration like so:
`sh`
npm install -D -E astro-compress
Then, apply this integration to your astro.config.* file using theintegrations property:
astro.config.ts
`ts`
export default {
integrations: [(await import("astro-compress")).default()],
};
The utility will now automatically compress all your CSS, HTML, SVG, JavaScript,
JSON and image files in the Astro outDir folder.
The following image file types will be compressed via [sharp][sharp]:
- avci
- avcs
- avif
- avifs
- gif
- heic
- heics
- heif
- heifs
- jfif
- jif
- jpe
- jpeg
- jpg
- apng
- png
- raw
- tiff
- webp
SVG compression is supported, as well via [svgo][svgo].
You can override any of the default options from the configurations of:
- csso
- lightningcss
- html-minifier-terser
- sharp
- svgo
- terser
astro.config.ts
`ts`
export default {
integrations: [
(await import("astro-compress")).default({
CSS: false,
HTML: {
"html-minifier-terser": {
removeAttributeQuotes: false,
},
},
Image: false,
JavaScript: false,
JSON: false,
SVG: false,
}),
],
};
or disable them entirely:
astro.config.ts
`ts`
export default {
integrations: [
(await import("astro-compress")).default({
CSS: false,
HTML: false,
Image: false,
JavaScript: false,
JSON: 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 likeCompress
it to compress a different directory you would have to add it to the Path option, as well:
`ts`
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
`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
`ts`
export default {
integrations: [
(await import("astro-compress")).default({
Path: new Map([["./Source", "./Target"]]),
}),
],
};
Or an array of the two:
astro.config.ts
`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
`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 default2
value is , but you can set it to 0 if you don't want to see debug messages:
astro.config.ts
`ts`
export default {
integrations: [
(await import("astro-compress")).default({
Logger: 0,
}),
],
};
[Compress]: HTTPS://NPMJS.Org/astro-compress
[csso]: HTTPS://NPMJS.Org/csso
[lightningcss]: HTTPS://NPMJS.Org/lightningcss
[html-minifier-terser]: HTTPS://NPMJS.Org/html-minifier-terser
[terser]: HTTPS://NPMJS.Org/terser
[sharp]: HTTPS://NPMJS.Org/sharp
[svgo]: HTTPS://NPMJS.Org/svgo
[JSON]:
HTTPS://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
[astro-integration]: HTTPS://docs.astro.build/en/guides/integrations-guide/
See CHANGELOG.md` for a history of changes to this integration.