Compress with gz and br on build/precompile?

[evenreven]

First of all, thank you for saving my project from the time drain that is webpack! 😉

One thing webpacker does right, is that it outputs a .gz and a .br compressed copy of every precompiled asset (excluding fonts and images), which is a very nice batteries included-type feature. Vite doesn't do this on its own. There are currently two plugins that aim to help, but they don't really work due to recent changes in vite.

But isn't it probably just as good to give the task to this gem, i.e. rake (or assets:precompile)

EDIT: I just realised browsing the webpacker source code that the compression is done by webpack and not rake. So that might pose a problem? Honestly I'm surprised vite doesn't offer this option as default.

[ElMassimo]

Hi @evenreven!

Compressing assets at build time is not as relevant as in the past—many CDNs and edge services will automatically serve compressed assets.

This is why the feature is not in core Vite.js, it would unnecessarily increase the bundle size and build size for something most users will already get from their hosting providers.

---

If you still need this behavior, there are good news though 😃

Since Vite.js is built on top of Rollup, plugins such as rollup-plugin-brotli and rollup-plugin-gzip work out of the box.
You may combine them to generate both gz and br versions of each asset, or add rollup-plugin-gzip once per format.

There's also vite-plugin-compress, but it compresses files in-place which doesn't seem to be what you are looking for.

Check out the minSize option in these plugins—very small assets are typically not worth compressing.

[evenreven]

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!

[evenreven]

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.

[ElMassimo]

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 😃

[evenreven]

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.