Node-vibrant: Bibliotheksgröße reduzieren

Erstellt am 21. Juni 2019  ·  9Kommentare  ·  Quelle: Vibrant-Colors/node-vibrant

Ich sehe, dass diese Bibliothek jimp als Abhängigkeit für einige Transformationen deklariert.

Ich analysiere meine Projektabhängigkeiten (ich habe node-vibrant in meinem package.json und es sieht so aus, als ob jimp viele Leerzeichen benötigen:

ncdu 1.14 ~ Use the arrow keys to navigate, press ? for help
--- /deploy/out/node_modules ---------------
  185.0 MiB [##########] /<strong i="11">@jimp</strong>
   38.4 MiB [##        ] /chrome-aws-lambda
   34.2 MiB [#         ] /sharp
   11.0 MiB [          ] /<strong i="12">@browserless</strong>
   11.0 MiB [          ] /<strong i="13">@babel</strong>
    9.2 MiB [          ] /jimp
    6.3 MiB [          ] /core-js
    4.8 MiB [          ] /lodash
    3.2 MiB [          ] /jsdom
    3.1 MiB [          ] /moment
    3.0 MiB [          ] /iltorb
    2.4 MiB [          ] /colorable
    2.1 MiB [          ] /cssstats
    1.9 MiB [          ] /<strong i="14">@cliqz</strong>
    1.7 MiB [          ] /<strong i="15">@microlink</strong>
    1.7 MiB [          ] /graphql
    1.7 MiB [          ] /port-numbers
    1.7 MiB [          ] /node-vibrant

Der Punkt ist, jimp enthält standardmäßig einige Plugins:

--- /deploy/out/node_modules/<strong i="20">@jimp</strong> ---------
                         /..
    7.6 MiB [##########] /plugin-print
    7.0 MiB [######### ] /core
    6.9 MiB [######### ] /plugin-resize
    6.9 MiB [######### ] /plugin-color
    6.8 MiB [########  ] /plugin-crop
    6.8 MiB [########  ] /plugin-blur
    6.8 MiB [########  ] /plugin-rotate
    6.8 MiB [########  ] /png
    6.8 MiB [########  ] /custom
    6.8 MiB [########  ] /plugin-blit
    6.8 MiB [########  ] /plugin-contain
    6.8 MiB [########  ] /plugin-normalize
    6.8 MiB [########  ] /plugins
    6.8 MiB [########  ] /plugin-cover
    6.8 MiB [########  ] /plugin-gaussian
    6.8 MiB [########  ] /plugin-scale
    6.8 MiB [########  ] /bmp
    6.8 MiB [########  ] /plugin-mask
    6.8 MiB [########  ] /plugin-displace
    6.8 MiB [########  ] /jpeg

aber nicht sicher, ob alle Plugins für node-vibrant relevant sind.

Ich möchte zwei Ansätze vorschlagen:

Erwägen Sie die Verwendung von sharp

(meine Lieblingslösung)

Wie Sie in meinem Bundle sehen können, habe ich auch sharp als Abhängigkeit.

Der Hauptunterschied zwischen beiden ist, dass jimp 100% Javascript-Code ist, während sharp in Sohn-Binärdateien delegiert.

Zuerst dachte ich, jimp könnte besser sein, da es keine Abhängigkeiten hat, aber die Realität sieht so anders aus: sharp versenden vorinstallierte Binärdateien und die Paketgröße ist tatsächlich zu viel kleiner als jimp .

Tatsächlich ist sharp perf überlegen, siehe
http://sharp.pixelplumbing.com/en/stable/performance/

Nicht notwendiges jimp einfach ausschließen

Ich nehme an, dass innerhalb von 185 MB, die dort jimp hinzugefügt werden, nur ein paar Dinge tatsächlich verwendet werden.

Ich bin mir nicht sicher, wie man das von einem node-vibrant , aber zum Beispiel das Hinzufügen eines kleinen Abschnitts auf README.md, der die notwendigen jimp Plugins explizit auflistet, sollte für jeden ausreichen, den Rest der nicht notwendigen Dinge auszuschließen ein vorgefertigter Schritt

enhancement

Hilfreichster Kommentar

Hier sind einige zusätzliche Untersuchungen dazu, wie Jimp konfiguriert werden könnte, um die Größe zu reduzieren:

Das Paket @jimp/custom dient als Basis, um Plugins von Grund auf hinzuzufügen. Der Standardexport ist eine configure Funktion, die Arrays von types (unterstützte Bildtypen) und plugins (zu verwendende Plugins) verwendet.

@jimp/types exportiert alle Typen, die im Hauptpaket jimp enthalten sind, wodurch es einfach wird, die gleichen Bilder zu unterstützen, die Node-Vibrant jetzt unterstützt.

Das einzige spezielle Plugin, das Node-Vibrant zu verwenden scheint, ist die Funktion resize . Das entsprechende Plugin ist @jimp/plugin-resize .


Das @vibrant/image-node Paket könnte mit dem folgenden am oberen Rand des Skripts aktualisiert werden:

import configure from '@jimp/custom';
import types from '@jimp/types'; // all of jimp's default types
import resize from '@jimp/plugin-resize'; // resize function

const Jimp = configure({
  types: [types],
  plugins: [resize]
});

Alle 9 Kommentare

Ich liebe die Arbeit, die Sie geleistet haben, um dies zu untersuchen, ein aufrichtiges Dankeschön.

sharp wird wahrscheinlich keine Lösung sein, die wir übernehmen können, da wir (trotz des Namens) den Browser unterstützen, node-vibrant eigenständig auszuführen.

Sie haben jedoch völlig Recht, dass jimp für einen Großteil der Verwendung in node-vibrant nicht erforderlich ist. Wir schränken derzeit die Entwicklung für die aktuelle "stabile" Codebasis ein, wir arbeiten daran, die Codebasis in ein Monorepo umzuschreiben (was bedeutet, dass Sie auch in Zukunft aus node-vibrant auswählen können, was Sie verwenden möchten !) und ich habe bestätigt, dass wir auch dort eine Größenoptimierung vornehmen können.

Ich habe eine extrem arbeitsreiche Woche vor mir, aber ich werde mein Bestes tun, um am nächsten Wochenende zurückzukehren, um diese Änderung vorzunehmen

Ansonsten lieben und akzeptieren wir Pull Requests immer

Ich habe eine andere Sache hinter @jimp bemerkt: Sie haben core-js als Abhängigkeit, und diese Abhängigkeit wird für jedes Plugin installiert!

Deshalb beträgt die Größe von @jimp 185 MB: core-js benötigt 7,4 MiB x 27 Module = ZU VIEL PLATZ.

Wahrscheinlich könnten core-js so deklariert werden, dass sie zwischen den Plugins geteilt werden können

Hier sind einige zusätzliche Untersuchungen dazu, wie Jimp konfiguriert werden könnte, um die Größe zu reduzieren:

Das Paket @jimp/custom dient als Basis, um Plugins von Grund auf hinzuzufügen. Der Standardexport ist eine configure Funktion, die Arrays von types (unterstützte Bildtypen) und plugins (zu verwendende Plugins) verwendet.

@jimp/types exportiert alle Typen, die im Hauptpaket jimp enthalten sind, wodurch es einfach wird, die gleichen Bilder zu unterstützen, die Node-Vibrant jetzt unterstützt.

Das einzige spezielle Plugin, das Node-Vibrant zu verwenden scheint, ist die Funktion resize . Das entsprechende Plugin ist @jimp/plugin-resize .


Das @vibrant/image-node Paket könnte mit dem folgenden am oberen Rand des Skripts aktualisiert werden:

import configure from '@jimp/custom';
import types from '@jimp/types'; // all of jimp's default types
import resize from '@jimp/plugin-resize'; // resize function

const Jimp = configure({
  types: [types],
  plugins: [resize]
});

Scheint, als müsste ich vielleicht ein paar Eingaben schreiben, aber vielen Dank @NotWoods. Ich versuche das diese Woche zu beenden

Das Tippen dauert länger als ich ursprünglich dachte. Ich weiß, dass ich den langen Weg gehe, aber ich möchte sicherstellen, dass ich das Ökosystem sowie unsere eigenen Bedürfnisse in Ordnung bringe

Die Eingaben für jimp haben am Ende etwas gedauert, aber es ist ein guter Beitrag vorgelagert:

https://github.com/oliver-moran/jimp/pull/770

Nachdem dies zusammengeführt wurde, mache ich die Optimierung auf node-vibrant

Mit der Veröffentlichung von Jimp 0.8.4 ist dies nun möglich! Ich werde heute Abend eine PR damit eröffnen! :D

Warten auf https://github.com/oliver-moran/jimp/pull/815 , um einige Probleme nach jimp 0.8.4 mit dem Import zu beheben

Dies wurde ab der Version 3.1.5 behoben

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen