Создайте отдельный bundle.js для каждого HTML (форма)

Question

В настоящее время я работаю над проектом SPA SPA, где я должен сделать несколько форм с логикой. Каждая форма имеет одинаковые компоненты и некоторые уникальные.Теперь: когда клиент выбирает одну из форм, он использует большой общий bundle.js.

Вопрос: Есть ли решение для упаковки каждого пакета (веб-страницы) в bundle.js?

Поскольку есть несколько общих компонентов, я не хочу делать проект для каждой формы, но я думаю о более тонких файлах bundle.js.

Спасибо за советы заранее!

Answer 1

Действительно возможно генерировать отдельные пакеты для каждой страницы, используя функцию динамического импорта и Webpack.

Я очень рекомендую использовать react-loadable ( https://github.com/jamiebuilds/react-loadable), чтобы разобраться со всей логикой этого, потому что есть куча ошибок, о которых вам нужно знать (например, убедитесь, что у вас есть все готовые пакеты и загружается перед рендерингом на клиенте. Или убедитесь, что вы знаете, что это за модули)

Однако следующая проблема, с которой вы можете столкнуться, заключается в том, что, хотя пакеты теперь меньше, общие биты находятся в каждом пакете. Поэтому, если пользователи переходят по нескольким URL-адресам, они должны загружать их несколько раз.

Здесь у вас есть 2 варианта:

• Либо настройте свой CommonsChunkPlugin в Webpack, чтобы модуль commons имел модули, совместно используемые более чем с x пакетами. Отличное введение здесь: ( https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318).
• Или подождите еще пару недель, пока Webpack 4 не выйдет. У них должен быть плагин, который сделает все это автоматически. ( https://github.com/webpack/webpack/milestone/15). Если вы не можете ждать, уже есть альфы, скоро должны быть бета-версии.