Vite2.0 Fallstricke

Dies ist eine Ergänzung zum vorherigen Artikel. Darin werden einige im Konfigurationsprojekt aufgetretene Probleme beschrieben. Ich hoffe, es kann allen helfen ~

Optimierung des Vite-Projektaufbaus

Das Routing des dynamischen Imports erfolgt über Rollup. Die dynamisch importierten Dateien generieren asynchrone Chunk-Dateien, die bei Bedarf geladen werden, wenn wir auf das Projekt zugreifen. Dadurch wird die Ladegeschwindigkeit der Anwendung erheblich verbessert.

Home aus '@/views/home/index.vue' importieren
Layout aus '@/components/Layout.vue' importieren

const routes: Array<RouteRecordRaw> = [
  {
    Weg: '/',
    Komponente: Layout,
    Umleitung: '/home',
    Kinder: [
      {
        Pfad: '/home',
        Name: "Home",
        Komponente: Home,
        meta: { title: 'Homepage' }
      },
      {
        Pfad: '/about',
        Name: 'Über',
        meta: { Titel: 'Über', keepAlive: true },
        Komponente: () => import('@/views/about/index.vue')
      },
      {
        Pfad: '/Quadrat',
        Name: 'Quadrat',
        meta: { Titel: 'Komponentenquadrat', keepAlive: true },
        Komponente: () => import('@/views/square/index.vue')
      }
    ]
  }
]
const router = createRouter({
  Verlauf: process.env.NODE_ENV === „Entwicklung“
    ? erstelleWebHistory(Prozess.Umgebung.BASE_URL)
    : erstelleWebHashHistory(process.env.BASE_URL),
  Routen,
    scrollVerhalten(bis, von, gespeichertePosition) {
      if (gespeichertePosition) {
        // return savedPosition wird nur ausgelöst, wenn der Hintergrund weitergeleitet wird
      } anders {
        return { top: 0, Verhalten: "glatt" }
      }
    }
  })

router.beforeEach((bis, von, weiter) => {
  // Sie können einige Überprüfungen der Berechtigungen durchführen, wenn (zu.Pfad !== von.Pfad) {
    document.title = `Star Music Circle | ${to.meta.title}`
  }
  nächste()
})

router.onError((Fehler) => {
  const pattern = /Laden von Block (\d)+ fehlgeschlagen/g
  const isChunkLoadFailed = Fehler.Nachricht.Match(Muster)
  wenn (isChunkLoadFailed) {
    Standort.neu laden()
  }
})

Standardrouter exportieren

Der obige Code ist eine Router-Datei eines von Vite erstellten Vue-Projekts unter Verwendung von [email protected]. Vue Router unterstützt standardmäßig dynamischen Import, was bedeutet, dass Sie dynamischen Import anstelle von statischem Import verwenden können. Sie können im Code sehen, dass sowohl die Infoseite als auch die quadratische Seite dynamisch importiert werden.

Zum dynamischen Import gibt es bei MDN eine sehr ausführliche Einführung: Portal

Nachdem das Rollup erstellt wurde, generieren die dynamisch importierten Dateien asynchrone Chunk-Dateien, die bei Bedarf geladen werden, wenn wir auf das Projekt zugreifen, wodurch die Ladegeschwindigkeit der Anwendung erheblich verbessert wird.

Die Fallstricke, die mir beim dynamischen Importieren von Routen im Vite-Projekt begegnet sind:

Der @/-Alias ​​wird zur Build-Zeit nicht unterstützt. Während des Builds kann der Rollup-Build die entsprechende Datei gemäß dem konfigurierten Alias ​​nicht finden, sodass während des Build-Prozesses ein Fehler gemeldet wird

Lösung:

• Zuerst dachte ich, es läge ein Problem mit dem Referenzpfad, also habe ich mehrere Referenzmethoden ausprobiert und schließlich war eine davon erfolgreich! component: () => import('/src/views/about/index.vue') Nach der Änderung auf einen absoluten Pfad kann es normal gestartet werden
• Aktualisieren Sie die Vite-Version. Ursprünglich war es [email protected], die keine Aliase unterstützt. Es wird nach dem Upgrade auf [email protected] unterstützt. Ich vermute, dass 2.0 gerade erst veröffentlicht wurde, daher ist es verständlich, dass es nicht sofort vollständig geschrieben ist.
• Verwenden der Methode import.meta.glob
  

Einige Fehler und Warnungen, die ich bei der Konfiguration festgestellt habe

Warnung: „import.meta“ ist in der konfigurierten Zielumgebung („es2019“) nicht verfügbar und wird leer sein

Diese Warnung wird angezeigt, wenn das Vite-Konfigurationselement esbuild.target „es2019“ ist. Zeigt an, dass die import.meta-API in diesem Fall nicht unterstützt wird

[vite] Interner Serverfehler: Ungültige Glob-Importsyntax: Muster muss mit "." oder "/" beginnen (relativ zum Projektstamm)

Der Parameter in import.meta.glob() muss mit "." oder "/" beginnen, um relativ zum Stammverzeichnis zu passen.

Der endgültige Schreibcode:

  Layout aus '@/components/Layout.vue' importieren

  const module = import.meta.glob('/src/views/*/index.vue')

  const routes: Array<RouteRecordRaw> = [
    {
      Weg: '/',
      Komponente: Layout,
      Umleitung: '/home',
      Kinder: [
        {
          Pfad: '/home',
          Name: "Home",
          Komponente: Module ['/src/views/home/index.vue'],
          meta: { title: 'Homepage' }
        },
        {
          Pfad: '/about',
          Name: 'Über',
          meta: { Titel: 'Über', keepAlive: true },
          Komponente: Module['/src/views/about/index.vue']
        },
        {
          Pfad: '/Quadrat',
          Name: 'Quadrat',
          meta: { Titel: 'Komponentenquadrat', keepAlive: true },
          Komponente: Module ['/src/views/square/index.vue']
        }
      ]
    }
  ]

