Bagaimana cara mengoptimalkan waktu pembuatan webpack menggunakan alat prefetchPlugin & analisis?

96

Penelitian sebelumnya:

Seperti yang dikatakan wiki webpack, Anda dapat menggunakan alat analisis untuk mengoptimalkan kinerja build:

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

Petunjuk dari statistik build

Ada alat analisis yang memvisualisasikan build Anda dan juga memberikan beberapa petunjuk bagaimana ukuran build dan performa build dapat dioptimalkan .

Anda dapat membuat file JSON yang diperlukan dengan menjalankan webpack --profile --json> stats.json


Saya menghasilkan file statistik ( tersedia di sini ) mengunggahnya ke alat analisis webpack
dan di bawah tab Petunjuk saya diberitahu untuk menggunakan prefetchPlugin:

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

Rantai build modul panjang

Gunakan prefetching untuk meningkatkan performa build. Ambil dulu modul dari tengah rantai .


Saya menggali web luar dalam untuk menemukan satu-satunya dokumentasi yang tersedia di prefechPlugin adalah ini:

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

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Permintaan untuk modul normal, yang diselesaikan dan dibangun bahkan sebelum kebutuhan untuk itu terjadi. Ini dapat meningkatkan kinerja. Coba buat profil build terlebih dahulu untuk menentukan titik pemuatan awal yang cerdas .


Pertanyaan saya:

  • Bagaimana cara menggunakan prefetchPlugin dengan benar?
  • Alur kerja apa yang tepat untuk digunakan dengan alat Analisis?
  • Bagaimana cara mengetahui apakah prefetchPlugin berfungsi? bagaimana saya bisa mengukurnya?
  • Apa artinya mengambil modul dari tengah rantai ?

Saya akan sangat menghargai beberapa contoh

Tolong bantu saya membuat pertanyaan ini menjadi sumber yang berharga bagi pengembang berikutnya yang ingin menggunakan prefechPlugin dan alat Analisis. Terima kasih.

optimization webpack Asaf Katz
sumber
1
Bagaimana kita bisa menggunakan alat penganalisis statistik? Ketika saya mengklik unggah, tidak ada yang terjadi, dan tidak ada tombol kirim. Hanya "gunakan contoh"
TetraDev
Keluaran konsol mengatakan Uncaught SyntaxError: Unexpected token r in JSON at position 0saat mengunggah stats.json
TetraDev
1
@TetraDev ini berarti Anda mengalami kesalahan dalam file JSON Anda. Coba buka dengan editor teks dan lihat apakah ada sesuatu yang tidak terlihat seperti JSON yang valid. (Saya memiliki masalah yang sama dengan keluaran debug dari Webpack di baris pertama).
maufl
Dokumen memiliki > stats.jsontetapi menulis beberapa baris tambahan di atas yang merusak pengurai
Alex Riina

Jawaban:

35

Ya, Dokumentasi plugin pre-fetch hampir tidak ada. Setelah memahaminya sendiri, ini cukup mudah digunakan, dan tidak ada banyak fleksibilitas untuk itu. Pada dasarnya, dibutuhkan dua argumen, konteks (opsional) dan jalur modul (relatif terhadap konteks). Konteks dalam kasus Anda akan /absolute/path/to/your/project/node_modules/react-transform-har/mengasumsikan bahwa tilde di tangkapan layar Anda mengacu pada resolusi node_modulenode_modules webpack .

Idealnya, modul prefetch sebenarnya tidak lebih dari tiga dependensi modul. Jadi, dalam kasus Anda isFunction.jsadalah modul dengan build chain yang panjang dan idealnya sudah diambil sebelumnya digetNative.js

Namun, saya curiga ada sesuatu yang funky dalam konfigurasi Anda, karena dependensi build chain Anda mengacu pada dependensi modul, yang seharusnya dioptimalkan secara otomatis oleh webpack. Saya tidak yakin bagaimana Anda mendapatkannya, tetapi dalam kasus kami, kami tidak melihat peringatan apa pun tentang rantai build yang panjang di node_modules. Sebagian besar build chain kami yang panjang disebabkan oleh komponen react bersarang yang membutuhkan scss. yaitu:

masukkan deskripsi gambar di sini

Terlepas dari itu, Anda ingin menambahkan plugin baru untuk setiap peringatan, seperti:

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

Argumen kedua harus berupa string ke lokasi relatif modul. Semoga ini masuk akal.

4m1r
sumber
Saya mencoba untuk menurunkan beberapa build saya dan bahkan setelah penjelasannya saya masih sangat bingung tentang cara menggunakan alat ini. Dapatkah Anda memperluas arti sebenarnya dari 'konteks' dan apa yang dibutuhkan setiap parameter dalam prefetch? Saya tidak yakin apa sebenarnya yang dilakukan di plugin
ThrowsException
Sudah lama tidak menggunakan ini, tapi mungkin masih sama. Hanya boleh ada dua argumen untuk plugin. Satu, konteks, yang merupakan konteks modul jadi misalnya app/components/module.jsxakan 'app'dan saya pikir yang kedua harus lokasi relatif, yaitu'components/module.jsx'
4m1r
1
Oke, saya akan lulus lagi. Saya sudah mencoba setidaknya dua lusin pengaturan PrefetchPlugin dan sepertinya tidak ada yang menghapusnya dari rantai build panjang saya. Saya mengalami masalah yang sama dengan poster di mana saya memiliki modul node yang sebenarnya ada dalam rantai build panjang saya dan saya mencoba untuk mengambilnya terlebih dahulu. Saya tidak tahu apakah mungkin webpack tidak tahu bagaimana menangani situasi ini.
ThrowsException
Saya menggunakan plugin prefetch untuk meningkatkan kinerja proyek saya yang menggunakan handlebars.js. Inilah sintaks yang berhasil untuk saya:new webpack.PrefetchPlugin(__dirname + "/node_modules", "handlebars/runtime.js"),
Andre
Selain itu, jika hal yang Anda ingin prefetch bukanlah sebuah paket (yaitu tidak ada dalam node_modules), Anda cukup meneruskan string permintaan . Perhatikan bahwa argumen pertama, konteks , adalah opsional.
natchiketa
2

Bagian tengah rantai Anda mungkin ada react-transform-hmr/index.jskarena dimulai sekitar setengah jalan. Anda dapat mencoba PrefetchPlugin('react-transform-hmr/index')dan menjalankan kembali profil Anda untuk melihat apakah itu membantu mempercepat total waktu Anda untuk membangun.

Aaron Jensen
sumber
hanya lebih buruk .. dari 2351ms hingga 2361ms, itu juga menimbulkan kesalahanEntry module not found: Error: Cannot resolve module 'react-transform-hmr/index' in /Users/asafkatz/Development/my-react-builerplate
Asaf Katz
4
yah, perbedaan 10ms tidak lebih buruk, perbedaannya tidak signifikan secara statistik. Saya akan bermain-main dengan hal yang berbeda, react-transform-hmratau react-transform-hmr/index.jsdll.
Aaron Jensen