React.lazy 不在生产模式下工作答案

【问题标题】：React.lazy not working in production modeReact.lazy 不在生产模式下工作
【发布时间】：2020-09-18 04:17:37
【问题描述】：

我有一个正在运行的 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
    })
]
...

【问题讨论】：

您找到解决方案了吗？我有同样的问题
没有。奇怪的是，我安装了一个新的 React，而 React.lazy 在那里工作得很好。不确定我在项目中做错了什么
请告诉我们Route/CartPage代码
你应该在这个文件中使用default export
可以分享CartPage文件的代码吗？

标签： reactjs webpack redux code-splitting

【解决方案1】：

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

无论如何，Github page for babel-minify-webpack-plugin 表示它已被弃用，所以我最终从我的项目中删除了它，并改用了terser-webpack-plugin。现在似乎一切正常，构建时间也显着减少。我的建议是，避免使用 babel-minify-webpack-plugin 并改用其他一些缩小插件

【讨论】：