Введение в кодсплиттинг (по мотивам
доклада с React Conf 2017)
Склеивать весь JS в один большой бандл — плохой тон. Если код приложения немного изменился,
пользователю придётся заново скачивать не только обновлённый код самого приложения,
но и все его зависимости (например, React, Angular и другие довольно тяжёлые библиотеки
и фреймворки).
Большой бандл нужно разделять как минимум на две части: первый файл — все зависимости
приложения, они меняются редко; второй файл — сам код приложения, он меняется
гораздо чаще. Подключаемые файлы нужно кешировать, чтобы пользователь
скачивал только изменённые файлы. При таком подходе после каждого обновления приложения
пользователю не придётся заново скачивать все те же зависимости.
Можно пойти ещё дальше и разделить приложение на файлы, содержащие логику
отдельных частей приложения. Для этого в будущем появится нативный механизм
асинхронной загрузки ES-модулей, который, тем не менее, можно использовать уже
сейчас. Это динамический import(), его особенности:
— на текущий момент stage 3;
— работает со вторым Вебпаком;
— возвращает промис;
— позволяет использовать динамические имена модулей;
– требует babel-плагин
syntax-dynamic-import.