我有一个使用react loadable SSR addon npm包实现SSR的React应用程序。
我正在按照Brotli压缩的故事教程实现Brotli和Gzip压缩。
在构建文件夹中，我可以看到.br和.gzip压缩文件。但是当我检查本地主机时，这些文件无法提供服务，我不确定是否因为我在本地开发服务器上进行检查或其他原因。
按照以下步骤操作：
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,
}),
server/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());
start.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 时却无法正常工作。
提示：我的构建文件夹位于根目录下，具有以下结构：
build/client/static/
Linux/nodeWeb应用程序上设置了CI/CD，并在一个与开发Web应用程序相同的新生产Web应用程序上遇到了此问题。在开发Web应用程序上，一切正常，.gz文件正在提供服务。在生产Web应用程序上进行停止/启动解决了我的问题。只是提供给可能遇到此问题的任何人的信息，当我不知所措时看到了这个问题。 - Sangeet Agarwal