CODEWITHSUNDEEP
javascriptsingle-page-applicationminifyastrojs
s427
s427

Reputation: 1566

Astro - Automatically minify the JS files in the public folder during build?

I'm using Astro to build a Single Page App and optimize its assets (HTML, CSS, SVG etc). This apps contains a significant amount of JavaScript code (split into several files) that must be run "as-is" in the browser. I have stored those JS files within the public folder so that it is copied without being rewritten by Astro. Everything works.

Is there a way to ask Astro to automatically minify those JS assets during the build process? And also possibly combine them into one JS file?

Alternatively, if I move those files to the src/js folder (which I tried but ran into errors), what is the proper way to import them with Astro so they are simply included in the HTML output without interference from Astro? Again, I just want to automatically minify and combine them.

Upvotes: 0

Views: 161

Answers (1)

LoopsMcBeetle
LoopsMcBeetle

Reputation: 13

I haven't used Astro before, but does this help?

How to minify automatically JavaScript and CSS in Astro (vs-code)

It looks like Astro builds on top of Vite, so adding

 vite: {
    build: {
        minify: true,
        cssMinify: true,
    }
}

to your defineConfig in astro.config should minify all files on build.

And I think bundling can be taken care of by adding in config vals to rollupOptions in the build property

Something like

  vite: {
    build: {
        minify: true,
        cssMinify: true,
        rollupOptions: {
            output: {
                ....//
            }
        }
    }
}

It should support all the options here Rollup Configuration options allowing you to customize your build as you like.

Again, I haven't used Astro in particular before, just spitballing what might work.

Upvotes: 1

Related Questions