Über die Verwendung von Vue (vue-loader) + Webpack und Chromatismus
Beispiel: (auf dev / source)
%Vor% Kann Webpack in Build-Version in rgb(0,0,0) konvertiert werden?
In der Build-Version sollte also Folgendes konvertiert werden: (für Leistung )
%Vor% Da frühere Antworten und Kommentare bereits erwähnt haben, dass es keine leicht verfügbaren AOT-Compiler für diese Art von Situation gibt (ich meine, dies ist ein sehr spezifischer Fall und kein Allzweck-Tool könnte damit umgehen), gibt es Nichts hält dich davon ab, dein eigenes Loader / Plugin zu veröffentlichen, um diese Aufgabe zu meistern!
Sie können einen benutzerdefinierten Webpack Loader und Node's VM Module , um den Code zur Buildtime auszuführen, seine Ausgabe zu erhalten und sie durch den Funktionsaufruf in Ihrer Quelldatei zu ersetzen.
Eine Beispielimplementierung dieser Idee kann wie folgt aussehen:
Dann in Ihrem production.webpack.js (oder einer ähnlichen Datei) aus diesem Problem :
%Vor%HINWEIS: Dies ist nur eine Referenzimplementierung und ist weitgehend unvollständig. Die hier verwendete Regex ist ziemlich einfach und deckt möglicherweise nicht viele andere Anwendungsfälle ab. Stellen Sie daher sicher, dass Sie die Regex aktualisieren. Auch dieses ganze Zeug kann mit Hilfe von Webpack-Plugins implementiert werden (ich weiß nur nicht, wie ich es erstellen kann). Für einen schnellen Einstieg siehe dieses Wiki , um zu erfahren, wie man ein benutzerdefiniertes Plugin erstellt .
Die Grundidee ist einfach.
Erstellen Sie zuerst eine Sandbox-Umgebung,
let sandbox = { chromatism:chromatism, ...}
Erstellen Sie anschließend einen Ausführungskontext,
let context = new vm.createContext(sandbox)
Führen Sie dann für jede gültige Quelle die Quellanweisung im Kontext aus und rufen Sie das Ergebnis ab.
let result = (new (vm.Source)(source)).runInContext(context)
Ersetzen Sie dann möglicherweise die ursprüngliche Quellanweisung durch das Ergebnis.
Verwenden Sie Rückruf , um Ihr gesamtes JavaScript zu verarbeiten. Definieren Sie eine Callback-Funktion für diesen speziellen Fall oder sogar etwas allgemeineres:
evalDuringCompile: function(code) { return JSON.stringify(eval(code)); }
Der State of Art-Optimierer kann keine willkürlichen Ausdrücke verarbeiten. In diesem Fall ist die zuverlässigste Lösung eine feste Code-Konstante in Ihrem Code.
%Vor%Ein futuristischer Optimierer kann mit einer solchen Situation umgehen. prepack wird den Code zur Kompilierzeit auswerten und berechnete Werte ausgeben. Es wird jedoch im Allgemeinen nicht als produktionsbereit angesehen.
Tags und Links javascript performance variables vue.js webpack