Durch die Verwendung der Methode import.meta.glob können wir das Routing über die Backend-Schnittstelle konfigurieren und Berechtigungen auf kontrollierbare Weise steuern. Wenn die Routendaten von der Schnittstelle zurückgegeben werden, generieren Komponenten, die nicht im Autoritätsbereich liegen, überhaupt keine Routing-Elemente, was zweifellos die Stärke der Autoritätskontrolle erhöht.

Konfigurieren Sie build.rollupOptions.manualChunks, um node_modules-Dateien in separaten Paketen zu laden

manuelleChunks(id) {
  wenn (id.includes('node_modules') && id.includes('prime')) {
    returniere 'prime'
  } sonst wenn (id.includes('node_modules') und id.includes('vue')) {
    gib 'vue' zurück
  } sonst wenn (id.includes('node_modules')) {
    Rückgabe 'Lieferant'
  }
}

Wenn dies nicht konfiguriert ist, packt vite das node_modules-Paket in eine große asynchrone vendor.js-Datei. Wenn die Datei zu groß ist, erhöht dies zweifellos die Blockierungszeit beim Rendern der Seite. Und es ist nicht förderlich für die Seiten-Cache-Optimierung.
In der obigen Konfiguration habe ich das UI-Framework (primeVue) und Vue-bezogene Pakete jeweils in eine Datei gepackt. Dies reduziert nicht nur die Größe jeder abhängigen Datei, sondern kann auch den Cache des Projekts optimieren. Abhängige Pakete wie diese Basisbibliotheken werden seltener aktualisiert.
In Kombination mit der Konfiguration der Dateicache-Richtlinie auf dem Server müssen Benutzer diese abhängigen Dateien nur beim ersten Zugriff auf die Site laden. Bei nachfolgenden Besuchen können sie sie auch direkt aus dem Cache lesen. Das Reduzieren der abhängigen Dateicodes kann die Leistung des Projekts erheblich verbessern.

Darüber hinaus wird beim Erstellen von vite automatisch die folgende HTML-Datei generiert

  <!DOCTYPE html>
  <html lang="de">
    <Kopf>
      <meta charset="UTF-8" />
      <link rel="icon" href="/favicon.ico" rel="externes nofollow" />
      <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
      <title>Mein Projekt</title>
    <script type="module" crossorigin src="/assets/index.e3627129.js"></script>
    <link rel="modulepreload" href="/js/vue/vue.a1ee204f.js" rel="externes nofollow" >
    <link rel="modulepreload" href="/js/prime/prime.eb4bfea6.js" rel="externes nofollow" >
    <link rel="stylesheet" href="/assets/prime.296674d4.css" rel="externes Nofollow" >
    <link rel="stylesheet" href="/assets/index.289426b3.css" rel="externes Nofollow" >
  </Kopf>
    <Text>
      <div id="app"></div>
      
    </body>
  </html>

Der Link-Tag mit dem Attribut rel="modulepreload" kann native Module vorab laden, um sicherzustellen, dass einige Dateien nicht bis zur Ausführung auf das Laden warten müssen, was auch die Seitenleistung verbessern kann.

Verarbeitung von Bildressourcendateien. Assets, die kleiner sind als der Wert der Option „assetsInlineLimit“, werden als Base64-Daten-URLs integriert und zusammen mit der Datei verpackt, die darauf verweist. Dies reduziert die Anzahl der Dateianforderungen und verbessert die Projektleistung

andere

Platzieren Sie die asynchronen Chunks, die von dynamisch importierten Dateien generiert werden, in entsprechenden Ordnern oder passen Sie die Chunk-Namen an.

Hallo, nachdem ich lange die Rollup-Dokumentation geprüft und es eine Zeit lang selbst ausprobiert habe, ist es mir endlich gelungen. Siehe folgende Konfiguration:

exportiere Standard-DefineConfig({
  bauen: {
    assetDir: "Vermögenswerte",
    Rollup-Optionen: {
      Ausgabe: {
        // eslint-deaktivieren-nächste-Zeile @typescript-eslint/no-explicit-any
        chunkFileNames: (chunkInfo: beliebig) => {
          chunkInfo.facadeModuleId.split('/') : []
          const Dateiname = Fassadenmodul-ID[Fassadenmodul-ID.Länge - 2] || '[Name]'
          gibt `js/${fileName}/[name].[hash].js` zurück
        },
      }
    }
  }
})

vite-Konfiguration übergibt globale SCSS-Variablen

Die Konfiguration ist wie folgt

exportiere Standard-DefineConfig({
  css: {
    Präprozessoroptionen: {
      scss: {
        zusätzliche Daten: '@import "./src/styles/variables";'
      }
    }
  },
})

Beachten Sie auch, dass es bei den Konfigurationselementen zwischen den verschiedenen Versionen von vite einige Unterschiede gibt. Wenn Sie also beim Konfigurieren des Projekts weiterhin Probleme haben, obwohl Sie es vollständig gemäß der Dokumentation konfiguriert haben, sollten Sie prüfen, ob dies durch den Unterschied zwischen Ihrer Version und der Version in der Dokumentation verursacht wird.

endlich

Ich möchte mein konfiguriertes vite2.0+Vue3.0-Projekt teilen: Portal, ein Projekt, das zum Testen verwendet wurde. Wenn etwas falsch ist, korrigieren Sie mich bitte!

Dies ist das Ende dieses Artikels über die Fallstricke von vite2.0. Weitere verwandte Fallstricke von vite2.0 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!