Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Fungsi spesifik dan informasi konfigurasi optimasi.splitChunks dapat diperiksa secara online.

Berikut adalah pengenalan singkat tentang skenario penggunaan, fungsi, dan cara menggunakannya:

1. Tidak bergunasplitChunks Sebelum melakukan subkontrak, semua modul digabungkan menjadi satu file, sehingga ketika file cukup besar dan kecepatan jaringan rata-rata, layar pertama akan dimuat dengan sangat lambat. Seperti yang ditunjukkan di bawah ini, ketiga blok ini akan dimuat bersama saat memasuki proyek untuk pertama kalinya:

2. Saat ini, kami menggunakan splitChunks untuk subkontrak dan mengkonfigurasinya di vue.config.js. Kodenya adalah sebagai berikut:

module.exports = {
  configureWebpack: {
    optimization: {
       splitChunks: {
	   chunks: 'all',
	   cacheGroups: {
	       libs: {
	         name: 'chunk-libs',
	         test: /[/]node_modules[/]/,
	         priority: 10,
	         chunks: 'initial' // only package third parties that are initially dependent
	       },
	       elementUI: {
	         name: 'chunk-elementUI', // split elementUI into a single package
	         priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
	         test: /[/]node_modules[/]_?element-ui(.*)/ // in order to adapt to cnpm
	       },
	       commons: {
	         name: 'chunk-commons',
	         test: resolve('src/components'), // can customize your rules
	         minChunks: 3, //  minimum common number
	         priority: 5,
	         reuseExistingChunk: true
	       }
	   }
     }
   }
}

cacheGroupsYasplitChunksKonfigurasi paling inti di dalam,splitChunksItu dasarnyacacheGroupsUntuk membagi modul.
Setelah konfigurasi selesai, modul akan disubpaketkan selama pengemasan. Seperti yang ditunjukkan di bawah ini:

Saat ini, ketika Anda memasuki halaman tertentu dan menggunakan modul tertentu, paket modul yang sesuai akan dimuat.Menerapkan pemuatan sesuai permintaan, yang dapat sangat mengoptimalkan masalah pemuatan lambat pada layar pertama。