Как оптимизировать время сборки webpack с помощью инструмента prefetchPlugin & analyse?

предыдущие исследования:

как говорит Вики webpack, можно использовать инструмент анализа для оптимизации производительности сборки:

от: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

подсказки из статистики сборки

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

вы можете создать необходимый файл JSON, запустив webpack --profile -- json > статистика.json


Я создаю файл статистики (здесь) загрузил его в инструмент analize webpack
и под подсказки tab Я сказал использовать prefetchPlugin:

от:http://webpack.github.io/analyse/#hints

длиннее строение модуля цепи

использовать предварительную выборку для повышения производительности сборки. Предварительная выборка модуля из средние цепочки.


я вырыл интернет наизнанку, чтобы найти единственную документацию, доступную на prefechPlugin, это:

от:https://webpack.github.io/docs/list-of-plugins.html#prefetchplugin

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

запрос на обычный модуль, который разрешен и построен еще раньше а требование к нему возникает. Это может повысить производительность. попробуйте профилировать постройте сначала, чтобы определить умные точки предварительной выборки.


мои вопросы:

  • Как правильно использовать prefetchPlugin?
  • каков правильный рабочий процесс для использования это с инструментом анализа?
  • как узнать, работает ли prefetchPlugin? как я могу его измерить?
  • , что значит предварительная выборка модуля из середины цепочки?

Я буду очень признателен за некоторые примеры

пожалуйста, помогите мне сделать этот вопрос ценным ресурсом для следующего разработчика, который хочет использовать prefechPlugin и инструменты анализа. Спасибо.

2 92
optimization webpack

2 ответа:

да, документация по плагину pre-fetch практически не существует. После выяснения этого для себя, его довольно простой в использовании, и нет большой гибкости к нему. В принципе, он принимает два аргумента, контекст (необязательно) и путь модуля (относительно контекста). Контекст в вашем случае будет /absolute/path/to/your/project/node_modules/react-transform-har/ предполагая, что Тильда на вашем скриншоте относится к node_modules согласно webpack разрешение node_module.

фактический модуль предварительной выборки в идеале должно быть не более трех глубоких зависимостей модулей. Так что в вашем случае isFunction.js это модуль с длинной цепочкой сборки, и в идеале он должен быть предварительно выбран в getNative.js

однако я подозреваю, что в вашей конфигурации есть что-то фанковое, потому что ваши зависимости цепочки сборки ссылаются на зависимости модулей, которые должны быть автоматически оптимизированы webpack. Я не уверен, как вы это получили, но в нашем случае мы не видим никаких предупреждений о длинных цепях сборки папки node_modules. Большинство наших длинных цепочек сборки связаны с глубоко вложенными компонентами react, которые требуют scss. т. е.:

enter image description here

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

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

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

31

середина вашей цепи, вероятно,react-transform-hmr/index.js Как это начинается примерно на половине пути. Вы могли бы попробовать PrefetchPlugin('react-transform-hmr/index') и повторно запустите свой профиль, чтобы узнать, помогает ли он ускорить общее время сборки.

2