Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/advanced-astro/astro-compress
🗜️ AstroJS compression utilities. Compress CSS, HTML, JavaScript and more.
https://github.com/advanced-astro/astro-compress
Last synced: 7 days ago
JSON representation
🗜️ AstroJS compression utilities. Compress CSS, HTML, JavaScript and more.
- Host: GitHub
- URL: https://github.com/advanced-astro/astro-compress
- Owner: advanced-astro
- License: other
- Fork: true (PlayForm/Compress)
- Created: 2022-08-16T21:00:11.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-01T08:04:38.000Z (8 months ago)
- Last Synced: 2024-08-02T15:46:08.432Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 45.5 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Related
AstroCritters
🦔 AstroJS GoogleChromeLabs Critters integration.
Inline your critical CSS with Astro.
AstroRome
🏛️ AstroJS Rome tools.
Format, lint and check your Astro website with Rome.
# 🗜️ [AstroCompress]
This **[Astro integration][astro-integration]** brings compression utilities to
your Astro project.
[CSS][csso] / [HTML][html-minifier-terser] / [JavaScript][terser] /
[Image][sharp] / [SVG][svgo]
> **Note**
>
> `AstroCompress` will not compress your requests, only your statically
> generated build and pre-rendered routes.
> [!IMPORTANT]
>
> Use `AstroCompress` last in your integration list for the best optimization.
## Installation
There are two ways to add integrations to your project. Let's try the most
convenient option first!
### `astro add` command
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 `AstroCompress`, 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
```
### Install dependencies manually
First, install the `AstroCompress` integration like so:
```sh
npm install -D -E astro-compress
```
Then, apply this integration to your `astro.config.*` file using the
`integrations` property:
**`astro.config.ts`**
```ts
import Compress from "astro-compress";
export default { integrations: [Compress()] };
```
## Getting started
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].
### Default Compression
You can override any of the default options from the configurations of:
- [csso](https://github.com/css/csso#minifysource-options)
- [html-minifier-terser](https://github.com/terser/html-minifier-terser#options-quick-reference)
- [sharp](https://sharp.pixelplumbing.com/api-output#jpeg)
- [svgo](https://github.com/svg/svgo#configuration)
- [terser](https://github.com/terser/terser#minify-options-structure)
or disable them entirely:
**`astro.config.ts`**
```ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
CSS: false,
HTML: false,
Image: false,
JavaScript: false,
SVG: false,
}),
],
};
```
to see the full option map visit:
[Source/Interface/Option.ts](https://github.com/astro-community/AstroCompress/blob/main/Source/Interface/Option.ts)
### Adding Multiple Paths
You can add multiple paths to compress by specifying an array as the `Path`
variable.
**`astro.config.ts`**
```ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
Path: ["./Target", "./Build"],
}),
],
};
```
### Input-Output Mapping
You can also provide a map of paths for different input output directories.
**`astro.config.ts`**
```ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
Path: new Map([["./Source", "./Target"]]),
}),
],
};
```
Or an array of the two.
**`astro.config.ts`**
```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"]]),
],
}),
],
};
```
### File Filtering
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
import Compress from "astro-compress";
export default {
integrations: [
Compress({
Exclude: [
"File.png",
(File: string) =>
File === "./Target/Favicon/Image/safari-pinned-tab.svg",
],
}),
],
};
```
### Controlling Logging
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`**
```ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
Logger: 0,
}),
],
};
```
[AstroCompress]: https://npmjs.org/astro-compress
[csso]: https://npmjs.org/csso
[html-minifier-terser]: https://npmjs.org/html-minifier-terser
[terser]: https://npmjs.org/terser
[sharp]: https://npmjs.org/sharp
[svgo]: https://npmjs.org/svgo
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
## Changelog
See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.