Wie Sie die Seitengröße mit webpack und Vue um 1.500 % erhöhen können

Haftungsausschluss: Dieser Artikel ist größtenteils Satire. Ich glaube nicht, dass ich besser bin als Sie, nur weil ich einmal TypeScript geschrieben habe, und ich glaube auch nicht, dass es gut für uns ist, Webseiten größer zu machen. Fühlen Sie sich frei, diese Ansichten falsch darzustellen, um die Klickzahlen zu maximieren.

Sie wissen ja, es gibt viele Artikel, die Ihnen sagen, wie Sie Ihre Seite kleiner machen können: optimieren Sie Ihre Bilder, entfernen Sie überflüssige CSS-Regeln, schreiben Sie alles in Dreamweaver mit Framesets neu. Sehen Sie, Walmart hat gerade die Seitengröße um einige Zahlen reduziert, mehr oder weniger.

JavaScript-Haushalt

🗑️ Alte & doppelte Abhängigkeiten entfernen
🐥 Große Abhängigkeiten durch kleine ersetzen
🧐 Prüfen, ob Sie nicht zu viel polyfillen
🧽 A/B-Test-Konfigurationen bereinigen
✂️ Code-Splitting!

Walmart Grocery hat dies für seine Website getan. 69 % kleinere JS-Bundles. 28 % schnellere Time-to-Interactive. pic.twitter.com/3kSp7Ssi35

— Addy Osmani (@addyosmani) 31. Mai 2019

Was wir nicht haben, sind genügend Artikel, die Ihnen zeigen, wie Sie Ihre Seitengröße erhöhen. Tatsächlich war der einzige Artikel, den ich finden konnte, dieser vom Geek Squad, der sich am Ende um die Vergrößerung der Schriftgröße drehte. Das ist ein guter Anfang, aber ich denke, wir können es besser machen.

Legen Sie etwas Gewicht zu

Warum sollten Sie Ihre Seitengröße erhöhen wollen? Ist das nicht eine nicht sehr nette Sache für Leute mit langsamen Verbindungen? Nun, es gibt mehrere ausgezeichnete und keineswegs erzwungene Gründe, und hier sind drei davon, da Dinge, die in Dreiergruppen auftreten, befriedigender sind.

1. Sie haben eine Gigabit-Verbindung und leben in Tennessee, also sind sicherlich alle anderen besser dran als Sie.
2. Browser machen Caching, du Narr. Das bedeutet, dass Sie die Seite nur einmal herunterladen müssen. Hören Sie auf zu jammern. Probleme der Ersten Welt.
3. Es ist Ihnen egal, ob Leute Ihre Website jemals besuchen, weil Sie "arbeiten, um zu leben, nicht leben, um zu arbeiten".

Wenn einer dieser völlig nachvollziehbaren Gründe bei Ihnen Anklang findet, möchte ich Ihnen zeigen, wie ich die Größe meines CSS um 1.500 % erhöht habe – und Sie können das auch mit einem einfachen webpack-Trick.

Ein seltsamer Trick

Alles begann, als ich beschloss, mein Altersvorsorgeprojekt namens The Urlist auf das Bulma CSS-Framework umzustellen.

Die ursprüngliche Inkarnation der Seite war handgefertigt und mein Sass sah aus wie eine Folge von Hoarders.

„Burke, du brauchst keine 13 verschiedenen .button-Stile. Warum wählst du nicht einen aus und wir können diese anderen 12 loswerden, damit du irgendwo schlafen kannst?“

Bulma enthält auch Dinge wie Modals, die ich mit Drittanbieter-Vue-Komponenten erstellt habe.

Es hat auch ein Hamburger-Menü, denn es ist eine bekannte wissenschaftliche Tatsache, dass man keine erfolgreiche Website ohne Hamburger haben kann.

Schauen Sie, ich mache nicht die Regeln. So funktioniert das Geschäft eben.

