React.lazy 不在生产模式下工作 [英] React.lazy not working in production mode

问题描述

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

I have a react app running, and I wanted to add route based code-splitting using React.lazy to it.

目前我的代码是，

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>

为了简洁，这里只提到了相关部分.

Only mentioned the relevant parts here to make it compact.

现在的问题是，在 webpack-dev-server 中，它运行得很好，但是当我运行 npm run build 并转到 /cart 时，代码中断了.在遵循 链接提到错误，这是消息

Now the problem is, in webpack-dev-server, it runs perfectly, but when I run npm run build, and go to /cart the code breaks. After following the link mentioned for the error, this is the message

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.

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

A couple of common troubleshooting which I already did

1. 在CartPage 组件中，我做了export default connect(mapStateToProps, mapDispatchToProps)(CartPage);
2. React 版本是 16.13.1

1. In the CartPage component, I have done export default connect(mapStateToProps, mapDispatchToProps)(CartPage);
2. React version is 16.13.1

奇怪的是，收到了一个解析为:function...的承诺.这是一个函数！但随后它抱怨Lazy element type must resolve to a class or function.对我来说没有任何意义.

And the weird part is, Received a promise that resolves to: function.... It is a function! But then it complains Lazy element type must resolve to a class or function. It doesn't make any sense to me.

可能有什么问题?

编辑

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

import { PureComponent } from 'react';

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

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

I deliberately made it as simple as possible. But still the same error came. But with different parameters. Now the error is 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 中删除了以下几行.它开始工作了！仍然不知道为什么

I removed the following lines from my webpack.config.js. And it started to work! Still no idea why though

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

推荐答案

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

Like I mentioned in the question, the babel-minify-webpack-plugin was causing the issue for some reason. My guess is, they were saving function definitions as strings to save space, and using eval somewhere inside its logic. But that's just my guess.

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

Anyway, the Github page for babel-minify-webpack-plugin says that it is deprecated, so I ended up removing that from my project, and using the terser-webpack-plugin instead. Everything seems to work now, and the build time is also significantly reduced. My advice is, avoid using the babel-minify-webpack-plugin and use some other minification plugin instead

这篇关于React.lazy 不在生产模式下工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！