Utilisation de webpack pour fusionner et compacter plusieurs composants dans Vue.js et réaliser le chargement à la demande

Préambule

Avec l'amélioration des appareils mobiles, l'accélération de la vitesse de connexion, les exigences des utilisateurs pour les applications web deviennent de plus en plus élevées, les fonctionnalités à fournir par les applications web deviennent de plus en plus. L'augmentation des fonctionnalités entraîne le résultat le plus direct que les fichiers de ressources deviennent de plus en plus grands. Pour maintenir le code client de plus en plus volumineux, la conception modulaire a été proposée pour organiser le code. En tant qu'outil de paquetage modulaire, webpack devient de plus en plus populaire avec la popularité de react.

Lorsque vous développez un projet avec Vue, si vous souhaitez utiliser ses fonctionnalités de composants uniques de fichier, vous devez nécessairement utiliser webpack ou browserify pour le paquet, pour les applications à grande échelle, pour améliorer la vitesse de chargement, vous pouvez utiliser la fonction de code split de webpack pour le paquetage en segments, générer des modules plus petits et charger selon les besoins, ce qui est décrit dans les documents Vue et vue-Les documents router ont tous des explications :Composants asynchrones、Chargement différé。

La fonction de code split de webpack peut utiliser la syntaxe spéciale require.ensure de webpack ou le callback de style AMD-La syntaxe require, en utilisant le callback de style AMD-Par exemple, la syntaxe require -

Enregistrement global de Async Component :

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

Enregistrement local de Async Component, contenu du bloc script dans un composant unique de fichier :

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
// Extension des options de l'instance Vue, d'autres options sont omises
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

Lors de l'utilisation de vue-router, pour charger les composants de manière asynchrone sous différentes routes, vous pouvez utiliser la même méthode pour définir l'attribut component de l'élément de correspondance de route.

Ici, myAsyncComponent est défini comme une fonction usine, qui ne sera appelée qu'au besoin, en utilisant Vue ou vue-La fonction de rappel de résolution définie par router pour analyser les options du composant (oui, dans Vue et vue-router contient deux fonctions différentes pour résoudre les options des composants)-La fonction require (le paramètre de la fonction de rappel resolve est l'option du composant), de sorte que, lors de l'exécution du script de paquetage, my-async-Le fichier component.vue sera compressé en un seul fichier, et ne sera chargé que lorsque ce composant est utilisé.

Lorsque de nombreux composants doivent être chargés de manière asynchrone, plus de fichiers individuels seront générés. En ce qui concerne les performances frontales, bien que chaque fichier soit plus petit, cela peut signifier plus de coûts de connexion et de fermeture de réseau, par conséquent, dans la pratique de l'optimisation frontale, il est généralement nécessaire de trouver un équilibre entre le nombre de fichiers et la taille de chaque fichier.

Cet article explique comment combiner et compresser plusieurs composants en un seul fichier, d'une part, cela peut réduire le nombre de blocs de code, d'autre part, si ces composants combinés et compressés sont utilisés plusieurs fois dans différents endroits, en raison du mécanisme de cache de Vue, cela peut accélérer le chargement ultérieur des composants, et si ces composants communs ne changeront pas longtemps (comme les composants UI), le fichier généré par le paquet ne changera pas longtemps non plus, cela peut utiliser pleinement la fonction de cache du navigateur, et optimiser la vitesse de chargement en avant.

Voici d'abord l'effet visuel, en utilisant vue-Dans l'application SPA du router, les composants ComponentA, ComponentB, ComponentC et autres trois composants correspondants aux éléments de route autres que la racine sont combinés et compressés dans un seul fichier. Lors du chargement de la page pour la première fois, vous pouvez voir à partir du panneau Network de l'outil de développement que ce n'est pas encore chargé le fichier contenant les trois composants ComponentA, ComponentB, ComponentC.5a1bae6addad442ac82.js fichier, lorsque vous cliquez sur le lien Page A, ce fichier est chargé, puis lorsque vous cliquez sur les liens Page B, Page C, ce fichier n'est pas recharge.

Nous commençons par utiliser vue-L'outil en ligne de commande CLI utilise le modèle de projet webpack pour créer un projet contenant vue-Pour le projet router, dans son src/Créez un répertoire CommonComponents sous le répertoire components, et créez dans ce répertoire les trois composants ComponentA, ComponentB et ComponentC.

En même temps, créez un fichier index.js dans le répertoire CommonComponents situé sous le répertoire components, dont le contenu est le suivant :

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

这样，我们只需要使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法异步加载 CommonComponents 目录下的 index.js，在使用 webpack 进行打包时，就可以实现将 ComponentA、ComponentB、ComponentC 这三个组件合并打包。以 AMD 风格的 callback-require 语法为例示范如下，这里的 callback 回调函数的形式没有任何特殊要求。

require(['component/CommonComponents
 // faites ce que vous voulez avec CommonComponents
})

component/Lorsque le module CommonComponents est chargé avec succès, le paramètre CommonComponents dans la fonction de rappel ici sera un objet contenant les options des composants ComponentA, ComponentB, ComponentC.

Lorsque nous définissons une résolution asynchrone de composants, nous utilisons une fonction d'usine resolve => {require(['./my-async-component'], resolve)}，si vous devez ajouter un élément de route dans le fichier de configuration de route avec l'attribut component pour le composant ComponentA，quelle fonction d'usine devriez-vous définir ? Rappelez-vous que dans ce contexte, resolve est une fonction de rappel utilisée pour résoudre les options du composant, dont les paramètres sont les options du composant obtenues. Dans le code du paragraphe précédent, CommonComponents est un objet contenant plusieurs options de composants, donc nous pouvons utiliser les sous-attributs de CommonComponents comme paramètres pour l'appel de resolve. Nous écrivons une fonction getCommonComponent pour renvoyer la fonction d'usine correspondante des options du composant en fonction du nom du composant.

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

Dans les endroits où l'un des composants est utilisé dans les modèles de composants ou les mappages de routes, vous pouvez utiliser une appellation de fonction telle que getCommonComponent('ComponentA') pour configurer le composant, et un exemple d'utilisation dans les mappages de routes est présenté ci-dessous :

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')
 }
]

La liste des fichiers générés après le paquetage final est montrée dans l'image suivante, y compris 0.a5a1bae6addad442ac82.js contient les trois composants ComponentA, ComponentB, ComponentC.

Résumé

Voici la totalité du contenu de cet article, j'espère que le contenu de cet article peut apporter un certain soutien à votre apprentissage ou à votre travail. Si vous avez des questions, vous pouvez laisser des commentaires pour échanger, merci de votre soutien au tutoriel d'alarme.

Déclaration : le contenu de cet article est partagé sur Internet, propriété de l'auteur original, le contenu est apporté par les utilisateurs d'Internet et téléchargé spontanément, ce site Web ne possède pas de propriété, n'a pas été traité par l'éditeur humain et n'assume pas la responsabilité des responsabilités juridiques associées. Si vous trouvez du contenu suspect de violation de copyright, veuillez envoyer un e-mail à : notice#w pour signaler, et fournir des preuves pertinentes.3Déclaration : le contenu de cet article est tiré du réseau, propriété de l'auteur original, le contenu est apporté par les utilisateurs d'Internet et téléchargé spontanément, ce site Web ne possède pas de propriété, n'a pas été traité par l'éditeur humain et n'assume pas la responsabilité des responsabilités juridiques associées. Si vous trouvez du contenu suspect de violation de copyright, veuillez envoyer un e-mail à : notice#w pour signaler, et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu suspect de violation de droit d'auteur.