Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/PlayForm/Compress
🗜️ Compress —
https://github.com/PlayForm/Compress
astro astro-component astro-compress astro-integration compress compression css csso html html-minifier-terser image javascript minify performance playform sharp svg terser withastro
Last synced: 20 days ago
JSON representation
🗜️ Compress —
- Host: GitHub
- URL: https://github.com/PlayForm/Compress
- Owner: PlayForm
- License: other
- Created: 2022-05-08T04:16:33.000Z (over 2 years ago)
- Default Branch: Current
- Last Pushed: 2024-10-16T18:40:35.000Z (27 days ago)
- Last Synced: 2024-10-17T15:44:11.888Z (27 days ago)
- Topics: astro, astro-component, astro-compress, astro-integration, compress, compression, css, csso, html, html-minifier-terser, image, javascript, minify, performance, playform, sharp, svg, terser, withastro
- Language: TypeScript
- Homepage: https://playform.github.io/Compress/
- Size: 48.7 MB
- Stars: 498
- Watchers: 3
- Forks: 12
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Related —
🦔 Inline — 
🗻 Format —
# 🗜️ [Compress] —
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] —
> **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.
## 🚀 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 `Compress`, run the following from your project directory and follow
the prompts:
Using NPM:
```sh
npx astro add @playform/compress
```
Using Yarn:
```sh
yarn astro add @playform/compress
```
Using PNPM:
```sh
pnpx astro add @playform/compress
```
### Install dependencies manually
First, install the `Compress` integration like so:
```sh
npm install -D -E @playform/compress
```
Then, apply this integration to your `astro.config.*` file using the
`integrations` property:
**`astro.config.ts`**
```ts
export default {
integrations: [(await import("@playform/compress")).default()],
};
```
## 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`][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`].
### Default Compression
You can override any of the default options from the configurations of:
- [`csso`](https://github.com/css/csso#minifysource-options)
- [`lightningcss`](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts#L8)
- [`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)
**`astro.config.ts`**
```ts
export default {
integrations: [
(await import("@playform/compress")).default({
CSS: false,
HTML: {
"html-minifier-terser": {
removeAttributeQuotes: false,
},
},
Image: false,
JavaScript: false,
SVG: false,
}),
],
};
```
or disable them entirely:
**`astro.config.ts`**
```ts
export default {
integrations: [
(await import("@playform/compress")).default({
CSS: false,
HTML: false,
Image: false,
JavaScript: false,
SVG: false,
}),
],
};
```
You can see the full option map here:
[`Source/Interface/Option.ts`](https://github.com/PlayForm/Compress/blob/main/Source/Interface/Option.ts)
### Output
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:
```ts
export default {
integrations: [
(await import("@playform/compress")).default({
Path: ["./dist", "./Compress"],
}),
],
};
```
### Add Multiple Paths
You can add multiple paths to compress by specifying an array as the `Path`
variable.
**`astro.config.ts`**
```ts
export default {
integrations: [
(await import("@playform/compress")).default({
Path: ["./Target", "./Build"],
}),
],
};
```
### Input-Output Mapping
You can also provide a map of paths for different input output directories.
**`astro.config.ts`**
```ts
export default {
integrations: [
(await import("@playform/compress")).default({
Path: new Map([["./Source", "./Target"]]),
}),
],
};
```
Or an array of the two:
**`astro.config.ts`**
```ts
export default {
integrations: [
(await import("@playform/compress")).default({
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
export default {
integrations: [
(await import("@playform/compress")).default({
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
export default {
integrations: [
(await import("@playform/compress")).default({
Logger: 0,
}),
],
};
```
[Compress]: HTTPS://NPMJS.Org/@playform/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
[astro-integration]: HTTPS://docs.astro.build/en/guides/integrations-guide/
## Changelog
See [`CHANGELOG.md`](CHANGELOG.md) for a history of changes to this integration.