English description | Описание на русском
Webpack-npm-dependencies-analyzer
Webpack-плагин, который позволяет получить список зависимостей для всех пакетов, которые перечислены в package.json.
Установка
Установка с npm:
npm install --save-dev webpack-npm-dependencies-analyzer
Установка с yarn:
yarn add webpack-npm-dependencies-analyzer --dev
Подключение
const WebpackNpmDependenciesAnalyzer = ; // Добавляем в список плагинов, которые запустятся в production-сборкеconst config = plugins: // Путь до файла с результами. По умолчанию берется output.path filename: '../res.json' // Путь до package.json packageJsonPath: './package.json' ;
Результат
Представим, что в проекте есть react
и react-dom
. Тогда результат будет таким:
Для чего это может быть полезно?
Например, когда сплитим вендоры на более мелкие чанки. Представим, что у нас есть вот такой список зависимостей:
"dependencies": ,
Мы можем доставить каждый npm-пакет в отдельном чанке. Вот ссылка на оригинальное исследование. Но у вас может быть много пакетов. Для HTTP/2 в целом это не проблема. Если же у вас много клиентов с HTTP/1, либо ваши метрики показывают не лучший результат такого деления, можно сгруппировать npm-пакеты в чанки по какому-либо признаку.
Например, react
и react-dom
положить в чанк react
. Такой же фокус проделаем с redux
, а остальное положим просто в vendor
.
Используя split-chunks-plugin получаем вот такой конфиг:
vendor: test: /[\\/]node_modules[\\/]/ enforce: true chunks: 'all' { const packageName = modulecontext1; }
Но тут есть проблема. У react
и react-dom
есть свои зависимости. С таким конфигом они попадут в чанк vendor
. Значит, при обновлении react
и react-dom
мы можем и чанк vendor
обновить. А нам этого не хотелось бы.
Для этого и нужен webpack-npm-dependencies-analyzer
. Запустив его на prod-сборке мы получим зависимости react
, react-dom
, redux
и react-redux
. Тогда switch примет такой вид:
Теперь, обновляя пакеты, которые не попадают в vendor
не будут инвалидировать соседние чанки.