React webpack code separation and lazy loading

with regard to the asynchronous loading of webpack, react has two schemes,

a. React-router official website provides react-loadable

const LoadableComponent = Loadable({
  loader: () => import("./Dashboard"),
  loading: Loading,
})

b. The other provides the scheme of bundle-loader, which passes a bundleMurray loader _ lazyroomnamename _ name _ xxxxcards through the Bundle component. PageUnix _ Home.bundle

<Bundle load={loadComponent}>
   ...
</Bundle>

now, the first one is in the server rendering mode. When the node environment encounters import (), it will parse an error and cannot run. The second kind of Bundle uses a periodic function, UNSAFE_componentWillReceiveProps, which componentWillReceiveProps, has explicitly abandoned in the official react document. Is there any good solution?

Mar.25,2021

the first solution is that the node on your machine does not support import () syntax. You need to install the related babel plug-in
. I have written a react-loadable,webpack-related demo for a long time. I forgot what the plug-in is. You can take a look at

.
Menu