Ich war mit dem Ergebnis sehr zufrieden. Die Stile von Bulma sind scharf und das Layout-System ist leicht zu erlernen. Es ist fast so, als ob jemand irgendwo CSS versteht und mich auch nicht hasst. Das ist heutzutage eine schwer zu findende Kombination.

Nach ein paar Wochen Refactoring (während derer ich mich fragte: „WAS MACHST DU ÜBERHAUPT, MAN?!? DIE SEITE FUNKTIONIERT SCHON!“), war ich endlich fertig. Nebenbei bemerkt: Wenn Sie das nächste Mal daran denken, etwas neu zu refaktorisieren, tun Sie es nicht. Lassen Sie es einfach in Ruhe. Wenn Sie der nächsten Generation keine technischen Schulden hinterlassen, werden sie extrem gelangweilt sein, und das liegt dann an Ihnen.

Als ich das Projekt baute, bemerkte ich etwas Seltsames: Die Größe meines CSS war erheblich gestiegen. Meine selbstgebastelte Abscheulichkeit war nur 30KB komprimiert und danach war ich bei 260KB.

Und, was die Sache noch schlimmer machte, die Vue CLI belehrt mich darüber...

Was ich natürlich ignorierte. Ich lasse mir nichts von Robotern vorschreiben.

Was ich stattdessen tat, war, es bereitzustellen. In Produktion. Im Internet. Denn ich habe nicht all diese Zeit mit Refactoring verbracht, um es nicht bereitzustellen. Ja, Sunk Costs und so, aber entschuldigen Sie, wenn ich pragmatischer bin als Ihr Plakat mit logischen Fehlschlüssen. Alles, was ich sage, ist, dass ich zur Party kam und nicht ohne einen Rausch nach Hause gehen würde.

Dann habe ich mich auf Twitter an die ambivalenten Massen gewandt, um meine Errungenschaft bekannt zu geben. Wie man das so macht.

Ich habe https://#/hgGmemoQeX zu Bulma refaktorisiert. Das Ganze sieht sauberer aus und die Stile sind drastisch vereinfacht. Tolle Arbeit, @jgthms.

Einziger Nachteil ist, dass mein CSS jetzt ziemlich groß ist. ~260kb komprimiert. Vorher waren es ~30kb. Ist es den Aufwand wert? pic.twitter.com/te2DTgknS1

— Burke Holland (@burkeholland) 28. Mai 2019

Kurz darauf antwortete Jeremy Thomas, der Bulma erschaffen hat (und offensichtlich Dragon Ball liebt). Es ging auch schnell. Es ist, als gäbe es ein Fledermaussignal, das ausgeht, sobald ein Idiot twittert.

Schön! Es scheint, als ob Ihr CSS wegen vieler doppelter Stile groß geworden ist.
Zum Beispiel ist ".section.is-medium[data-v-" 13 Mal im CSS enthalten, sollte aber nur einmal da sein. Gleiches gilt, wenn Sie nach ".hero[data-v-" suchen.
Es scheint, als hätten Sie ganz Bulma in jeder Ihrer Komponenten genamspaced.

— Jeremy Thomas (@jgthms) 28. Mai 2019

Doppelte Stile? 13 Mal? Was zum Teufel ist ein Namespace? Ist das ein π-Symbol oder ein benutzerdefiniertes Jeremy Thomas-Logo?

In diesem Moment erkannte ich, dass ich keine Ahnung habe, was ich tue.

Legen Sie das Sass nieder und ziehen Sie sich langsam zurück

Ich werde der Erste sein, der zugibt, dass ich nicht viel über CSS weiß, und noch weniger über Sass. Verstehst du? Weniger Sass? Vergiss es. Ich will dein Mitleidslachen nicht.

Als ich mein Vue CLI-Projekt für Bulma einrichtete, erstellte ich einen Ordner src/styles und legte eine Datei bulma-aber-nicht-ganz-bulma-nur-ein-bisschen-davon.scss hinein. Man sagt, Namen zu finden ist schwer, aber ich sehe nicht, warum.

