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

Question

假设我们有三个页面，我们想将它们拆分成不同的块。如果我们手动添加/* 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？

Answer 1

一种方法是在区块名称注释中使用[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