astro-critters π¦ AstroJS GoogleChromeLabs critters integration. Inline your critical CSS with Astro. | astro-rome ποΈ AstroJS Rome tools. Format, lint and check your Astro website with Rome. |
astro-compress ποΈ
This Astro integration brings compression utilities to your Astro project.
CSS HTML JavaScript Images SVG
Note
astro-compress
will not compress your requests, only your statically generated build and pre-rendered routes.
Note
Use
astro-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:
- (Optionally) Install all necessary dependencies and peer dependencies
- (Also optionally) Update your
astro.config.*
file to apply this integration
To install astro-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 astro-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
import Compress from "astro-compress";
export default { integrations: [Compress()] };
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:
- avci
- avcs
- avif
- avifs
- gif
- heic
- heics
- heif
- heifs
- jfif
- jif
- jpe
- jpeg
- jpg
- apng
- png
- raw
- tiff
- webp
SVG compression is supported via svgo.
or disable them entirely:
astro.config.ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
css: false,
html: false,
img: false,
js: false,
svg: false,
}),
],
};
astro.config.ts
import Compress from "astro-compress";
export default {
outDir: "./Target",
integrations: [
Compress({
path: "./Target",
}),
],
};
astro.config.ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
path: ["./Target", "./Build"],
}),
],
};
astro.config.ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
path: new Map([["./input", "./output"]]),
}),
],
};
astro.config.ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
path: [
// Compress Target
"./Target",
// Compress Target one more time into a different directory
new Map([["./Target", "./TargetCompress"]]),
],
}),
],
};
You can provide a filter to exclude files in your build. A filter can be an array of regexes or a single match. You can use functions, as well to match on file names.
astro.config.ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
exclude: [
"my-awesome.png",
(file: string) =>
file === "./Target/Images/favicon/safari-pinned-tab.svg",
],
}),
],
};
astro.config.ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
logger: 0,
}),
],
};
See CHANGELOG.md for a history of changes to this integration.
Built with Lightrix/NPM
, powered by
Lightrix/files-pipe
.