Diese Datei importiert die Teile von Bulma, die ich verwenden möchte. Es ist Bulma, aber nicht alles. Nur ein Teil davon.

@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/base/_all.sass";

@import "bulma/sass/form/shared.sass";
@import "bulma/sass/form/input-textarea.sass";

// etc...

Dann importierte ich diese Datei in eine benutzerdefinierte Sass-Datei, die ich ... site.scss nannte. Ich mag es, die Dinge einfach zu halten.

@import "./bulma-but-not-all-of-bulma-only-some-of-it.scss";

html,
body {
  background-color: #f9fafc;
}

// etc...

Ich wollte diese Dateien global in Vue importieren, damit ich sie in jeder Komponente verwenden kann. Und ich wollte es auf die richtige Weise tun, den kanonischen Weg. Ich denke, es ist aus meiner Bereitschaft, mehr als 2 MB CSS in die Produktion zu stellen, klar, dass ich gerne die Dinge auf die "richtige Weise" mache.

Ich habe diesen hervorragenden Blogbeitrag von Sarah Drasner gelesen, mit dem Titel "How to import a Sass file into every component in your Vue app". Sie zeigt, wie das geht, indem sie den webpack-Buildprozess über die Datei vue.config.js modifiziert.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/site.scss";`
      }
    }
  }
}

Was ich nicht verstanden habe, ist, dass dies Sass in jeder Komponente einer Vue-App importiert. Wissen Sie, wie der Titel des Blogbeitrags wörtlich sagt. Das ist auch der Grund, warum ich eine Menge doppelter Stile mit einem data-v- Attribut-Selektor hatte. Dafür habe ich die geskripteten Stile zu verdanken.

Wie Vue `scoped` behandelt

Vue ermöglicht es Ihnen, Stile auf eine Komponente zu "scopen". Das bedeutet, dass ein Stil nur die Komponente beeinflusst, in der er sich befindet, und nicht den Rest der Seite. Es gibt keine magische Browser-API, die das tut. Vue erreicht dies, indem es dynamisch ein data- Attribut sowohl im Element als auch im Selektor einfügt. Zum Beispiel wird dieses

<template>
  <button class="submit">Submit</button>
<template>

<style lang="scss" scoped>
.submit {
  background-color: #20ae96;
}
</style>

...zu diesem

<button class="submit" data-v-2929>Submit</button>

<style>
.submit[data-v-2929] {
  background-color: #20ae96;
}
</style>

Dieser dynamische Daten-Tag wird auch zu jedem Kindelement in der Komponente hinzugefügt. Jedes Element und jeder Stil für diese Komponente hat also zur Laufzeit ein data-v-2929.

Wenn Sie eine Sass-Datei in Ihre Komponente importieren, die tatsächliche Stile enthält, wird Vue (über webpack) diese Stile importieren und mit diesem dynamischen data- Attribut "namenspacen". Das Ergebnis ist, dass Sie Bulma 13 Mal in Ihrer App einbinden, mit einer Menge data-v-Wirrwarr davor.

Aber das wirft die Frage auf: Wenn webpack die CSS in jeder einzelnen Komponente rendert, warum sollten Sie dann jemals den vue.config.js-Ansatz verwenden? In einem Wort: Variablen.

Das Problem der Variablenfreigabe

Sie können keine Sass-Variable in einer Komponente definieren und von einer anderen darauf verweisen. Das wäre auch ziemlich schwer zu verwalten, da Sie überall Variablen definieren und verwenden würden. Nur ich würde so einen Code schreiben.

Sie hingegen würden wahrscheinlich alle Ihre Variablen in eine Datei variables.scss packen. Jede Komponente würde dann auf diesen zentralen Speicher von Variablen verweisen. Eine Variablen-Datei in jede einzelne Komponente zu importieren ist redundant. Es ist auch exzessiv. Und unnötig. Und langatmig.

