Comment augmenter la taille de votre page de 1 500% avec WebPack et Vue

Cet article raconte comment l'auteur a utilisé WebPack et Vue pour augmenter considérablement la taille des fichiers CSS, et a finalement résolu ce problème avec des méthodes améliorées. Au lieu d'encourager l'augmentation de la taille de la page, l'article montre des vues et des solutions ironiques rencontrées dans le processus d'utilisation du framework Bulma et de Vue CLI.

Avertissement: Cet article est ironique. L'auteur ne pense pas qu'il est plus intelligent que les lecteurs, et il ne pense pas qu'augmenter la taille de la page Web est une bonne chose.

De nombreux articles vous apprennent à réduire la taille de la page: optimiser les images, supprimer les règles CSS redondantes, et plus encore. L'auteur prend à Walmart comme exemple pour souligner la réduction de la taille de sa page.

Suggestions d'optimisation JavaScript:

? ️ Supprimer les dépendances anciennes et en double? Remplacer les grandes dépendances par de petites dépendances? Vérifiez s'il s'agit de surpolyfill? Nettoyez la configuration du test A / B

Walmart l'a fait sur son site Web. Les forfaits JS sont réduits de 69%. Le temps d'interaction a été réduit de 28%.

Cependant, peu d'articles vous apprennent à augmenter la taille de la page. L'auteur a tenté de trouver des informations pertinentes, mais n'a trouvé qu'un article sur l'augmentation de la taille de la police.

«Gain de poids» inattendu

Pourquoi augmenter la taille de la page? N'est-ce pas une bonne chose pour les utilisateurs de la bande passante faible? L'auteur donne des raisons apparemment raisonnables mais en fait légèrement drôles:

1. Vous avez une bande passante Gigabit et en direct dans le Tennessee (laisse entendre que le réseau est supérieur).
2. Le navigateur se mettra en cache, vous n'avez besoin de télécharger le site Web qu'une seule fois.
3. Vous ne vous en souciez pas si quelqu'un visite votre site Web parce que vous "travaillez pour la vie, pas pour le travail".

Si vous êtes d'accord avec ces raisons, l'auteur montrera comment augmenter la taille CSS de 1500% - juste une simple astuce WebPack.

Conseils merveilleux

L'auteur a découvert ce problème lors de la refactorisation du projet vers le cadre Bulma CSS. Le code initial était chaotique, et le code SASS était comme une scène de l'émission "Housker".

Bulma comprend des fonctions telles que des boîtes modales. L'auteur a utilisé des composants Vue tiers. Il a également un menu Burger, car il s'agit d'un élément incontournable bien connu pour les sites Web réussis.

Une fois la reconstruction terminée, les auteurs ont constaté que la taille du CSS augmentait considérablement. Le code initial rédigé à la main n'était que de 30 Ko (après compression GZIP), et après reconstruction, il a atteint 260 Ko. Vue CLI en a également mis en garde, mais l'auteur l'a ignorée.

L'auteur a déployé le projet dans l'environnement de production et a annoncé cette "réussite" sur Twitter. Jeremy Thomas, le créateur de Bulma, a répondu à cela, soulignant que la taille du CSS a augmenté en raison de la présence d'un grand nombre de styles en double.

Le problème réside

L'auteur admet qu'il ne sait pas grand-chose sur CSS et SASS. Lorsque vous utilisez le projet VUE CLI, l'auteur a créé un dossier src/styles et a placé un fichier bulma-but-not-all-of-bulma-only-some-of-it.scss qui importe certains des composants Bulma. Ensuite, importez le fichier dans le fichier SASS personnalisé site.scss .

Pour utiliser ces styles dans chaque composant, l'auteur a utilisé la méthode à partir d'un article de blog de Sarah Drasner pour modifier le processus de construction WebPack en modifiant le fichier vue.config.js .

Ce que l'auteur ne comprend pas, c'est que cette approche importe SASS dans chaque composant VUE. Il en résulte de nombreux styles en double, car Vue ajoute des attributs data-v- à chaque composant.

Comment gérer scoped

Vue permet de limiter la portée du style aux composants, implémentés en insérant dynamiquement les propriétés data- . Si vous importez un fichier SASS contenant des styles dans le composant, Vue (via WebPack) espace ces styles avec les propriétés data- dynamiques.

Problèmes de partage variable

Vous ne pouvez pas définir une variable SASS dans un composant et la référencer dans un autre composant.

Meilleures pratiques pour utiliser Bulma et Vue

Pour résoudre ce problème, l'auteur recommande d'utiliser trois fichiers: variables.scss (importations Bulma), bulma-custom.scss (Importer Bulma Components) et site.scss (Définir les styles globaux). Importez site.scss dans le fichier main.js et ajoutez variables.scss au fichier vue.config.js .

De cette façon, Bulma est disponible à l'échelle mondiale et toutes les variables Bulma sont accessibles dans chaque composant. La taille CSS a finalement diminué de manière significative.

Solutions améliorées

L'auteur a également soumis un document PR à Bulma expliquant comment personnaliser Bulma dans un projet Vue CLI.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!