如何在 Vaadin 中对静态资源启用 brotli 压缩？

Question

我喜欢将一些CSS文件放在Vaadin的静态java资源文件夹

${project}/src/main/resources/META-INF/resources

下，这样我就可以在不同的主题之间共享它，并且可以在需要时在运行时动态加载和交换。也可以看看 https://vaadin.com/docs/latest/styling/advanced/loading-styles-dynamically

我的问题：当我现在进行生产构建时，我注意到资源文件夹中的这些 css 文件没有针对 brotli 进行压缩。似乎只有

${project}/frontend/themes

文件夹中的文件才会被拾取。知道可以做什么才能准备好这些 css 文件吗？

Answer 1

Vaadin 提供覆盖

vite.config.ts

中的 vite 配置。在那里我可以添加一个插件来压缩附加文件。

例如

vite.config.ts

：

import brotli from "rollup-plugin-brotli";
import {readdir, readFile} from 'node:fs/promises';
import {resolve} from 'node:path';

// helper function to read files recursively
async function * getFiles(dir) {
    for (const dirent of await readdir(dir, {withFileTypes: true})) {
        const res = resolve(dir, dirent.name);
        if (dirent.isDirectory()) {
            yield * getFiles(res);
        } else {
            yield res;
        }
    }
}

let targetfiles : string[] = []; 
// read the additional css file directory recursively 
// and add it as absolute file paths to the target files list.
for await (const file of getFiles(myAdditionalCSSFilesPath)) {
    if (file.endsWith(".css")) {
       targetfiles.push(file);
    }
}

const customConfig: UserConfigFn = (env) => ({
  // Here you can add custom Vite parameters
  // https://vitejs.dev/config/
    plugins: [
      brotli({
        additional : targetfiles,
      }),
    ]
});