使用react-snap预渲染带有压缩(gzip)源代码的React应用程序

Question

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

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

如果我使用webpack mode: 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或vendor javascript文件。但是在我的构建中，只有扩展名为.min.js.gz的文件，它可以通过来自浏览器的标准请求成功处理。

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

完全可以使用react-snap和gzipped源代码吗？

Answer 1

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