Как правильно обрабатывать внешние зависимости при сборке npm библиотеки

Рейтинг: 0Ответов: 1Опубликовано: 12.06.2023

Делаю библиотеку ( ui компонент react, scss, но не суть ) в частности интересует вопрос как правильно обрабатывать при сборке внешние зависимости, которые указаны в блоке

"dependencies": {
    "@uiw/react-md-editor": "^3.23.3",
    "event-target-shim": "^6.0.2",
    "normalize.css": "^8.0.1",
    "react-select": "^5.7.2",
    "react-toastify": "^9.0.0"
  },

c «"peerDependencies"» вроде как все понятно, при сборке они в конечный бандл не попадают а просто остается импорт либы, которая уже буддет браться из приложения потребителя этой либы и сборка ее будет леажать на соввести сборщика этого конечного приложения потребителя

А вот с «dependencies» не совсем понятно, т.к. vite(lib mod) по умолчанию такие зависимости кидает в бандл, а rullup отдельно без vite такие зависимости обрабатывает аналогично peerDependencies чет я вот не могу понять как все таки надо dependencies бандлить что бы не раздувать бандл конечного приложения?

javascript node-modules npm vite package.json
Источник: Stack Overflow на русском

Ответы

▲ 0

При сборке npm библиотеки важно правильно обрабатывать внешние зависимости из блока "dependencies", чтобы избежать раздувания размера конечного бандла приложения, которое будет использовать твою библиотеку.

Если ты используешь инструменты сборки типа Vite или Rollup, есть несколько подходов, которые можно применить.

External: Внешние зависимости могут быть объявлены как внешние модули и не включаться в итоготый бандл. Вместо этого, они ожидаются во время тыполнения от приложения-потребителя. В Vite это можно настроить с помощью параметра rollupOptions.external в файле vite.config.js:

module.exports = {
  rollupOptions: {
    external: ['@uiw/react-md-editor', 'event-target-shim', 'normalize.css', 'react-select', 'react-toastify'],
  },
};

Peer Dependency: Если ты хочешь, чтобы зависимости были доступны для использования во время разработки и компиляции твоей библиотеки, но не включались в конечный бандл, ты можешь указать их как peerDependencies. Это гарантирует, что эти зависимости уже установлены в приложении-потребителе, которое будет использовать библиотеку. В этом случае, импорты зависимостей в твой библиотеке останутся, но сборка приложения-потребителя будет отвечать за их обработку.

Оптимизация и код-сплиттинг: ты также можешь использовать оптимизацию и код-сплиттинг, предоставляемые инструментами сборки, чтобы сократить размер бандла. Например, в Vite настроить динамический импорт для библиотеки, чтобы она была загружена только по требованию. Это поможет уменьшить размер инициального бандла и улучшить производительность приложения. Вот пример:

import('@uiw/react-md-editor').then((module) => {
  // Используйте модуль из @uiw/react-md-editor
});