0

我正在尝试使用 .prerender 我的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带有扩展名的 javascript 文件.min.js。但是在我的构建中，只有带有扩展名的文件.min.js.gz，它可以通过来自浏览器的标准请求成功处理。

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

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

4

1 回答 1

1

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

于 2020-11-04T06:26:50.917 回答