#compress styles and scripts astro js

4 messages · Page 1 of 1 (latest)

past oxide
#

how to compress styles and scripts ?

calm rootBOT
#

Hi @past oxide. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro provides several ways to optimize and compress your styles and scripts for better performance.

  1. Bundle Control: When Astro builds your site for production deployment, it minifies and combines your CSS into chunks. Each page on your site gets its own chunk, and additionally, CSS that is shared between multiple pages is further split off into their own chunks for reuse. You can configure the size at which stylesheets will be linked externally (in bytes) using the assetsInlineLimit vite build option. If you would rather all project styles remain external, you can configure the inlineStylesheets build option. Here is how you can do it:
// To set assetsInlineLimit
import { defineConfig } from 'astro/config';
export default defineConfig({  vite: {    build: {      assetsInlineLimit: 1024,    }  }});

// To set inlineStylesheets
import { defineConfig } from 'astro/config';
export default defineConfig({  build: {    inlineStylesheets: 'never'  }});

Source (https://docs.astro.build/en/guides/styling/#production)

  1. Script & Style Directives: By default, Astro will process, optimize, and bundle any <script> and <style> tags that it sees on the page. You can opt-out of this behavior with the is:inline directive. is:inline tells Astro to leave the <script> or <style> tag as-is in the final output HTML. The contents will not be processed, optimized, or bundled.
<style is:inline>  /* inline: relative & npm package imports are not supported. */  @import '/assets/some-public-styles.css';  span { color: green; }</style>
<script is:inline>  /* inline: relative & npm package imports are not supported. */  console.log('I am inlined right here in the final output HTML.');</script>

Source (https://docs.astro.build/en/reference/directives-reference/#isinline)

#
  1. HTML Compression: In Astro v3.0, Astro compresses emitted HTML by default. You can now remove compressHTML: true from your configuration as this is the new default behavior. You must now set compressHTML: false to opt out of HTML compression.
import { defineConfig } from "astro/config";
export default defineConfig({  compressHTML: true})

Source (https://docs.astro.build/en/guides/upgrade-to/v3/#changed-default-compresshtml)

Remember to always test your site's interactive parts to ensure they still work correctly after enabling these optimizations.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: