reactjs - React.lazy 不在生产模式下工作

Question

我有一个正在运行的 React 应用程序，我想使用 React.lazy 添加基于路由的代码拆分。

目前我的代码是，

import { PureComponent, cloneElement, Suspense, lazy } from 'react';
...
export const CartPage = lazy(() => import(/* webpackMode: "lazy", webpackPrefetch: true */ 'Route/CartPage'));
...
<Suspense fallback={ this.renderFallbackPage() }>
    <NoMatchHandler>
       <Switch>
          ...
             <Route path="/cart" exact component={ CartPage } />
          ...
       </Switch>
    </NoMatchHandler>
</Suspense>

这里只提到了相关部分，以使其紧凑。

现在的问题是，在 webpack-dev-server 中，它运行得很好，但是当我运行 npm run build 时，转到 /cart代码中断。关注后link mentioned for the error ，这是消息

Element type is invalid. Received a promise that resolves to: function i(e){var r;return
r=t.call(this,e)||this,T()(y?!e.wrapperProps[d]:!e[d],"Passing redux store in props has
been removed and does not do anything.
"+P),r.selectDerivedProps=n(),r.selectChildElement=function(){var t,e,n,r;return
function(i,o,a){return(o!==t||a!==e||r!==i)&&(t=o,e=a,r=i,n=m.a.createElement(i,Object(O.a)
({},o,{ref:a}))),n}}
(),r.indirectRenderWrappedComponent=r.indirectRenderWrappedComponent.bind(function(t)
{if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been 
called");return t}(r)),r}. Lazy element type must resolve to a class or function.

我已经做过的一些常见故障排除

在 CartPage组件，我做了export default connect(mapStateToProps, mapDispatchToProps)(CartPage);

React 版本是 16.13.1

奇怪的是，Received a promise that resolves to: function... .这是一个函数!但随后它提示 Lazy element type must resolve to a class or function .这对我来说没有任何意义。

可能有什么问题？

编辑
Route/CartPage/index.js有以下内容

import { PureComponent } from 'react';

export default class CartPage extends PureComponent {
     render() {
         return <h1>Test</h1>;
     }
}

我故意让它尽可能简单。但还是出现了同样的错误。但是参数不同。现在错误是 this

Element type is invalid. Received a promise that resolves to: function
t(){return c()(this,t),r.apply(this,arguments)}. Lazy element type 
must resolve to a class or function.

编辑 2

我从 webpack.config.js 中删除了以下几行.它开始工作了!仍然不知道为什么

const MinifyPlugin = require('babel-minify-webpack-plugin');
...    
plugins: [
    ...,
    new MinifyPlugin({
        removeConsole: false,
        removeDebugger: false
    }, {
        comments: false
    })
]
...

Answer 1

就像我在问题中提到的，babel-minify-webpack-plugin由于某种原因导致了这个问题。我的猜测是，他们将函数定义保存为字符串以节省空间，并在其逻辑中的某处使用 eval。但这只是我的猜测。

不管怎样，Github page for babel-minify-webpack-plugin说它已被弃用，所以我最终从我的项目中删除了它，并使用了 terser-webpack-plugin反而。现在似乎一切正常，构建时间也显着减少。我的建议是，避免使用 babel-minify-webpack-plugin并使用其他一些缩小插件代替