Rest
...objects: TsOptional
Option: InterfaceRest
...objects: Ts | Related — | ||
🦔 Inline — | 🗻 Format — |
This Astro integration brings compression utilities to -your Astro project.
-🎁 CSS (csso) —
- -🎁 HTML (html-minifier-terser) —
-🎁 Image (sharp) —
- -🎁 SVG (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.
There are two ways to add integrations to your project. Let's try the most -convenient option first!
-astro add
commandAstro includes a CLI tool for adding first party integrations: astro add
. This
-command will:
astro.config.*
file to apply this integrationTo install Compress
, run the following from your project directory and follow
-the prompts:
Using NPM:
-npx astro add @playform/compress
-
-
-Using Yarn:
-yarn astro add @playform/compress
-
-
-Using PNPM:
-pnpx astro add @playform/compress
-
-
-First, install the Compress
integration like so:
npm install -D -E @playform/compress
-
-
-Then, apply this integration to your astro.config.*
file using the
-integrations
property:
astro.config.ts
export default {
integrations: [(await import("@playform/compress")).default()],
};
-
-
-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:
-SVG compression is supported, as well via svgo.
-You can override any of the default options from the configurations of:
-astro.config.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
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
-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:
export default {
integrations: [
(await import("@playform/compress")).default({
Path: ["./dist", "./Compress"],
}),
],
};
-
-
-You can add multiple paths to compress by specifying an array as the Path
-variable.
astro.config.ts
export default {
integrations: [
(await import("@playform/compress")).default({
Path: ["./Target", "./Build"],
}),
],
};
-
-
-You can also provide a map of paths for different input output directories.
-astro.config.ts
export default {
integrations: [
(await import("@playform/compress")).default({
Path: new Map([["./Source", "./Target"]]),
}),
],
};
-
-
-Or an array of the two:
-astro.config.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"]]),
],
}),
],
};
-
-
-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
export default {
integrations: [
(await import("@playform/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 default
-value is 2
, but you can set it to 0
if you don't want to see debug messages:
astro.config.ts
export default {
integrations: [
(await import("@playform/compress")).default({
Logger: 0,
}),
],
};
-
-
-See CHANGELOG.md for a history of changes to this integration.
-Optional
afterCalled right after compress() is run.
-Optional
beforeCalled right after parse is run.
-Optional
cloneTransform a copy of input AST if true. Useful in case of AST reuse.
-Optional
commentsSpecify what comments to leave:
-Optional
debugOutput debug information to stderr.
-Optional
filenameFilename of input CSS, uses for source map generation.
-Optional
forceEnables merging of
-Optional
loggerFunction to track every step of transformation.
-Optional
restructureDisable or enable a structure optimisations.
-Optional
sourceGenerate a source map when true.
-Optional
usageUsage data for advanced optimisations.
-Optional
analyzeWhether to analyze dependencies (e.g. @import
and url()
).
-When enabled, @import
rules are removed, and url()
dependencies
-are replaced with hashed placeholders that can be replaced with the final
-urls later (after bundling). Dependencies are returned as part of the result.
Optional
cssWhether to compile this file as a CSS module.
-Optional
customDefines how to parse custom CSS at-rules. Each at-rule can have a prelude, defined using a CSS -syntax string, and -a block body. The body can be a declaration list, rule list, or style block as defined in the -css spec.
-Optional
draftsWhether to enable parsing various draft syntax.
-Optional
errorWhether to ignore invalid rules and declarations rather than erroring. -When enabled, warnings are returned, and the invalid rule or declaration is -omitted from the output code.
-Optional
excludeFeatures that should never be compiled, even when unsupported by targets.
-Optional
includeFeatures that should always be compiled, even when supported by targets.
-Optional
inputAn input source map to extend.
-Optional
minifyWhether to enable minification
-Optional
nonWhether to enable various non-standard syntax.
-Optional
projectAn optional project root path, used as the source root in the output source map. -Also used to generate relative paths for sources used in CSS module hashes.
-Optional
pseudoReplaces user action pseudo classes with class names that can be applied from JavaScript. -This is useful for polyfills, for example.
-Optional
sourceWhether to output a source map.
-Optional
targetsThe browser targets for the generated code.
-Optional
unusedWhether to remove unused selectors or keywords.
-Optional
visitorAn AST visitor object. This allows custom transforms or analysis to be implemented in JavaScript.
-Multiple visitors can be composed into one using the composeVisitors
function.
-For optimal performance, visitors should be as specific as possible about what types of values
-they care about so that JavaScript has to be called as little as possible.
Optional
avifOptional
gifOptional
heifOptional
jpegOptional
pngOptional
sharpOptional
tiffOptional
webpThe size after the action.
-The size before the action.
-biome-ignore lint/suspicious/noExplicitAny:
-The input file.
-The output file.
-Optional
Option: InterfaceOptional
ActionAction pipe configuration.
-Optional
CSScsso, lightningcss option properties
-Optional
CacheConfiguration for the target cache.
-Optional
ExcludeCriteria for excluding files.
-Optional
FileFile patterns to be matched.
-Optional
HTMLhtml-minifier-terser option properties
-Optional
Imagesharp option properties
-Optional
Javaterser option properties
-Optional
LoggerDebugging level.
-Optional
MapMap to different file paths
-Optional
ParserParsers for different file types
-Optional
PathConfiguration for the target path(s).
-Optional
SVGsvgo option properties
-biome-ignore lint/suspicious/noExplicitAny:
-TODO: Test this for security
-
biome-ignore lint/suspicious/noExplicitAny:
-