Technologieaustausch

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

Die spezifischen Funktionen und Konfigurationsinformationen von optimiert.splitChunks können online überprüft werden.

Hier finden Sie eine kurze Einführung in die Verwendungsszenarien, Funktionen und Verwendung:

1. NutzlossplitChunks Vor der Unterauftragsvergabe werden alle Module in einer Datei zusammengefasst. Wenn die Datei also groß genug und die Netzwerkgeschwindigkeit durchschnittlich ist, wird der erste Bildschirm sehr langsam geladen. Wie unten gezeigt, werden diese drei Blöcke zusammen geladen, wenn Sie das Projekt zum ersten Mal betreten:

2. Zu diesem Zeitpunkt verwenden wir splitChunks für die Unterauftragsvergabe und konfigurieren es in vue.config.js. Der Code lautet wie folgt:

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
	       }
	   }
     }
   }
}

cacheGroupsJasplitChunksDie wichtigste Konfiguration im Inneren,splitChunksDas ist die BasiscacheGroupsUm das Modul zu teilen.
Nach Abschluss der Konfiguration wird das Modul beim Packen in Unterpakete unterteilt. Wie nachfolgend dargestellt:

Wenn Sie zu diesem Zeitpunkt eine bestimmte Seite aufrufen und ein bestimmtes Modul verwenden, wird das entsprechende Modulpaket geladen.Implementieren Sie das Laden bei Bedarf, wodurch das Problem des langsamen Ladens des ersten Bildschirms erheblich optimiert werden kann。