#Minify JS

7 messages · Page 1 of 1 (latest)

tall talon
#

How do I enable minifying of JS code that lives in /public/ ?

night ermineBOT
#

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

#

Unfortunately, you cannot minify JavaScript files placed in the /public/ directory through Astro's build process. This is by design.

As the Astro documentation states:

"You can place CSS and JavaScript in your public/ directory, but be aware that those files will not be bundled or optimized in your final build." [Project structure]

The public/ folder is specifically intended for files that should be copied as-is into the build output, without any processing, bundling, or optimization. [Project structure]

What you should do instead

Move your JavaScript files into the src/ directory. Scripts inside src/ are processed by Astro and Vite, which includes bundling and optimization (minification). You can then reference them in your components:

<!-- relative path to a script inside src/ -->
<script src="../scripts/my-script.js"></script>

Astro will automatically handle TypeScript support, bundling, deduplication, and optimization for scripts in src/. [Scripts and event handling]

As a general rule, any CSS or JavaScript that you write yourself should live in your src/ directory. [Project structure]

If you need to minify files in public/ for some reason, you would need to do so outside of Astro's build pipeline, using a separate tool (e.g., a standalone minifier) before placing them in the public/ folder. However, the knowledge sources do not provide specific guidance on that approach.

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

#

@tall talon Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tall talon
#

@night ermine I'm using AudioWorkletProcessor though. does that make it not possible for the .js file to live in src/ ?

night ermineBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The knowledge sources do not contain any information about AudioWorkletProcessor or its specific requirements in relation to Astro's build pipeline. I'm not able to give you a confident answer on whether Astro's script processing would be compatible with AudioWorkletProcessor worklet files based on the available documentation.

What I can confirm from the knowledge sources is that if you need to opt out of Astro's script processing for any reason, you have options:

  1. Keep the file in public/ and reference it with is:inline:

    <script is:inline src="/my-worklet.js"></script>

    This skips all processing but also means no minification. [Scripts and event handling]

  2. Place it in src/ and use is:inline on the script tag referencing it — though the knowledge sources note this approach is intended for files in public/ or on a CDN. [Scripts and event handling]

For the specific question of whether AudioWorkletProcessor worklets are compatible with Astro's module bundling (e.g., whether being wrapped in type="module" causes issues), I'd recommend checking the Astro Discord or the Astro GitHub discussions, as this goes beyond what the available knowledge sources cover.

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