解决Preact Brotli构建冲突：同名文件报错问题

当前行为 #

执行preact build --brotli时，控制台输出以下警告：

‼ WARN Conflict: Multiple assets emit different content to the same filename .br

其他相关信息 #

• 项目基于preact-cli的「Default」标准模板创建
• 不带--brotli参数时，构建过程完全正常
• 可观察到JS文件尝试被打包为.br格式，但未生成带正确文件名的压缩文件

环境信息 #

Environment Info:
System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Binaries:
  Node: 18.12.1
  npm: 8.4.1
Browsers:
  Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
npmPackages:
  preact: ^10.11.2 => 10.11.2
  preact-cli: ^3.4.1 => 3.4.1
  preact-render-to-string: ^5.2.6 => 5.2.6
  preact-router: ^4.1.0 => 4.1.0

预期行为 #

所有生成的JavaScript文件旁应对应生成.js.br格式的压缩文件。

复现步骤 #

1. 执行命令：preact build --brotli
2. 查看控制台输出的警告信息

完整错误详情 #

preact build --brotli

‼ WARN Could not find sw.js in C:\... Using the default service worker.

                       bundle.*****.esm.js ⏤  91.3 kB
                    polyfills.*****.esm.js ⏤  2.18 kB
          route-REDACT.chunk.6bef3.css ⏤  236 B
       route-REDACT.chunk.*****.esm.js ⏤  849 B
        route-REDACT.chunk.*****.esm.js ⏤  1.54 kB
    route-REDACT.chunk.64635.css ⏤  138 B
 route-REDACT.chunk.*****.esm.js ⏤  641 B
   route-REDACT.chunk.*****.esm.js ⏤  294 B
                                     sw.js ⏤  10.9 kB
                                 sw-esm.js ⏤  10.9 kB
                        polyfills.77b1f.js ⏤  2.28 kB
                                index.html ⏤  1.66 kB (-19 B)
                                  200.html ⏤  1.17 kB
                          bundle.ccccc.css ⏤  5.36 kB
             route-REDACT.chunk.230c8.css ⏤  139 B
          route-REDACT.chunk.*****.esm.js ⏤  405 B
           route-REDACT.chunk.f85cc.css ⏤  571 B
                           bundle.bbbbb.js ⏤  92.7 kB
              route-REDACT.chunk.f4a3f.js ⏤  412 B
           route-REDACT.chunk.4a8c5.js ⏤  1.36 kB
            route-REDACT.chunk.56f91.js ⏤  2.14 kB
     route-REDACT.chunk.e7d3e.js ⏤  1.16 kB
       route-REDACT.chunk.68634.js ⏤  293 B

‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN asset size limit: The following asset(s) exceed the recommended size limit (195 KiB).
This can impact web performance.
Assets:
  bundle.aaaaa.esm.js (376 KiB)
  bundle.bbbbb.js (390 KiB)
‼ WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (195 KiB). This can impact web performance.
Entrypoints:
  bundle (785 KiB)
      bundle.ccccc.css
      bundle.bbbbb.js
      bundle.aaaaa.esm.js

`your text`‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN asset size limit: The following asset(s) exceed the recommended size limit (195 KiB).
This can impact web performance.
Assets:
  bundle.aaaaa.esm.js (376 KiB)
  bundle.bbbbb.js (390 KiB)
‼ WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (195 KiB). This can impact web performance.
Entrypoints:
  bundle (785 KiB)
      bundle.ccccc.css
      bundle.bbbbb.js
      bundle.aaaaa.esm.js

解决方案 #

1. 升级preact-cli版本 #

这个文件冲突是preact-cli 3.4.x版本的已知bug，后续版本已修复。执行命令升级到最新稳定版：

npm install preact-cli@latest --save-dev

2. 手动配置Brotli压缩（无法升级时） #

如果暂时不能升级，可通过自定义配置文件手动配置：

1. 项目根目录创建preact.config.js文件
2. 添加以下配置：

const CompressionPlugin = require('compression-webpack-plugin');
const zlib = require('zlib');

module.exports = (config) => {
  // 移除默认冲突的brotli插件
  config.plugins = config.plugins.filter(p => !(p instanceof CompressionPlugin && p.options.compression === 'brotliCompress'));
  
  // 添加自定义brotli压缩配置
  config.plugins.push(
    new CompressionPlugin({
      filename: '[path][base].br',
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      compressionOptions: {
        params: {
          [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
        },
      },
      threshold: 8192,
      minRatio: 0.8,
    })
  );
  
  return config;
};

3. 安装依赖：

npm install compression-webpack-plugin --save-dev

4. 重新执行preact build即可生成正确命名的.br文件

3. 临时手动压缩方案 #

如果只是需要生成压缩文件，可在正常构建后用工具手动处理：

# 全局安装brotli工具
npm install -g brotli
# 进入构建产物目录（默认是build）
cd build
# 压缩所有js、css、html文件
find . -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) -exec brotli {} \;

内容的提问来源于stack exchange，提问作者jsgbc