https://github.com/kamranahmedse/astro-compress
🗜️ AstroJS compression utilities. Compress CSS, HTML, JavaScript and more!
https://github.com/kamranahmedse/astro-compress
Last synced: 3 months ago
JSON representation
🗜️ AstroJS compression utilities. Compress CSS, HTML, JavaScript and more!
- Host: GitHub
- URL: https://github.com/kamranahmedse/astro-compress
- Owner: kamranahmedse
- License: other
- Fork: true (PlayForm/Compress)
- Created: 2023-08-08T18:52:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-08T20:17:40.000Z (over 2 years ago)
- Last Synced: 2024-05-01T20:29:22.915Z (almost 2 years ago)
- Language: TypeScript
- Homepage:
- Size: 970 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- Awesome-Astro-Integrations - 💻 GitHub
README
Related
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][astro-integration]** brings compression utilities to
your Astro project.
[CSS][csso] [HTML][html-minifier-terser] [JavaScript][terser] [Images][sharp]
[SVG][svgo]
> **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.
## 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 `astro-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
```
### Install dependencies manually
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`**
```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].
#### 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,
img: false,
js: false,
svg: false,
}),
],
};
```
#### If your path is different than the Astro `outDir` be sure to update it accordingly:
**`astro.config.ts`**
```ts
import Compress from "astro-compress";
export default {
outDir: "./Target",
integrations: [
Compress({
path: "./Target",
}),
],
};
```
#### 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"],
}),
],
};
```
#### 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([["./input", "./output"]]),
}),
],
};
```
#### 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"]]),
],
}),
],
};
```
#### 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`**
```ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
exclude: [
"my-awesome.png",
(file: string) =>
file === "./Target/Images/favicon/safari-pinned-tab.svg",
],
}),
],
};
```
#### Set `logger` to `0` if you do not want to see debug messages. Default is `2`.
**`astro.config.ts`**
```ts
import Compress from "astro-compress";
export default {
integrations: [
Compress({
logger: 0,
}),
],
};
```
[astro-compress]: 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.
[](https://github.com/Lightrix/NPM)
Built with [`Lightrix/NPM`](https://github.com/Lightrix/NPM), powered by
[`Lightrix/files-pipe`](https://github.com/Lightrix/files-pipe).