Попереднє дослідження:

Як говорить вікі 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як на WebPack в резолюції node_module .

Фактичний модуль попередньої вибірки в ідеалі повинен мати глибину не більше трьох залежностей модуля. Отже, у вашому випадку isFunction.jsце модуль з довгим ланцюжком збірки, і в ідеалі його слід попередньо завантажитиgetNative.js

Однак я підозрюю, що у вашій конфігурації є щось забавне, оскільки ваші залежності ланцюжка збірки посилаються на залежності модулів, які слід автоматично оптимізувати веб-пакетом. Я не впевнений, як ви це отримали, але в нашому випадку ми не бачимо жодних попереджень щодо довгих ланцюжків побудови в 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')повторно запустити свій профіль, щоб перевірити, чи це допомагає пришвидшити ваш загальний час для побудови.