Bundle Bower Komponenten in separaten Anbieter HTML als in Shell definiert in polymer.json

Question

Ich versuche, meine Polymer-Anwendung durch Polymer cli zu bündeln. Meine Anwendung zieht Daten bis zu 275kb für eine einfache Seite hoch.

In meiner polymer.json-Datei habe ich alle meine benutzerdefinierten Polymerelemente mit src/my-app.html als Shell fragmentiert. Das Problem ist, dass meine src/my-app.html nach dem Erstellen meiner Anwendung eine Größe von 273kb im gebündelten Ordner hat. Dies ist eine große Größe, wenn man bedenkt, dass ich Angular und React nur umgangen habe, um weniger Bundle (Anbieter-Bundle) und mehr Chunked-Dateien zu erhalten, um lazyloaded zu werden. Ich hatte gehofft, dass Polymer mir separate Brocken von Lieferantenbündeln geben könnte, aber ich bin nicht in der Lage, das zu erreichen.

Ich habe versucht, dies in Fragmente Array von polymer.json - "bower_components/polymer/polymer.html" zu schreiben. Und ich schrieb "bower_components/**/*" in SourceGlobs-Array. Und ich habe versucht, wieder aufzubauen. Ich hatte gehofft, dass ich eine separate polymer.html Datei in meinem Build bekommen würde. Aber ich habe mehrere Fehler im Terminal und meine src/my-app.html ist immer noch 273kb.

Der Fehler im Terminal dargestellt sind:

warn: Unable to optimize .js file /home/local/JASPERINDIA/vineet.dev/projects/polymer-starter-vin/bower_components/marked-element/demo/index.html_script_0.js 
{ err: 
    { message: 'SyntaxError: Unexpected character \'#\'', 
    filename: 0, 
    line: 2, 
    col: 10, 
    pos: 11, 
    stack: 'Error\n at new JS_Parse_Error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1547:18)\n at js_error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1555:11)\n at parse_error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1679:9)\n at Object.next_token [as input] (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1951:9)\n at next (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2080:25)\n at Object.parse (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2066:15)\n at addFile (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:72:33)\n at /usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:81:17\n at Array.forEach (native)\n at Object.exports.minify (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:79:26)' } } 

Es wie oben mehrere Fehler der gleichen Art sind.

Ich weiß, ich kann Gzip, aber das wird keine befriedigende Lösung sein.

Jede Hilfe wäre willkommen. Danke

Answer 1

Ich habe keine spezifische Antwort, die Ihre Sorge mit der Größe Ihrer Shell-Datei adressiert, aber ich habe ein paar Hinweise.

• polymer-build wurde kürzlich to use a new and improved bundler aktualisiert, die ein separates Bündel für die gemeinsame Abhängigkeiten umfassen das Erstellen (einschließlich denen, die in my-app.html im Polymer Starter Kit gebündelt sind). Es kann sich lohnen, die kommende Version von Polymer CLI zu testen, die diesen neuen Bundler enthält.

• Sie sollten polymer.html nicht als Fragment angeben. Fragmente sind für Lazy-Loaded-Ansichten gedacht. Zum Beispiel werden in dem Polymer-Starter-Kit my-view1.html, my-view2.html, my-view3.html, usw. mit importHref lazy geladen. Diese Dateien sind nicht explizit in einem HTML-Import, so dass sie unter fragments in polymer.json aufgelistet werden müssen.

• Sie sollten bower_components/**/* unter sourceGlobs (oder sources) nicht auflisten. Dies teilt polymer-build mit, um Ihr gesamtes Verzeichnis bower_components, einschließlich devDependencies (für die Laufzeit unnötig), in die Build-Ausgabe zu kopieren.

• Die Warnung, die Sie notiert haben, ist ein gutartiger Uglify-Fehler (GitHub issue). Der Build wird weiterhin erfolgreich abgeschlossen, aber die Datei, die von dem Uglify-Fehler betroffen ist, wird kein JavaScript minimieren.