ReactJS-通过延迟加载自动创建块

如何解决ReactJS-通过延迟加载自动创建块

假设我们有三个页面，并且希望将它们分成不同的块。如果我们手动添加/* webpackChunkName: "chunkName" */，可能会发生这种情况。

const Home = lazy(() => import(/* webpackChunkName: "HomePage" */ "../../pages/Home"));
const Login = lazy(() => import(/* webpackChunkName: "Login" */ "../../pages/Login"));
const Register = lazy(() => import(/* webpackChunkName: "Register" */ "../../pages/Register"));

是否可以使我们的生活更轻松并避免一直使用webpackChunkName？

解决方法

一种方法是在块名称注释中使用[request]占位符来动态设置块名称。

您可以创建一个函数，该函数将调用import()函数并使用[request]占位符设置动态块名称。

然后，使用此功能延迟导入组件。

这里是一个例子。

const lazyImport = path => {
  return import(/* webpackChunkName: "[request]" */ `${path}`);
};

const Home = React.lazy(() => lazyImport("../../pages/Home"));
// Chunk name will be pages-Home.chunk.js