Блог

Предположим, у нас есть три страницы, и мы хотим разделить их на разные блоки.Это может произойти, если мы добавим вручную /* 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