Прошлое исследование:

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

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

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

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

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

Я сгенерировал файл статистики ( доступен здесь ), загрузил его в инструмент анализа webpack,
и на вкладке « Подсказки » я сказал использовать prefetchPlugin:

из: http://webpack.github.io/analyse/#hints

Длинные цепочки сборки модулей

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

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

из: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

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

Мои вопросы:

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

Я действительно ценю несколько примеров

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

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

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

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

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

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

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

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