Dies ist genau das Problem, das Sarahs Artikel löst: das Importieren einer Sass-Datei in jede Komponente Ihres Projekts.

Es ist in Ordnung, etwas wie Variablen in jede Komponente zu importieren, da Variablen nicht gerendert werden. Wenn Sie 200 Variablen importieren und nur eine davon verwenden, wen kümmert das? Diese Variablen existieren sowieso nicht im gerenderten CSS.

Zum Beispiel dieser

<style lang="scss" scoped>
$primary: #20ae96;
$secondary: #336699;

.submit {
  background-color: $primary
}
</style>

...zu diesem

<style>
.submit[data-v-2929] {
  background-color: #20ae96;
}
</style>

Also, es gibt wirklich zwei Probleme hier

1. Bulma muss global sein.
2. Bulmas Variablen sollten von den Komponenten zugänglich sein.

Was wir brauchen, ist eine clevere Kombination aus Sarahs Technik und ein wenig proprietärem Wissen darüber, wie Bulma strukturiert ist.

Bulma mit Vue verwenden

Wir werden dies mit der geringsten Duplizierung erreichen, indem wir drei Dateien im Verzeichnis src/styles haben

variables.scss: Diese Datei ist der Ort, an dem Sie die Variablen von Bulma abrufen und Ihre eigenen überschreiben/definieren. Beachten Sie, dass Sie die folgenden drei Dateien einfügen müssen, um alle Variablen von Bulma zu erhalten. Und sie müssen in dieser Reihenfolge sein...

// Your variables customizations go up here

// Include Bulma's variables
@import "bulma/sass/utilities/initial-variables.sass";
@import "bulma/sass/utilities/functions.sass";
@import "bulma/sass/utilities/derived-variables.sass";

bulma-custom.scss: Diese Datei ist der Ort, an dem Sie die von Ihnen gewünschten Teile von Bulma abrufen. Sie sollte sich auf die Datei variables.scss beziehen.

@import "./variables.scss";

/* UTILTIES */
@import "bulma/sass/utilities/animations.sass";
@import "bulma/sass/utilities/controls.sass";
@import "bulma/sass/utilities/mixins.sass";

// etc...

site.scss: Diese Datei importiert die Datei bulma-custom.scss und ist auch der Ort, an dem Sie globale Stile definieren, die im gesamten Projekt verwendet werden.

@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");
@import "./bulma-custom.scss";

html,
body {
  height: 100%;
  background-color: #f9fafc;
}

// etc...

Importieren Sie die Datei site.scss in Ihre main.js-Datei. Oder in meinem Fall main.ts. Macht es mich besser als Sie, dass ich TypeScript benutze? Ja. Ja, das tut es.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// import styles
import "@/styles/site.scss";

Dies macht alle von uns verwendeten Bulma-Teile in jeder Komponente verfügbar. Sie sind global, werden aber nur einmal eingefügt.

Laut Sarahs Artikel fügen Sie die Datei variables.scss der Datei vue.config.js hinzu.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/variables.scss";`
      }
    }
  }
}

Dadurch können Sie von jeder .vue-Komponente aus auf jede der Bulma-Variablen oder Ihre eigenen verweisen.

Jetzt haben Sie das Beste aus beiden Welten: Bulma ist global verfügbar und Sie haben immer noch Zugriff auf alle Bulma-Variablen in jeder Komponente.

Gesamtgröße des CSS jetzt? Etwa 1.500 % kleiner...

Nimm das, Walmart.

Wiedergutmachung durch PR

Um mich zu rehabilitieren, habe ich einen PR für die Bulma-Dokumentation eingereicht, der erklärt, wie man Bulma in einem Vue CLI-Projekt anpasst. Es ist ein Akt der Reue dafür, dass ich auf Twitter gegangen bin und Bulma als Problem erscheinen ließ, obwohl Burke das eigentliche Problem ist.

Und man sollte meinen, dass ich es bis jetzt verstanden hätte: Burke ist immer das Problem.