如何禁用加载 React Devtools 后端脚本答案

【问题标题】：How to disable loading React Devtools Backend script如何禁用加载 React Devtools 后端脚本
【发布时间】：2021-02-26 10:05:02
【问题描述】：

在生产中 react_devtools_backend.js 无论如何都会加载，它会减慢我的网站在生产中的速度。如何禁用加载此反应开发工具？我正在使用 react 16.8、reactSSR、webpack 4.29、apollo

我已经用过了

 new webpack.DefinePlugin({
      '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
    }),

和

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
    for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
    }
}

和

<script>
        if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
            __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
        }
</script>

还有这个

const disableReactDevTools = (): void => {
    const noop = (): void => undefined;
    const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;

    if (typeof DEV_TOOLS === 'object') {
        for (const [key, value] of Object.entries(DEV_TOOLS)) {
            DEV_TOOLS[key] = typeof value === 'function' ? noop : null;
        }
    }
};

有什么想法吗？

【问题讨论】：

process.env.NODE_ENV !== 'production'
在所有版本中都不起作用。甚至在生产中。

标签： reactjs webpack server-side-rendering

【解决方案1】：

不确定这是否是您正在寻找的答案，但它似乎是由于安装了扩展程序而加载的。

当我启动一个隐身窗口时，它没有被加载。

【讨论】：

【解决方案2】：

它从 chrome 扩展加载：React 开发者工具你可以去网络选项卡，找到多余的脚本（点击它）。然后您可以转到“启动器”选项卡 - 在那里您会看到它的来源。

【讨论】：