Блог

Я довольно новичок в webpack, и у меня есть проект Vue, использующий vue cli . При анализе пакета webpack (созданного в рабочем режиме с использованием vue-cli-service build ) с помощью webpack-bundle-analyzer , я обнаружил, что один конкретный файл bn.js включается в пакет несколько раз. При запуске npm ls bn.js я обнаружил, что его родительская зависимость является webpack самой собой.

 `-- webpack@4.44.1
  `-- node-libs-browser@2.2.1
    `-- crypto-browserify@3.12.0
       -- browserify-sign@4.2.1
      |  -- bn.js@5.1.3
      |  -- browserify-rsa@4.0.1
      | | `-- bn.js@4.11.9
      |  -- elliptic@6.5.3
      | | `-- bn.js@4.11.9
      | `-- parse-asn1@5.1.6
      |   `-- asn1.js@5.4.1
      |     `-- bn.js@4.11.9
       -- create-ecdh@4.0.4
      | `-- bn.js@4.11.9
       -- diffie-hellman@5.0.3
      |  -- bn.js@4.11.9
      | `-- miller-rabin@4.0.1
      |   `-- bn.js@4.11.9
      `-- public-encrypt@4.0.3
        `-- bn.js@4.11.9
  

Итак, мой вопрос заключается в том, почему webpack включает свои собственные зависимости в окончательный пакет, когда webpack добавляется как devDependency (ранее это была зависимость, затем я изменил ее на devDepenency) в проекте?

Или, если это правильное поведение, пожалуйста, укажите мне на любые документы / ресурсы, объясняющие это поведение.

Что ж, оказывается, это была вещь npm. Ранее у меня был webpack в качестве зависимости в package.json . Затем я запустил, npm uninstall webpack --save а затем снова сделал npm install webpack --save-dev , чтобы сделать это зависимостью разработчика. Оказывается, этого было недостаточно. Я перестал получать зависимости webpack в своем bundle только после того, как я удалил свою папку node_modules, а затем снова установил npm.

Подсказка о том, как я обнаружил, в каком фреймворке была проблема. В конфигурациях Webpack я установил {node: false}, а затем создал производственный код. Webpack должен помечать платформу-нарушитель. Это может быть проблемой для кода, который изначально был написан для серверной части и ожидает, что определенные пакеты будут доступны и не отображаются в package-lock.json.

Если вы используете что-то вроде create-react-app, то вы можете использовать фреймворк вроде react-app-rewired для настройки конфигураций Webpack.

Счастливого перебора неиспользуемого кода!

Я столкнулся с аналогичной проблемой, когда я не смог найти, почему библиотека называется bn.js , эллиптический и т.д. импортировался.

Оказывается, это было потому, что мы использовали библиотеку с именем, [generate-password][1] которая импортировала crypto , и из-за этого я видел несколько модулей, которые я никогда не импортировал. Взгляните на это изображение ниже.

Если вы когда-нибудь окажетесь в такой ситуации, когда не сможете найти инструкции import для определенной библиотеки в своей кодовой базе, просто сделайте:

 npm ls libname
  

Бывают случаи, когда некоторые библиотеки импортируют эти методы внутренне и, следовательно, приводят к раздуванию пакета вашего поставщика.
В случае generate-password это был импорт модуля crypto из node. Весь модуль оказался в комплекте поставщика, потому что generate-password использовал одну функцию из модуля crypto.

Как я избежал импорта криптографии:

1. Скопировал исходный код сгенерированного пароля в мою кодовую базу в качестве утилиты.
2. Заменил функцию randomBytes из crypto lib на конкретную npm-версию randomBytes.
3. Удалите node_modules и перестройте с помощью yarn / npm.