Compress with gz and br on build/precompile? #101

Thanks for the reply! I actually really want this behaviour, because I'm hosting all my assets myself and my web server (Caddy) can only serve Brotli for precompiled assets (the Caddy devs don't want to use Brotli for on the fly serving of content because the Go implementation of Brotli isn't efficient enough, and from what I can gather from researching this, a lot of people dislike using Brotli for on the fly compression because it's quite heavy on the computing power compared to gzip). I'm pretty sure this scenario is one reason why webpacker does it by default - js and css assets are served to every user, so compressing on precompile is low hanging fruit.

I will research the rollup plugins. I'm quite new to Vite, so I didn't look in that direction. Thank you so much!

I got it to work, just had to fight a little bit with the otherwise very cool Caddy server (support for brotli sidecar files is new).

Would the rollup/vite config lines I ended up with be relevant to put in the vite_ruby documentation? I can write a paragraph or two if you're interested. Since both Sprockets' and Webpacker's default behaviour is to create compressed sidecar files, I imagine quite a few people want them.

Glad that it's working!

Sure, please share your config here so that anyone googling for this can easily find it, and I can also find a place in the docs to share it as well 😃

Here! Use whatever you think is relevant of the text bit:

Serving precompressed "sidecar" assets

The asset pipeline (Sprockets) and Webpacker will generate gzip-compressed copies when rails assets:precompile is run (so-called sidecar files), so that the server doesn't have to compress static assets on the fly. Webpacker also creates an extra brotli-compressed file.

Vite doesn't do this by default, but it's easy to leverage Rollup (used by Vite during the build step) to accomplish it anyway.

First, install the rollup plugin with yarn add -D rollup-plugin-gzip.

Then adapt your vite config with the help of this example:

// vite.config.js
import { defineConfig } from "vite";
import RubyPlugin from "vite-plugin-ruby";
import { brotliCompressSync } from "zlib";
import gzipPlugin from "rollup-plugin-gzip";

export default defineConfig({
  plugins: [
    RubyPlugin(),
    // Create gzip copies of relevant assets
    gzipPlugin(),
    // Create brotli copies of relevant assets
    gzipPlugin({
      customCompression: (content) => brotliCompressSync(Buffer.from(content)),
      fileName: ".br",
    }),
  ],
});

Note: your server (whether it's nginx, caddy or other) needs to be set up for serving assets this way.