Önceki arama:

Webpack'in wiki'sinin dediği gibi, derleme performansını optimize etmek için analiz aracını kullanmak mümkündür:

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

Derleme istatistiklerinden ipuçları

Yapınızı görselleştiren ve ayrıca derleme boyutu ve derleme performansının nasıl optimize edilebileceği konusunda bazı ipuçları sağlayan bir analiz aracı vardır .

Webpack --profile --json> stats.json komutunu çalıştırarak gerekli JSON dosyasını oluşturabilirsiniz.

İstatistik dosyasını oluşturdum ( burada mevcut ) web paketinin analiz aracına yükledim
ve İpuçları sekmesi altında prefetchPlugin'i kullanmamı söyledim:

from: http://webpack.github.io/analyse/#hints

Uzun modül yapım zincirleri

Derleme performansını artırmak için önceden getirmeyi kullanın . Zincirin ortasından bir modülü önceden getirin .

PrefechPlugin'de bulunan tek dokümantasyonu bulmak için web'i baştan aşağı kazdım:

from: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Bir gereksinim ortaya çıkmadan önce çözülen ve oluşturulan normal bir modül isteği. Bu, performansı artırabilir. Akıllı ön getirme noktalarını belirlemek için önce yapının profilini çıkarmaya çalışın .

Sorularım:

• PrefetchPlugin nasıl düzgün kullanılır?
• Analiz aracıyla kullanmak için doğru iş akışı nedir?
• PrefetchPlugin'in çalışıp çalışmadığını nasıl anlarım? nasıl ölçebilirim?
• Zincirin ortasından bir modülü önceden almak ne anlama gelir ?

Bazı örnekleri gerçekten takdir edeceğim

Lütfen bu soruyu prefechPlugin ve Analiz araçlarını kullanmak isteyen bir sonraki geliştirici için değerli bir kaynak yapmama yardım edin. Teşekkür ederim.

Evet, ön getirme eklenti dokümantasyonu neredeyse yok. Kendim için anladıktan sonra, kullanımı oldukça basit ve çok fazla esnekliği yok. Temel olarak, bağlam (isteğe bağlı) ve modül yolu (bağlama göre) olmak üzere iki bağımsız değişken alır. Sizin durumunuzdaki bağlam /absolute/path/to/your/project/node_modules/react-transform-har/, ekran node_modulesgörüntünüzdeki yaklaşık işaretinin web paketinin node_module çözünürlüğüne atıfta bulunduğunu varsayar .

Gerçek önceden getirme modülü ideal olarak en fazla üç modül bağımlılığı derinliğinde olmalıdır. Bu nedenle, sizin durumunuzda isFunction.jsuzun yapı zincirine sahip modül ve ideal olarak önceden getirilmesi gerekir.getNative.js

Bununla birlikte, yapılandırmanızda garip bir şeyler olduğundan şüpheleniyorum çünkü derleme zinciri bağımlılıklarınız, web paketi tarafından otomatik olarak optimize edilmesi gereken modül bağımlılıklarına atıfta bulunuyor. Bunu nasıl anladığından emin değilim, ama bizim durumumuzda, node_modules'de uzun inşa zincirleri hakkında herhangi bir uyarı görmüyoruz. Uzun yapılı zincirlerimizin çoğu, scss gerektiren derinlemesine iç içe geçmiş reaksiyon bileşenlerinden kaynaklanmaktadır. yani:

Ne olursa olsun, uyarıların her biri için yeni bir eklenti eklemek isteyeceksiniz, örneğin:

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

İkinci argüman, modülün göreceli konumuna bir dize olmalıdır. Umarım bu mantıklıdır.

Zincirinizin ortası, muhtemelen react-transform-hmr/index.jsyarı yolda başladığı için oradadır . PrefetchPlugin('react-transform-hmr/index')Toplam oluşturma sürenizi hızlandırmaya yardımcı olup olmadığını görmek için profilinizi yeniden çalıştırmayı deneyebilirsiniz .