使用react-snap预先渲染带有压缩gzip源的React应用

如何解决使用react-snap预先渲染带有压缩gzip源的React应用

我正在尝试使用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 '<'

我发现，它试图获取扩展名为main的内置vendor或.min.js javascript文件。但是在我的内置文件中，只有扩展名为.min.js.gz的文件，该文件可以通过浏览器的标准请求成功处理。

我的生产版本在未进行预渲染的情况下可以正常工作。因此，我认为这是某些react-snap配置的问题，但我没有找到任何解决方案。

完全可以使用react-snap和压缩后的源吗？

解决方法

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