Как подгружать часть React бандла только при переходе по роуту?

Question

[Евгений Заливадный]

Допустим, в моей аппке есть страница с ресурсоёмким калькулятором. Как оптимизировать сборку так, чтобы этот калькулятор собирался в отдельный файл и не подгружался вместе с основным js файлом, пока его не запросят, явно перейдя на его страницу?

Answer 1

[iBird Rose]

https://ru.reactjs.org/docs/code-splitting.html#co...
смотри раздел "Разделение кода на основе маршрутов"

Answer 2

[maxpapirovnik]

использовать next.js

Comments

[Евгений Заливадный]

nextjs.org/docs/getting-started
Все про него слышали, но мало у кого доходят ноги начать с ним работать.
У меня, например, после прчотения краткого описания осталось непонимание что он на самом деле из себя представляет, обёртку вокруг реакта, выполняющуюся на сервере, либо отдельный фреймворк, бесшовно интегрирующийся с реакт приложениями?

Answer 3

[Егор Живагин]

Вебпак сам умеет неплохо код на чанки бить. Гуглить можно по названию опции splitChunks , я думаю

Comments

[Евгений Заливадный]

webpack.js.org/plugins/split-chunks-plugin/
Для этого ведь нужно сначала сделать npm run eject и потом видоизменять конфиг, который до этого был react-scripts, верно?

[Егор Живагин]

Eugene Z, я не работал с create-react-app, но, видимо, да

[Евгений Заливадный]

Егор Живагин, как такое возможно?

[Егор Живагин]

Eugene Z, не работать с create-react-app? Довольно легко))

Answer 4

[HohSkiller]

С помощью React lazy

Comments

[Евгений Заливадный]

reactjs.org/docs/code-splitting.html#reactlazy