[Kompilasi dan perkongsian] Beberapa soalan temu bual webpack (dengan analisis jawapan)

Bercakap tentang pemahaman anda tentang Webpack

1.

pak web ialah pengikat modul statik Apabila pek web memproses aplikasi, ia secara rekursif membina graf pergantungan yang mengandungi setiap modul yang diperlukan oleh aplikasi, dan kemudian membungkus modul ini ke dalam satu atau Berbilang berkas.

Webpack adalah seperti barisan pengeluaran Ia mesti melalui satu siri proses pemprosesan (pemuat) sebelum fail sumber boleh ditukar kepada hasil output. Setiap proses pemprosesan pada barisan pengeluaran ini mempunyai satu tanggungjawab, dan terdapat kebergantungan antara pelbagai proses Hanya selepas pemprosesan semasa selesai, ia boleh diserahkan kepada proses seterusnya untuk pemprosesan.
Pemalam adalah seperti fungsi yang dimasukkan ke dalam barisan pengeluaran, yang memproses sumber pada barisan pengeluaran pada masa tertentu. Webpack akan menyiarkan acara semasa proses berjalan Pemalam hanya perlu mendengar acara yang penting dan boleh menyertai barisan pengeluaran untuk menukar operasi barisan pengeluaran.

2. Bolehkah anda bercakap tentang proses pembungkusan/proses pembinaan
3. Bolehkah anda bercakap tentang pengoptimuman operasi bahagian hadapan

Proses pembungkusan/prinsip pembungkusan Webpack/ proses pembinaan?

Proses menjalankan pek web ialah proses bersiri dan aliran kerjanya adalah untuk menyambungkan pelbagai pemalam secara bersiri.

Pelaksanaan baris perintahnpx webpackArahan pembungkusan bermula
1.初始化编译参数: Baca dan cantumkan parameter daripada fail konfigurasi dan arahan shell
2.开始编译:Mengikut langkah sebelumnya Mulakan Objek pengkompil dengan parameter, muatkan semua Pemalam yang dikonfigurasikan, dan laksanakan kaedah jalankan objek untuk memulakan penyusunan.
3. 确定入口: Cari semua fail kemasukan mengikut entri dalam konfigurasi
4. 编译模块: Dicetuskan daripada fail masukan, panggil semua Pemuat yang dikonfigurasikan untuk menterjemah modul, dan kemudian ketahui modul modul dependencies, dan kemudian ulangi langkah ini sehingga semua fail yang bergantung kepada kemasukan diterjemahkan.
5. 完成模块编译: Selepas menggunakan Loader untuk menterjemah semua modul dalam langkah 4, kandungan terjemahan akhir setiap modul dan graf kebergantungan di antara modul tersebut diperolehi.
6. 输出资源: Menurut graf pergantungan, kumpulkan Chunks yang mengandungi berbilang modul, kemudian tukar setiap Chunk menjadi fail berasingan dan tambahkannya pada senarai output, dan tentukan laluan output dan nama fail mengikut konfigurasi. , keluaran.

Dalam proses di atas, Webpack akan menyiarkan acara tertentu pada masa tertentu dan pemalam akan melaksanakan logik tertentu selepas mendengar acara yang menarik.

Ringkasan

• Permulaan: Baca dan cantumkan parameter daripada fail konfigurasi dan arahan shell, mulakan contoh Pengkompil mengikut parameter, muatkan Pemalam (daftarkan semua palam yang dikonfigurasikan- dalam), panggil kaedah jalankan contoh Pengkompil untuk memulakan penyusunan.

Objek kompilasi pengkompil mengawal kitaran hayat webpack dan tidak melaksanakan tugas tertentu, tetapi hanya melakukan beberapa kerja penjadualan. Sebagai contoh, lakukan penciptaan modul, pengumpulan kebergantungan, chunking, pembungkusan, dsb.
Selepas memanggil run, buat tika Compiltation baharu akan dibuat untuk setiap binaan, termasuk maklumat asas binaan ini
Webpack akan berada dalam Acara khusus disiarkan pada masa tertentu dan pemalam akan melaksanakan logik tertentu selepas mendengar acara yang menarik.

• Kompilasi: Dicetuskan daripada entri, panggil secara bersiri Pemuat yang sepadan untuk setiap Modul untuk menterjemah modul, kemudian ketahui modul yang bergantung kepada modul dan susun secara rekursif.

Daripada entri yang dinyatakan dalam fail konfigurasi (webpack.config.js), mula menghuraikan fail untuk membina pepohon sintaks AST

