Vue.js: combinazione e pacchettizzazione di componenti multipli con webpack e caricamento su richiesta

Premessa

Con l'aggiornamento dei dispositivi mobili e l'aumento della velocità di rete, le richieste degli utenti per le applicazioni web diventano sempre più elevate, e le funzionalità che devono fornire le applicazioni web diventano sempre più numerose. L'aumento delle funzionalità porta alla conseguenza più diretta che i file di risorse diventano sempre più grandi. Per mantenere il crescente codice client, è stata proposta la concezione di modularizzazione per organizzare il codice. webpack, come strumento di packaging modularizzato, diventa sempre più popolare con la diffusione di react.

Quando si sviluppa un progetto con Vue, per utilizzare le sue caratteristiche dei componenti singoli, è necessario utilizzare webpack o browserify per il packaging, per le applicazioni di grandi dimensioni, per migliorare la velocità di caricamento, è possibile utilizzare la funzione code split di webpack per il packaging, generando moduli più piccoli e caricandoli su necessità, come descritto nei documenti di Vue e di vue-router:Componenti Asincroni,Caricamento Lento.

La code split di webpack può essere implementata utilizzando il sintassi speciale require.ensure di webpack o utilizzando la sintassi callback-require dello stile AMD, prendendo ad esempio la sintassi callback-require dello stile AMD -

Registrazione globale di Async Component:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
Vue.component('async-webpack-example', myAsyncComponent)

Registrazione locale di Async Component, contenuto dello script del componente singolo:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
// Estensione delle opzioni dell'istanza Vue, altre opzioni omesse
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

Quando si utilizza vue-router, per implementare il caricamento asincrono dei componenti sotto diverse rotte, è possibile impostare lo stesso metodo per l'attributo component delle voci di mappatura delle rotte.

Ecco che myAsyncComponent viene definito come una funzione factory, che viene eseguita solo quando necessario con il parametro della funzione di risoluzione definita da Vue o vue-router per analizzare le opzioni del componente (sì, ci sono due funzioni diverse per analizzare le opzioni del componente in Vue e vue-router) come funzione callback-require (il parametro della funzione di risoluzione è l'opzione del componente), in modo che, durante l'esecuzione dello script di packaging, il file my-async-component.vue venga impacchettato in un file separato e venga caricato solo quando il componente viene utilizzato.

Quando ci sono molti componenti che devono essere caricati asincronamente, verranno generati più file singoli. Anche se ogni file è più piccolo, ciò potrebbe significare un maggior onere di apertura e chiusura delle connessioni di rete, quindi nella pratica dell'ottimizzazione front-end, è necessario trovare un equilibrio tra il numero di file e la dimensione di ciascun file.

Questo articolo spiega come combinare e compressare più componenti in un singolo file, che può ridurre il numero di blocchi di codice e, se questi componenti combinati vengono utilizzati più volte in diversi luoghi, grazie al meccanismo di cache di Vue, può accelerare il caricamento successivo dei componenti. Inoltre, se questi componenti comuni non cambiano per un lungo periodo (ad esempio, componenti relativi all'UI), il file generato dalla compressione non cambia a lungo, può sfruttare al massimo la funzione di cache del browser, ottimizzando la velocità di caricamento dell'anteprima.

Ecco una schermata del risultato: in un'applicazione SPA che utilizza vue-router, i componenti ComponentA, ComponentB, ComponentC e altri tre componenti corrispondenti alle voci di routing tranne la root routing vengono combinati e compressi in un singolo file. Durante il caricamento della pagina per la prima volta, è possibile vedere nel pannello Network degli strumenti di sviluppo che al momento non è stato caricato il file 0.a5a1bae6addad442ac82.js che contiene questi tre componenti. Quando si fa clic sul link Page A, viene caricato il file, e quando si fa clic sui link Page B, Page C, il file non viene ricaricato.

Prima di tutto, utilizziamo lo strumento di linea di comando vue-cli per creare un progetto con il template del progetto webpack che include vue-router, creando una directory CommonComponents nel percorso src/components del progetto, e all'interno di questa directory creiamo i tre componenti ComponentA, ComponentB, ComponentC.

Allo stesso tempo, crea un file index.js nella directory CommonComponents, il cui contenuto è il seguente:

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')

In questo modo, possiamo utilizzare la sintassi speciale require.ensure di webpack o la sintassi callback-require dello stile AMD per caricare asincronamente index.js nel percorso CommonComponents, e durante il packaging con webpack, possiamo realizzare il packaging combinato di questi tre componenti ComponentA, ComponentB, ComponentC. Ecco un esempio di sintassi callback-require dello stile AMD: qui la forma della funzione di callback non ha requisiti speciali.

require(['component/CommonComponents'], function (CommonComponents) {
 // fare qualsiasi cosa si desideri con CommonComponents
})

Quando il modulo component/CommonComponents viene caricato con successo, il parametro CommonComponents nella funzione di callback sarà un oggetto che contiene le opzioni dei componenti ComponentA, ComponentB, ComponentC.

Nel definire il componente解析异步时, utilizziamo una funzione factory resolve => {require(['./my-async-component'], resolve)}; se si desidera aggiungere una voce di configurazione del routing con l'attributo component per il componente ComponentA, quale funzione factory si dovrebbe definire? Ricorda che qui il resolve è una funzione di callback utilizzata per解析组件选项, i cui parametri sono le opzioni del componente ottenute, e nel codice delCommonComponents del paragrafo precedente, CommonComponents è un oggetto che contiene diverse opzioni di componente. Pertanto, possiamo utilizzare le proprietà figlie di CommonComponents come parametri per la chiamata di resolve. Scriviamo una funzione getCommonComponent che restituisce la funzione factory per ottenere le opzioni del componente corrispondente al nome del componente.

let getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))

In luoghi come i modelli di componenti o le mappature di rotte che utilizzano uno dei componenti, è possibile utilizzare chiamate di funzione come getCommonComponent('ComponentA') per impostare i componenti, un esempio di utilizzo nelle mappature di rotta è come segue:

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

L'elenco dei file generati in打包 finale è come nella figura seguente, il file 0.a5a1bae6addad442ac82.js contiene i tre componenti ComponentA, ComponentB, ComponentC.

Sommario

Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo possa aiutarti a imparare o lavorare meglio. Se hai domande, puoi lasciare un messaggio per discuterlo, grazie per il supporto di Guida a urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore è proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume responsabilità per le relative responsabilità legali. Se trovi contenuti sospetti di violazione del diritto d'autore, ti preghiamo di inviare un'e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di violazione del diritto d'autore.