Важная часть создания библиотек компонентов с помощью React - убедиться, что они легкие и оптимизированные.
Например, я часто использую Lodash в своих приложениях. Я использую только несколько функций, которые может предложить Lodash. Когда я собираю свое приложение для производственного выпуска, я не хочу, чтобы в него втягивалась вся библиотека 1,14 Мбайт.
Встряхивание дерева, или «удаление мертвого кода», - это метод, позволяющий удалить любой неиспользуемый код из библиотеки.
Чтобы сотрясение дерева работало, необходимо выполнить несколько вещей.
- Целевая библиотека должна быть написана с синтаксисом ES5 или выше.
- Целевой библиотеке требуется, чтобы в package.json для sideEffects было установлено значение false.
- Вам необходимо использовать поддерживающий его сборщик JavaScript, в моем случае - Webpack.
В оставшейся части статьи я рассмотрю пример того, как я реализовал встряхивание дерева в библиотеке компонентов, которую я создал для Monorepo.
В моем Monorepo есть пакет под названием components. Здесь хранятся все мои пользовательские компоненты.
У меня есть упрощенный компонент кнопки, написанный на синтаксисе ES6.
В моей библиотеке компонентов есть собственный package.json с параметром sideEffects, установленным на false.
Установка для sideEffects значения false, по сути, дает нам разрешение Webpack выполнять разбиение кода на наши модули.
Приложение, которое импортирует мою кнопку, использует для связывания Webpack.
Webpack позаботится об удалении неиспользуемого кода, когда я свяжу свое приложение.
Если я решу не импортировать компонент кнопки в основное приложение, скомпилировать приложение и выполнить поиск в файле bundle.js, я не увижу никаких ссылок на компонент кнопки.
Больше контента на plainenglish.io