• Mengikut kebergantungan Graf dipasang ke dalam ketulan yang mengandungi berbilang modul, dan setiap ketulan ditukar menjadi fail untuk output.

Entri yang berbeza menjana ketulan yang berbeza, dan import dinamik juga akan menjana ketulannya sendiri

Peranan pemuat dalam Webpack/ Apakah pemuat?

Pemuat ialah pek web menyediakan mekanisme untuk mengendalikan berbilang format fail Oleh kerana pek web hanya mengetahui JS dan JSON, Pemuat adalah setara dengan penterjemah, yang menukar jenis sumber lain Lakukan prapemprosesan. .
digunakan untuk menukar "kod sumber" modul.
Pemuat menyokong panggilan berantai, dan susunan panggilan adalah dari kanan ke kiri. **Setiap pemuat dalam rantaian akan memproses sumber yang telah diproses sebelum ini, dan akhirnya menjadi kod js.
Menyediakan lebih banyak keupayaan kepada ekosistem JavaScript melalui fungsi prapemprosesan pemuat.

Apakah pemuat biasa?

• less-loader: Susun lebih sedikit fail ke dalam fail css

Semasa pembangunan, kami sering menggunakan kurang prapemproses untuk menulis gaya css kecekapan

• pemuat css: Tukar fail css kepada modul commonjs dan muatkannya ke dalam js Kandungan modul ialah rentetan gaya
• pemuat gaya: Cipta teg gaya. dan tukar gaya dalam js Masukkan sumber ke dalam teg dan tambahkan teg pada kepala untuk berkuat kuasa
• ts-loader: Pakej dan susun fail Typescript

Apakah peranan Plugin? /Apakah itu Plugin?

Plugin adalah lebih berkuasa untuk menyelesaikan perkara yang tidak dapat dicapai oleh pemuat, seperti pengoptimuman pembungkusan dan pemampatan kod.
Selepas Pemalam dimuatkan, fungsi yang ditakrifkan oleh pemalam akan dicetuskan pada titik masa tertentu semasa binaan webpack untuk membantu webpack melakukan sesuatu. Laksanakan sambungan berfungsi pada pek web.

Apakah Pemalam biasa

• html-webpack-plugin memproses sumber html dan mencipta HTML kosong secara lalai, secara automatik Memperkenalkan semua sumber (js/css) untuk keluaran berpakej
• mini-css-extract-plugin css berpakej ada dalam fail js ini boleh mengekstrak css secara berasingan
• clean-. webpack -plugin Setiap kali anda membungkus, pemalam CleanWebpackPlugin akan memadamkan pakej terakhir secara automatik

Apakah perintah pelaksanaan (mekanisme pemuatan) palam Webpack -dalam?

Perbezaan antara Loader dan Plugin dalam Webpack

Secara amnya
webpack adalah seperti barisan pengeluaran, melalui siri proses Hanya selepas proses (pemuat) fail sumber boleh ditukar kepada hasil keluaran. Setiap proses pemprosesan pada barisan pengeluaran ini mempunyai satu tanggungjawab, dan terdapat kebergantungan antara pelbagai proses Hanya selepas pemprosesan semasa selesai, ia boleh diserahkan kepada proses seterusnya untuk pemprosesan.
Pemalam adalah seperti fungsi yang dimasukkan ke dalam barisan pengeluaran, yang memproses sumber pada barisan pengeluaran pada masa tertentu. Webpack akan menyiarkan acara semasa proses berjalan Pemalam hanya perlu mendengar acara yang penting dan boleh menyertai barisan pengeluaran untuk menukar operasi barisan pengeluaran.

Atau gunakan ringkasan sebelumnya untuk menerangkan apakah Pemuat dan Pemalam masing-masing

Masa jalan
1. Pemuat berjalan dalam kompilasi fasa
2. Pemalam berfungsi sepanjang kitaran

Penggunaan
Pemuat: 1. Muat turun 2. Gunakan
Pemalam: 1. Muat turun 2 .Petikan 3. Apakah kaedah pengoptimuman yang telah dilakukan menggunakan

Pek Web? Apakah kaedah pengoptimuman yang ada?

Bagaimana cara menggunakan pek web untuk mengoptimumkan prestasi bahagian hadapan? Persoalannya ialah mengenai pengoptimuman persekitaran pengeluaran
Bagaimana untuk meningkatkan kelajuan binaan pek web? Persoalannya ialah mengenai pengoptimuman kelajuan binaan

gegar pokok memadam kod yang tidak digunakan untuk mengoptimumkan prestasi bahagian hadapan/meningkatkan kelajuan binaan

