Благодаря разделению кода мы можем уменьшить количество килобайт, отправляемых по сети, и потенциально повысить скорость страницы. Разделение кода - это настолько простая в использовании функция, которую следует добавить в каждое одностраничное приложение (если еще не сделали этого).

Так зачем отключать разделение кода?

Ну, конечно, не надо!

Если вы создаете приложения с рендерингом на стороне сервера в React с встроенной поддержкой Разделения кода, некоторые могут использовать инструменты с нулевой конфигурацией, такие как Razzle, который запускает два экземпляра веб-пакета, один для клиента, а другой для сервера, и он строит все для клиента и для вас на сервере.

Итак, давайте просто создадим какое-нибудь приложение с разделением кода!

После определения некоторых основных точек разделения в своем приложении вы хотите построить и посмотреть, как куски работают на данный момент:

И в проводнике файлов:

Но ждать?

Что здесь происходит?

Поскольку наше приложение разделяет пакеты как на клиенте, так и на сервере, несколько пакетов создаются и для сервера, что нам на самом деле не нужно. В итоге мы получаем несколько разделов [number]. server.js. Мы хотим:

📝 Один-единственный server.js.

Давай исправим!

Один из способов - создать еще один шаг сборки для удаления всех [number] .server.js, но это будет последний (или не вариант).

Лучшим способом было бы настроить конфигурацию веб-пакета, чтобы отключить разделение кода для сервера. Проведя небольшое исследование, я наткнулся на this gist от @ jcenturion86 и узнал о LimitChunkCountPlugin , который позволяет мне устанавливать ограничение на количество создаваемых блоков . Итак, конфиг выглядит так:

При этом будет создан один блок / пакет, и вуаля: разделение кода отключено.

Итак, в Razzle мы хотим установить его только для сервера, сделав это в razzle.config.js:

Некоторые люди сталкивались с ошибками типа или времени выполнения при таком подходе. В качестве альтернативы мы могли бы добавить эти два плагина babel: babel-plugin-dynamic-import-node для преобразования import () в отложенный require (), а затем удалить Возможности webpack с помощью babel-plugin-remove-webpack:

Оба решения решают одну и ту же проблему:

✅ Один-единственный server.js