playform / compress Goto Github PK
View Code? Open in Web Editor NEW🗜️ Compress —
Home Page: https://playform.github.io/Compress/
License: MIT License
🗜️ Compress —
Home Page: https://playform.github.io/Compress/
License: MIT License
Hey! :) Maybe this is an error with the html minimizer, but I dont get any errors / logs, that's why im posting this here.
Im using a minimal project with "astro": "^1.6.5" and "astro-compress": "^1.1.1"
I noticed that html files are ignored while compressing if any script contains arrow functions used like this:
<script>
const sayHello = () => {
console.log("Hello World");
}
sayHello();
</script>
However it's getting compressed with this script, which I thought was kinda weird:
<script>
(() => {
console.log("Hello World");
})()
function initializeTheme() {
console.log("Hello World");
}
initializeTheme();
</script>
Whats even funnier is, that the following script (arrow function with parameters) is working too:
<script>
const sayHello = (name) => {
console.log(`Hello ${name}`);
}
sayHello("World");
</script>
To be more clear, the compressor doesn't work if any script contains arrow functions without parameters :D
Hi, ive tried the code on the readme and had img: false
but that didnt work.
Taking a look at the code i tried sharp: false
and it worked.
compress({
css: false,
html: false,
js: false,
img: false, // doesnt work
sharp: false, // works
svg: false,
}),
Since I upgraded from 1.1.7 to 1.1.12 the comments from the HTML are not being removed.
I get NaN undefined
and comments from the html are not removed. Spacing is removed but not comments.
Astro version: "astro": "^1.6.11"
07:18:03 AM [build] Waiting for the astro-compress integration...
Successfully compressed a total of 7968 HTML files for NaN undefined.
Successfully compressed a total of 8 JS files for NaN undefined.
Successfully compressed a total of 20 SVG files for NaN undefined.
Here my astro.config:
import { defineConfig } from "astro/config";
import sitemap from "@astrojs/sitemap";
import compress from "astro-compress";
import prefetch from '@astrojs/prefetch';
import { SITE_URL, SERVER_PORT } from "./src/config";
export default defineConfig({
site: SITE_URL,
vite: {
server: {
watch: {
ignored: ["/dist/**", "/db/**", "/src/pages/days/*.md"],
},
},
logLevel: 'silent'
},
publicDir: "./assets",
server: {
port: SERVER_PORT,
// host: true
},
integrations: [
prefetch(),
sitemap(),
compress({
css: false,
html: {
removeComments: true,
maxLineLength: 1000,
quoteCharacter: '"',
removeAttributeQuotes: true
},
img: false,
js: true,
svg: true,
logger: 1,
}),
],
});
Here a gist of the html I am trying to compress: https://gist.github.com/fabriziogiordano/83f68463ad32c9f9361cb642041a9cbb
I tried different versions and it seems it is starting from astro version 1.1.8
When i run npm run build
on Linux i get the following error. Using Node v14.15.5 and v16.15
pngquant-bin
is not a given on all Linux distros. Have this problem with a couple of providers like cloudflare and Netify.
09:13:08.063 | npm ERR! code 1
-- | --
09:13:08.064 | npm ERR! path /opt/buildhome/repo/node_modules/pngquant-bin
09:13:08.065 | npm ERR! command failed
09:13:08.065 | npm ERR! command sh -c node lib/install.js
09:13:08.065 | npm ERR! compiling from source
09:13:08.065 | npm ERR! Command failed: /opt/buildhome/repo/node_modules/pngquant-bin/vendor/pngquant --version
09:13:08.066 | npm ERR! /opt/buildhome/repo/node_modules/pngquant-bin/vendor/pngquant: error while loading shared libraries: libimagequant.so.0: cannot open shared object file: No such file or directory
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR! pngquant pre-build test failed
09:13:08.066 | npm ERR! Error: Command failed: /bin/sh -c ./configure --prefix="/opt/buildhome/repo/node_modules/pngquant-bin/vendor"
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR! Compiler: gcc
09:13:08.067 | npm ERR! Debug: no
09:13:08.067 | npm ERR! SSE: yes
09:13:08.067 | npm ERR! OpenMP: no
09:13:08.067 | npm ERR! If you're using git, do clone with --recursive, or download from https://github.com/ImageOptim/libimagequant
09:13:08.067 | npm ERR! imagequant: error ... libimagequant.h not found in ./lib/
09:13:08.067 | npm ERR!
09:13:08.067 | npm ERR!
09:13:08.067 | npm ERR! at /opt/buildhome/repo/node_modules/bin-build/node_modules/execa/index.js:231:11
09:13:08.068 | npm ERR! at processTicksAndRejections (node:internal/process/task_queues:96:5)
09:13:08.068 | npm ERR! at async Promise.all (index 0)
I read that "you can override any of the default options from the configurations," but I am not sure how to go about doing this. It would be helpful if you can add an example of how to override a default (e.g., keepClosingSlash: true
for html-minifier-terser) in README.md.
So i wrap the icon into component
---
import { Icon } from "astro-icon";
export interface Props {
title: string;
navigateTo: string;
iconName: string;
}
const { title, navigateTo, iconName } = Astro.props;
---
<a
href={"#" + navigateTo}
class="flex flex-col items-center justify-center group"
>
<Icon
class="w-8 h-8 mb-1 text-gray-500 group-hover:text-blue-600"
name={iconName}
/>
<span class="text-sm group-hover:text-blue-600">{title}</span>
</a>
when i use it like this
<BottomItem title="Home" navigateTo="home" iconName="mdi:home" />
<BottomItem title="Profile" navigateTo="profile" iconName="mdi:account" />
<BottomItem
title="Story"
navigateTo="story"
iconName="ic:baseline-edit"
/>
<BottomItem title="Gallery" navigateTo="gallery" iconName="solar:gallery-linear" />
<BottomItem title="Wallet" navigateTo="wallet" iconName="uil:wallet" />
<BottomItem title="Test" navigateTo="test" iconName="mdi:power" />
Error: Not Found: pack "solar"
but it is available on iconify
Hello, does this plugin only supports node environment? It seems like when deploying to cloudflare workers HTML does not seem to be compressed
Here this is my SVG file using the trick SVG - use to optimize the network request.
But after running Astro optimize, this will remove all properties 🥹
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 24 24" id="tabler-search-outline"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="10" cy="10" r="7"></circle><path d="m21 21l-6-6"></path></g></symbol>
<symbol viewBox="0 0 24 24" id="ic-baseline-clear-outline"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path></symbol>
</svg>
Before optimize 😭
<svg xmlns="http://www.w3.org/2000/svg" />
Hope someone can fix this, here this the file on my case.
And here is the minimal reproduction in Stackblitz(but you cannot build on that 🤣)
https://stackblitz.com/edit/github-enlpdy?file=src/pages/index.astro
Here you can pull and check it 🥰
https://github.com/harrytran998/astro-svg-optimizer
Is there a setting that can show me a bit more debug info on why it can not compress the file?
working on Astro rc 7 / Windows
Error: Cannot compress file ./dist/index.html!
Error: Cannot compress file ./dist/admin/index.html!
Error: Cannot compress file ./dist/contact/index.html!
Error: Cannot compress file ./dist/about/index.html!
Error: Cannot compress file ./dist/es/index.html!
Error: Cannot compress file ./dist/events/index.html!
Error: Cannot compress file ./dist/menu/index.html!
Error: Cannot compress file ./dist/es/about/index.html!
....
Successfully compressed a total of 0 HTML files for 0 Bytes.
Love this package!
But not the performance, especially when using it with lots of image files :(
It doesn't seem to be compressing in parallel.
A "make parallel" improvement to Astro's build command was made here. Perhaps something similar could be done here to improve the performance.
From a quick look at the code, perhaps the current bottleneck somewhere here?
Happy to take a stab at making some improvements on this once I can free-up some time.
I got some build errors on vercel because of the Sharp dependency. I'm not using any sharp related features, would it be possible to remove it? I'm also not sure if it works with the Edge runtime but I'll have to verify that.
Hi Guys,
I've an issue using this plugin on build. It's might be compatibility issue with Deno Adapter.
Here is the evidences:
Details:
❯ pnpm run build
> @apps/[email protected] build /Users/rio/Projects/JS/web/apps/astro-blog
> astro build
11:02:51 PM [build] output target: server
11:02:51 PM [build] deploy adapter: @astrojs/deno
11:02:51 PM [build] Collecting build info...
11:02:51 PM [build] Completed in 280ms.
11:02:51 PM [build] Building server entrypoints...
🌼 daisyUI components 2.33.0 https://github.com/saadeghi/daisyui
✔︎ Including: base, components, themes[1], utilities
11:02:54 PM [build] Completed in 2.23s.
building client
Completed in 295ms.
finalizing server assets
11:02:54 PM [build] Rearranging server assets...
@astrojs/sitemap: Skipped!
No pages found! We can only detect sitemap routes for "static" builds. Since you are using an SSR adapter, we recommend manually listing your sitemap routes using the "customPages" integration option.
Example: `sitemap({ customPages: ['https://example.com/route'] })`
Compressed about.39dc5942.css for 1 Bytes (1.61% reduction).
Compressed about.d36aaeb4.css for 2.36 KB (5.69% reduction).
Compressed blog.0b6c13c9.css for 1 Bytes (0.28% reduction).
Successfully compressed a total of 3 CSS files for 2.37 KB.
Compressed client.8e9befd7.js for 1.1 KB (0.79% reduction).
Compressed entry.mjs for 495.85 KB (50.75% reduction).
Successfully compressed a total of 2 JS files for 496.95 KB.
Compressed favicon.svg for 84 Bytes (9.62% reduction).
Successfully compressed a total of 1 SVG file for 84 Bytes.
✘ [ERROR] Could not resolve "stream"
dist/server/entry.mjs:73:87825:
73 │ ...ct.createElement("div")}),t,n,{}),r)throw r;return a}async function getNodeWritable(){let{Writable:e}=await import("stream");return e}async function renderToStaticMarkup$1(e,t,{default:n,...r},a){delete t.class;const o={};for(const[e,t]o...
╵ ~~~~~~~~
The package "stream" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
error Build failed with 1 error:
dist/server/entry.mjs:73:87825: ERROR: Could not resolve "stream"
File:
dist/server/entry.mjs
Code:
1623 | }).join("");
> 1624 | let error = new Error(`${text}${summary}`);
| ^
1625 | error.errors = errors;
1626 | error.warnings = warnings;
1627 | return error;
Stacktrace:
Error: Build failed with 1 error:
dist/server/entry.mjs:73:87825: ERROR: Could not resolve "stream"
at failureErrorWithLog (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1624:15)
at /Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1266:28
at runOnEndCallbacks (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1179:65)
at buildResponseToResult (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1264:7)
at /Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1377:14
at /Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:678:9
at handleIncomingPacket (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:775:9)
at Socket.readFromStdout (/Users/rio/Projects/JS/web/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:644:7)
at Socket.emit (node:events:527:28)
at Socket.emit (node:domain:475:12)
at addChunk (node:internal/streams/readable:315:12)
at readableAddChunk (node:internal/streams/readable:289:9)
at Socket.Readable.push (node:internal/streams/readable:228:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
ELIFECYCLE Command failed with exit code 1.
Thank you,
:)
I noticed the following in the docs.
If your path is different than dist be sure to update it accordingly:
// astro.config.ts
import compress from "astro-compress";
export default {
outDir: "./build",
integrations: [
compress({
path: "./build",
}),
],
};
While I agree that allowing users to manually override the path
option is necessary, other Astro integrations + adapters may change the output directory using the outDir
config property. Without digging into third-party integration/adapter code, it isn't obvious that that value has changed.
An example of this is the official @astrojs/vercel
adapter that modifies the outDir
property.
https://github.com/withastro/astro/blob/main/packages/integrations/vercel/src/static/adapter.ts#L19
Looking through the code of this integration it looks like it sets the default value of path
to ./dist
, which comes from the files-pipeline
defaults.
I propose using the value of config.outDir
from Astro as the default instead. This allows seamless integration with other third-party integrations/adapters and, if Astro ever changes its default value, keeps this integration working without needing a code change.
I'm happy to open a PR with this change if ya'll are accepting them.
I noticed that css has bug when forceMediaMerge: true
it sort media queries in wrong order
How I can use cssnano for compressing css?
I'd typed npm install -D -E astro-compress
but got error like this :
[##################] - reify:css-tree: timing reifyNode:node_modules/
> [email protected] install
> (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-android-arm64v8.tar.br
sharp: Installation error: Prebuilt libvips 8.13.3 binaries are not yet available for android-arm64v8
sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
npm ERR! code 1
npm ERR! path /data/data/com.termux/files/home/samxuling.github.io/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c -- (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
It say Prebuilt libvips 8.13.3 binaries are not yet available for android-arm64v8
Is the download address incorrect? 🤔
When I navigated to https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-android-arm64v8.tar.br
GitHub say 404
May make
on
(true
) as the default setting in development mode as well for this new feature.
related issue:
There is an error when using "astro-compress" in versions higher than "1.1.23". This error occurs along with another Astro component called "astro-icon". Apparently, it removes "cleanupIDs" where the specified icon to be used is indicated.
The error only occurs when building in development mode; everything works correctly otherwise.
▶ src/pages/index.astro
i18next: languageChanged en
error [astro-icon] Unable to load icon "mdi:rss"!
Error: Unknown builtin plugin "cleanupIDs" specified.
Error: [astro-icon] Unable to load icon "mdi:rss"!
Error: Unknown builtin plugin "cleanupIDs" specified.
at file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/pages/all.ca28674c.mjs:621:13
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async AstroComponentInstance.render (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1586:7)
at async renderChild (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1643:5)
at async [Symbol.asyncIterator] (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1310:7)
at async renderAstroTemplateResult (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1318:20)
at async renderChild (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1641:5)
at async AstroComponentInstance.render (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1595:7)
at async renderChild (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1643:5)
at async [Symbol.asyncIterator] (file:///home/runner/work/yacosta738.github.io/yacosta738.github.io/dist/chunks/astro.efe1843c.mjs:1310:7)
ELIFECYCLE Command failed with exit code 1.
Error: Process completed with exit code 1.
It looks like disabling certain compression types doesn't work properly. Even if I put this into astro.config.mjs
, CSS, HTML & JS is compressed on build:
import { defineConfig } from "astro/config";
import compress from "astro-compress";
export default defineConfig({
integrations: [
compress({
css: false,
html: false,
js: false,
img: false,
svg: false,
}),
],
});
Also a bunch of SVG errors are logged. But I'm not sure, if these are related to the problem above:
Error: Cannot compress file ./dist/webfonts/geomanist-regular-italic-webfont.svg!
Using astro-compress 0.0.10 and astro 1.0.0-beta.44.
Thank you a lot for this component and looking into this. Best wishes!
Previously, I was using astro-compress 1.1.35, then updated to 1.1.42. Now when building my project, I get this error:
Waiting for the @astrojs/image integration...
error VipsOperation: class "heifsave_buffer" not found
If I remove sharp from my project, it will build out. But, the same can be said if I remove astro-compress instead of sharp. BTW my project isn't utilizing astro-compress image compression.
Astro Image can't be used with sharp 0.32.1 due to unmet peer dependencies, so I'm still using sharp 0.31.3.
integrations: [
image({
serviceEntryPoint: "@astrojs/image/sharp",
logLevel: "error",
}),
compress({
css: false,
html: true,
img: false,
js: false,
svg: true,
logger: 2,
}),
]
For now, this works:
"astro": "2.3.2",
"@astrojs/image": "^0.16.6",
"astro-compress": "1.1.35",
"sharp": "^0.31.0"
Passing true
to a key for the configuration object doesn't actually perform compression for that item, and is considered the same as false
. Either change the type description to reflect that only a configuration object or false
can be passed, or accept true
as argument to use the defaults.
Example:
import { defineConfig } from 'astro/config'
import compress from 'astro-compress'
// https://astro.build/config
export default defineConfig({
integrations: [
compress({
css: false,
html: true, // note `true` is passed here
js: false,
img: false,
svg: false
})
]
})
This doesn't result in the HTML being compressed, and it not flagged as invalid by typescript, because the type definition goes:
export interface Options {
[key: string]: any;
/**
* Astro build path.
* @default "./dist/"
*/
path?: string;
// abbreviated
/**
* [html-minifier-terser] options.
*/
html?: boolean | HTML; // should be `false | HTML` if this is the inteded behavior
// abbreviated
}
https://github.com/one-suedwest/onesw-website/blob/main/src/pages/index.astro
If you look at that file at line 73, astro-compress will remove the space between the "<HiddenField />" and "an"
You can just clone that project and run "npm run build" and then open the generated index.html and you will see the issue.
I did not investigate this further, so i am sorry for the bad bug description.
I made sure that the problem does not exist when removing compress() from the vite config, so i am pretty sure that the issue is with astro-compress.
Currently compressing animated webp result in a still image instead of the animation.
Any way to supply an regexp to match animated webp files would be brilliant.
You can make the terminal output readable by colorizing it.
This is not an issue but a feature request.
I manage a site in astro that builds about 65,000 html files.
I used astro-compress for a while and the compression phase time alone was about 45 minutes on a small server.
I recently switched to https://github.com/wilsonzlin/minify-html and now the compression time is 3 minutes, 1.5 orders of magnitude less time. Pretty incredible.
Is it possible to explore the opportunity to use this compress instead of html-minify-terser currently used?
I was wondering if you have come across this behaviour before. I believe to have isolated my problem to the astro-compress
integration.
When I run astro build
in my project and the CSS compression takes place, the order of the lines of my CSS are being changed in the compression process. This is causing the incorrect styling to take precedence, namely in my media queries as the breakpoints are in the incorrect order to work (I am using max-width
breakpoints so require them to descend in size in my CSS for them to work correctly).
If I set compression to false in my config as below, the issue goes away, which makes me believe it's the integration's CSS compression causing the issue
export default defineConfig({
integrations: [
compress({
css: false,
}),
],
});
My CSS and overall Astro setup is a bit complicated so it may be difficult for me to make a minimum reproducible repo, but I can try if very necessary.
I use SCSS everywhere in my project, which may be relevant. The styles that I noticed this was happening in are in my global sass files as opposed to component styling.
These styles are in my /src/sass/
directory, where I have an abstracts and base directory with further sass files that all get imported into my global.scss
. See image of directory below.
I've disabled CSS compression for now, and happy to help investigate the issue where needed.
Thanks for the great integration so far!
Hey,
When I use this plugin I'm getting this error in my console:
Through a little bit of Googling I came across this same error here vuejs/vitepress#1143 and so I'm lead to believe that it is something to do with minifying the HTML when used with Vite and Vue.
Is HTML compression duplicative with the new Astro config option?
version: 1.0.1
The problem still exists
> [email protected] dev /Users/mac/projects/astro-basic-template
> astro dev
09:00:00 AM [astro] Unable to load /Users/mac/projects/astro-basic-template/astro.config.mjs
error Failed to resolve entry for package "astro-compress". The package may have incorrect main/module/exports specified in its package.json.
File:
/Users/mac/projects/astro-basic-template/astro.config.mjs
Stacktrace:
Error: Failed to resolve entry for package "astro-compress". The package may have incorrect main/module/exports specified in its package.json.
at packageEntryFailure (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:23266:11)
at resolvePackageEntry (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:23263:5)
at tryNodeResolve (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:23000:20)
at Context.resolveId (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:22762:28)
at Object.resolveId (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:43314:46)
at async TransformContext.resolve (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:43043:23)
at async normalizeUrl (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:41370:34)
at async TransformContext.transform (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:41512:47)
at async Object.transform (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)
at async loadAndTransform (file:///Users/mac/projects/astro-basic-template/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:41105:29)
Hey, really neat plugin! Is there any way to exclude a single file or directory or pattern?
For example I want to exclude my favicon.png
file from being compressed, but all other images should be compressed.
Is there any way to do so currently? Couldn't find anything in the docs, hence raising an issue.
Thanks
Seeing that integrations are run in the order listed in the config file, what's the recommended ordering of the compress and critters integrations if we have both in our project?
Astro Docs Reference: https://docs.astro.build/en/reference/integrations-reference/#integration-ordering
Any plans to support map files for things that support them (i.e. JavaScript)?
Hey, great project, thanks for your work!
I'm here for feature request. Currently, there is no ld-json compression by default. It may be not very needed for many users, but it may help someone. As I found out here, terser/html-minifier-terser#34 it easily enabled by { processScripts: ['application/ld+json'] }
configuration option. I spent some time in your README and finally be able to write something like this
...
compress({
html: {
processScripts: ["application/ld+json"],
},
}),
...
And it works. But, this leads me to the following conclusions. It will be cool to do something of or both:
Example of compressed built HTML with untouched ld-json section (if anyone wants to see how it looks):
Hi,
We're having an issue on a build where astro-compress is reordering the CSS class declarations for a few DIVs where the order is critical to the responsive nature of the element. The site is using Bootstrap where class ordering for showing/hiding an DOM element on mobile matters. Compress is reordering all classes to be alphabetical (from what we're noticing which breaks our logic). Is there a way to disable this type of cleanup process?
Thanks!
Is there a way to compress only certain images? Like, only ["jpg", "webp"]
It would be nice if there would a cache folder where the already compressed images are in so they won't need a new compression. It takes long to do the images on my website currently so deployment is slower.
Using compress({js: {comments: false}})
I am getting the following error when executing astro build
:
Error: Cannot compress file <filepath>!
Using
compress()
(orcompress({js: true})
) works, but there aresome
comments (as expected sincesome
is the default setting).
I followed the installation instructions, double checked my astro config file, and everything seems set up properly. However, after running the build process, and looking at *.html
files in the dist
directory, none of the HTML has been compressed. The JS and CSS files have been compressed by Astro.
I'm not seeing any errors after the build process either. Maybe I'm doing something else wrong?
"astro": "1.0.0-beta.19",
"astro-compress": "^0.0.6"
astro.config.mjs
import astro from "astro-compress";
export default defineConfig({
integrations: [
astro({
css: false,
html: true,
js: false
})
],
experimental: {
integrations: true
}
})
Hi,
I am using Vue, and compressing the HTML gives me hydration errors on every Vue component.
Is there a way to fix this?
According to the README, we can disable css compression by adding css: false
to our astro.config.mjs
like this:
export default defineConfig({
integrations: [
compress({
css: false,
}),
],
});
which is what I had, but when I ran the build command, I still got output saying css was compressed:
I don't think it's my syntax issue somewhere because I can change it to img: false
and it would correctly skip the images.
For some reason it insists on removing type="text"
on inputs.
Now while I understand why it may do this as if your not specifying it as anything specific the generic fallback is text, but in my case it leads to this pretty annoying css bug for my contact page.
<div class="col-12">
<label class="js-input-group">Name <input data-required="" name="name" placeholder="Fill in your name" /> <span class="form__error"></span></label>
</div>
<div class="col-12">
<label class="js-input-group">Email <input data-required="" name="email" placeholder="Fill in your email" /> <span class="form__error"></span></label>
</div>
<div class="col-12">
<label class="js-input-group">
Name
<input type="text" name="name" data-required="" placeholder="Fill in your name" />
<span class="form__error"></span>
</label>
</div>
<div class="col-12">
<label class="js-input-group">
Email
<input type="text" name="email" data-required="" placeholder="Fill in your email" />
<span class="form__error"></span>
</label>
</div>
I'm not really sure why it does this as I don't really see it doing much to reduce size.
Would it be possible to make this opt-out or opt-in in the config ?
Convert all assets from page-name-slug.css
to hash.css
Compressed rss.xml.5dc5b570.css for 305 Bytes (0.81% reduction).
Successfully compressed a total of 3 CSS files for 1.98 KB.
Compressed index.html for 532 Bytes (6.62% reduction).
Compressed index.html for 448 Bytes (5.93% reduction).
Compressed index.html for 734 Bytes (9.20% reduction).
Compressed index.html for 437 Bytes (5.80% reduction).
Compressed index.html for 5.8 KB (6.80% reduction).
Compressed index.html for 2.21 KB (5.70% reduction).
Successfully compressed a total of 6 HTML files for 10.12 KB.
Compressed Collapse.091b4bd4.js for 74 Bytes (0.11% reduction).
Compressed Counter.a8d99670.js for 3 Bytes (0.58% reduction).
Compressed web.1ca1cc66.js for 36 Bytes (0.27% reduction).
Successfully compressed a total of 3 JS files for 113 Bytes.
Error: Cannot compress file ./dist/assets/47508893_yjLfd.webp!
Compressed 81856932_p0_400x400.d3ac6a85.jpg for 3.56 KB (8.42% reduction).
Error: Cannot compress file ./dist/assets/81856932_p0_400x400.d3ac6a85_2ooF5E.webp!
Error: Cannot compress file ./dist/assets/81856932_p0_400x400.d3ac6a85_ZbbKsc.webp!
Error: Cannot compress file ./dist/assets/astro-blog_ULBFi.webp!
Error: Cannot compress file ./dist/assets/f343733b4bcb341c2faecfb62fe1d9ca_2vqqt0.webp!
Compressed lulu.1022f4bf.jpg for 859 Bytes (1.18% reduction).
Error: Cannot compress file ./dist/assets/lulu.1022f4bf_Dcmkg.webp!
Error: Cannot compress file ./dist/assets/lulu.1022f4bf_xAKrH.webp!
Successfully compressed a total of 2 IMG files for 4.4 KB.
Compressed favicon.svg for 84 Bytes (9.62% reduction).
Successfully compressed a total of 1 SVG file for 84 Bytes.
02:00:01 AM [build] 6 page(s) built in 12.76s
02:00:01 AM [build] Complete!
Just ran into this issue after updating to 1.0.0. No changes to config options from when everything was working earlier today. Might be caused by a separate node issue on my end it seems tho.
astro.config:
compress({
css: { restructure: false },
html: {
caseSensitive: true,
minifyCSS: true,
minifyJS: true,
removeComments: false,
removeEmptyAttributes: false,
removeEmptyElements: false,
removeOptionalTags: false,
},
svg: false,
js: false,
img: false,
}),
cli output:
node:internal/errors:464
ErrorCaptureStackTrace(err);
^
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/xxx/node_modules/.pnpm/[email protected]/node_modules/astro-compress/dist/options' is not supported resolving ES modules imported from /xxx/node_modules/.pnpm/[email protected]/node_modules/astro-compress/dist/index.js
at new NodeError (node:internal/errors:371:5)
at finalizeResolution (node:internal/modules/esm/resolve:317:17)
at moduleResolve (node:internal/modules/esm/resolve:756:10)
at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:867:11)
at Loader.resolve (node:internal/modules/esm/loader:89:40)
at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///xxx/node_modules/.pnpm/[email protected]/node_modules/astro-compress/dist/options'
from #11
I'll take a closer look at the comments one another time. But it is set to false for now in v0.0.17
Hi, thank you for making this first of all!
There is LightningCSS from the author of Parcel: https://lightningcss.dev/, which seems to better and faster than CSSO. So maybe switching to it, or adding an option would make sense. What do you think?
Am finding that HTML .astro pages that have embedded JS in the body via <script> tags are very problematic, especially if there are comments inside starting with //, which can cause the script contents to get dropped. Workaround is to have html:false in the config file. Everything else seems good if all other settings set to true.
This plugin converts <!DOCTYPE html>
into <!doctypehtml>
. The result should be <!doctype html>
.
You can change it here:
https://github.com/nhristov/astro-compress/blob/b2d09e3b03bd7900434fbe8c4c3805d8239a0909/src/index.ts#L81
for better debugging switch it off in dev mode
import.meta.env.MODE === "production" ? compress() : compress({html: false}) },
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.