pokok- goncangan ialah Sejenis pembungkusan teknologi Penghapusan Kod Mati berdasarkan spesifikasi Modul ES Semasa proses pembungkusan, modul yang belum dirujuk dalam projek dikesan dan ditanda, dan modul yang belum dirujuk dipadamkan, yang menambah baik. membina kelajuan dan mengurangkan masa berjalan program.

Apakah yang perlu saya perhatikan apabila menggunakan goncangan pokok?

1. Lalai ialah mode = production dan persekitaran pengeluaran mendayakan fungsi tree-shaking secara lalai.
2. Kod modul perlu ditulis menggunakan spesifikasi ES6 kebergantungan modul ES6 adalah deterministik dan tiada kaitan dengan status masa jalan
3. Cuba jangan menulis kod dengan kesan sampingan. Sebagai contoh, anda telah menulis fungsi pelaksanaan segera, menggunakan pembolehubah luaran dalam fungsi tersebut, dsb.

Mengenai kesan sampingan

Bagaimana untuk menggunakan webpack untuk mengoptimumkan prestasi bahagian hadapan?

• Mampatan kod

Pemuatan atas permintaan

• Cicah pemisahan kod - dalam konfigurasi pengoptimuman Konfigurasi item

1 Anda boleh membungkus kod dalam node__mudules ke dalam output chunk (contohnya, menggunakan jqury?)
2. Akan menganalisis bahagian berbilang entri secara automatik untuk melihat. jika terdapat mana-mana yang biasa Fail, jika ada, akan dibungkus ke dalam bahagian yang berasingan dan tidak akan dibungkus berulang kali

• Gunakan Dll untuk sub-pembungkusan

Dalam keadaan biasa node_module akan Pakej ke dalam fail
Gunakan teknologi dll untuk membungkus rangka kerja dan perpustakaan yang tidak kerap dikemas kini secara berasingan, dan menjana sebahagian

• Gunakan penghalaan untuk malas memuatkan

Semua modul yang dirujuk oleh fungsi import() dalam kod akan dibungkus ke dalam pakej yang berasingan dan diletakkan dalam direktori tempat bongkahan disimpan. Apabila penyemak imbas menjalankan baris kod ini, ia akan meminta sumber ini secara automatik dan melaksanakan pemuatan tak segerak.

Bagaimana Webpack mengkonfigurasi kod mampatan? Apakah yang dimampatkan?

1. Konfigurasikan pemalam sebagai pemampat untuk pemampatan dalam item konfigurasi pengoptimuman.
2. Gunakan pemalam ini untuk pemampatan dalam pemalam

mampatan js: menggunakan terser-webpack-plugin
mampatan css: menggunakan optimize-css-assets -pemalam webpack-plugin

Mengalih keluar konsol, ulasan, ruang, pemisah baris, kod css yang tidak digunakan, dsb.

Bagaimana untuk meningkatkan kelajuan binaan webpack?

Idea 1: Kurangkan fail atau kod yang perlu dibina

• Penggantian panas modul HMR (Penggantian Modul Panas) hanya membina semula modul yang diubah – dalam persekitaran pembangunan
• Sempitkan skop pemprosesan: Gunakan secara munasabah kedua-dua atribut ini kecualikan: fail yang tidak perlu diproses dan termasuk: fail yang perlu diproses
• Apabila cache babel dibina untuk kali kedua, cache sebelumnya akan dibaca, hanya Bina semula fail yang diubah
• Gunakan Dll untuk sub-pembungkusan--> >
Biasanya node_module akan dibungkus ke dalam satu fail

Menggunakan teknologi dll, anda boleh membungkus rangka kerja dan perpustakaan yang tidak kerap dikemas kini secara berasingan dan menjana sebahagian

Kod sumber projek juga perlu dipecahkan, dan fail yang dibungkus boleh dibahagikan mengikut penghalaan--> Bagaimana untuk melaksanakan pemuatan asynchronous komponen dalam webpack?

Idea 2: Bina dalam pelbagai proses

Pemuat benang pakej berbilang proses dan letakkannya sebelum pemuat yang memakan masa

• Permulaan proses dan komunikasi proses mempunyai overhead, dan masa bekerja agak lama, jadi pembungkusan berbilang proses diperlukan

[Cadangan berkaitan:

tutorial video javascript

,

Video pengaturcaraan】

Atas ialah kandungan terperinci [Kompilasi dan perkongsian] Beberapa soalan temu bual webpack (dengan analisis jawapan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!