反应 CRA - 从构建中排除调试代码

Question

在生产模式下，有什么方法可以从if语句中完全排除某些代码？

我试图做这样的事情：

import React from "react";
import Loadable from 'react-loadable';
function Loading() {
return <div></div>;
}
let LoadableDebugBar;
if (process.env.NODE_ENV !== 'production') {
LoadableDebug = Loadable({
loader: () => import('./Debug'),
loading: Loading
});
} else{
LoadableDebug = Loadable({
loader: () => import('./BlankComponent'),
loading: Loading
});
}
export default LoadableDebug;

问题是，当构建应用程序时，您仍然可以从调试组件中看到源代码的想法是完全剥离它，因为在生产模式下组件从未在使用中。

即使我延迟加载它仍然不满足我，因为我想完全摆脱它，以便我可以隐藏所有调试功能。

Answer 1

用这种方式解决了这个问题：在我的构建代码中，不再有调试组件。

import React, { Component } from 'react';
let DebugBarContainer;
if (process.env.NODE_ENV !== 'production') {
DebugBarContainer = require('../../containers/DebugBarContainer').default;
} else {
DebugBarContainer = () => null;
}
class App extends Component {
render() {
return (
<DebugBarContainer />
</div>
);
}
}
export default App;