我使用react loadable SSR addon npm package将应用程序与 SSR 实现反应。
我正在按照本教程A Tale of Brotli Compression来实现 brotli 和 gzip 压缩
我可以在 build 文件夹中看到 .br 和 .gzip 压缩文件。但是当我在 localhost 上检查时这些文件没有服务，我不确定是因为我正在检查 localhost 开发服务器还是其他东西。
遵循以下步骤：
webpackConfig/plugins.js
const CompressionPlugin = require('compression-webpack-plugin');
const BrotliPlugin = require('brotli-webpack-plugin');
new CompressionPlugin({
filename: '[path].gz[query]',
}),
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
}),
服务器/index.js
import expressStaticGzip from 'express-static-gzip';
import path from 'path';
const server = express();
server.use(cors());
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: false }));
server.use(cookieParser());
server.use(
'/static*',
// '/build/client',
expressStaticGzip(path.join(paths.clientBuild, paths.publicPath), {
enableBrotli: true,
orderPreference: ['br', 'gz'],
setHeaders(res) {
res.setHeader('Content-Encoding', 'br');
res.setHeader('Cache-Control', 'public, max-age=31536000');
},
})
);
server.use(
'/static*',
expressStaticGzip(path.join(paths.serverBuild, paths.publicPath), {
enableBrotli: true,
orderPreference: ['br', 'gz'],
setHeaders(res) {
res.setHeader('Content-Encoding', 'br');
res.setHeader('Cache-Control', 'public, max-age=31536000');
},
})
);
server.use(compression());
开始.js
// app.use('/static', express.static(paths.clientBuild));
在 start.js 中注释了上面的代码。
在浏览器中，我看到的静态 JS 和 CSS 文件大小与之前相同。
更新：
在尝试了一些事情之后，我明白我需要在 start.js 而不是 server/index.js 中进行更改
因此，为了测试事情是否按预期工作，我添加了一个中间件来测试特定的用例：
app.get('/static*', function (req, res, next) {
console.log('req buncle url', req.url)
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
res.set('Content-Type', 'text/javascript');
next();
});
上面的代码按预期工作，我在浏览器中得到了压缩的 bundle.js 文件。但同样不适用于 express-static-gzip。
仅供参考：我的构建文件夹位于根目录并具有以下结构：
构建/客户端/静态/