使用React快照预渲染具有压缩(gzip)源的React应用程序

Question

我正在尝试用react-snap预呈现我的react应用程序。我的项目没有使用create-react-app。

// react-snap configuration
{
inlineCss: true,
source: "dist",
skipThirdPartyRequests: true
}

如果我使用webpackmode: development构建应用程序，则预渲染工作正常。但当我使用我的生产版本时，它不会。经过一段时间的调试，我发现只有当我使用compression-webpack-plugin时才会出现这个问题。当我对它发表评论时，它成功地完成了。

/// webpack.config.prod.babel.js
/* eslint-disable import/default */
import merge from 'webpack-merge';
import CompressionPlugin from 'compression-webpack-plugin';
import common from './webpack.config.common.babel';
module.exports = (env = {}) => {
return merge(common(env), {
mode: 'production',
devtool: 'nosources-source-map',
plugins: [
/* when I uncomment the use of plugin, the prerendering stops to work */
// new CompressionPlugin({
//     algorithm: 'gzip',
//     compressionOptions: {level: 9},
//     test: /.css$|.js$|.map|.svg|.woff|.woff2|.ttf|.eot$/,
//     threshold: 2 * 1024,
//     deleteOriginalAssets: true
// })
]
});
};

react snap报告的错误：pageerror at /: SyntaxError: Unexpected token '<'

我发现，它试图获得我构建的扩展名为.min.js的main或vendorjavascript文件。但在我的构建中，只有扩展名为.min.js.gz的文件，它可以通过浏览器的标准请求成功处理。

我的生产构建在没有预提交的情况下正常工作。所以我认为这是react-snap配置的问题，但我没有找到任何解决方案

是否可以使用react-snap和gzipped源？

Answer 1

有一个deleteOriginalAssets: true选项，如果没有它，CompressionPlugin应该保留原始的.min.js文件供您与react-snap一起使用。而您的服务器将继续为浏览器提供.min.js.gz文件，因为它们仍然存在。