禁用Webpack使用Create React App或Craco在React中创建的bundle.js捆绑文件？或者至少获得“性能”来使用源映射

Question

如何在 create React app 或 craco 中完全关闭捆绑？我正在尝试使用 craco 来完成此操作，我的 webpack 配置如下：

        configure: {
            /* Any webpack configuration options: https://webpack.js.org/configuration */
            mode: 'development',
            optimization: {
                minimize: false,
            },
            devtool: 'eval-source-map',
        },

我需要关闭捆绑，因为即使使用源映射，Firefox 中的性能分析器（瀑布）仍然显示一些来自bundle.js 的调用，这...根本没有帮助，因为一些调用来自“bundle.js 行” 3051 %3E eval:81828” - 单击时，显示“未找到行”。“性能”选项卡中的“调用树”也只显示bundle.js (eval:####) 调用。当单击这些行时，它会将我带到如下所示的代码：

我正在尝试优化 Phaser webgl 游戏，但捆绑使事情变得非常困难。任何帮助，将不胜感激。

哦，还有一件奇怪的事情 - 当查看 Phaser 调用的 Waterfall 记录时 - 它通常以奇怪的损坏的“bundle.js%20line%20####%20%3E%20eval:######”开始#" 调用，但在其下方有phaser.js 调用，并带有指向调用它的代码行的工作链接。

相关package.json依赖项：

"@craco/craco": "^7.0.0-alpha.3",
"phaser": "^3.55.2",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",

Answer 1

您可以使用裂纹配置来实现这一点。

module.exports = {
    webpack: {
        configure: {
            output: {
                filename: 'static/js/[name].js'
            },
            optimization: {
                runtimeChunk: false,
                splitChunks: {
                    chunks(chunk) {
                        return false;
                    }
                }
            }
        }
    },
    plugins: [
        {
            plugin: {
                overrideWebpackConfig: ({ webpackConfig }) => {
                    webpackConfig.plugins[5].options.filename = 'static/css/[name].css';
                    return webpackConfig;
                }
            },
            options: {}
        }
    ]
};