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

【问题标题】：react CRA - exclude debug code from build反应 CRA - 从构建中排除调试代码
【发布时间】：2018-08-29 16:11:07
【问题描述】：

有什么方法可以在生产模式下从 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;

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

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

【问题讨论】：

标签： reactjs optimization production-environment dead-code react-loadable

【解决方案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;

【讨论】：