Bündelung und Verkleinerung von angular2 Projekt, Js und Html

Question

Seit einiger Zeit arbeite ich an einem angular2 Projekt, nachdem ich es von angular1 aktualisiert habe (liebevoll angular2 btw).

Jetzt möchte ich das Projekt bündeln, aber nicht sicher, was ist der beste Bundler zu verwenden? Auch ich sehe einige Beiträge sagen, dass sie das Bündel in mehrere Dateien (wie app.bundle.js und vendors.bundle.js) aufteilen und andere haben 1 große Datei. Was ist die beste Methode? Ich habe immer verstanden, dass viele Dateien besser sind, weil Browser mehrere Dateien gleichzeitig herunterladen können? Benötigen Sie eine Schluckaufgabe für all dies oder etwas anderes vollständig?

Wie kann ich die HTML-Vorlagen in einer angular2-App minimieren?

Answer 1

Sie können Webpack oder Systemjs-Builder verwenden, um Ihre App zu bündeln. Es gibt Tonnen von Seed-Projekten, von denen Sie Hinweise, z.B. this und this und Sie können in Ihrer Schluckaufgabe this verwenden, um die Vorlagen mit Ihrem Build zu verknüpfen.

Answer 2

Jetzt möchte ich das Projekt bündeln, aber nicht sicher, was ist der beste Bundler zu verwenden?

Alle Antworten auf Ihre Fragen sind subjektiv, aber es ist eine Tatsache, dass Webpack Plugins und Konfigurationseinstellungen anbietet, die Ihren Anforderungen entsprechen.

Auch ich sehe einige Beiträge sagen, dass sie das Bündel in mehrere Dateien (wie app.bundle.js und vendors.bundle.js) aufteilen und andere haben 1 große Datei. Was ist die beste Methode?

Das Aufteilen in mehrere Dateien ist definitiv die gebräuchlichste Methode. Es erlaubt Ihnen, Ihren Anwendungscode getrennt von Ihren Abhängigkeiten zu halten, was das Debugging weniger zu einem Albtraum macht.

Der Teil Ihrer Webpack Konfigurationsdatei, die so etwas wie dies aussehen könnte Griffe:

// our angular app 
    entry: { 'vendor': './src/vendor.ts', 'main': './src/main.ts' }, 

    // Config for our build files 
    output: { 
    path: '', 
    filename: '[name].bundle.js', 
    sourceMapFilename: '[name].map', 
    chunkFilename: '[id].chunk.js' 
    }, 

Haben Sie einen Schluck Aufgabe auch vollständig für all dies, oder etwas verwenden müssen?

Wenn Sie Webpack verwenden, wird Gulp überhaupt nicht benötigt. Ich würde empfehlen, nur NPM-Skripte zu verwenden. Zitieren Sie mich nicht, aber ich denke, dass Webpack Gulp für Angular2-Projekte ersetzen kann.

Wie kann ich die HTML-Vorlagen in einer angular2-App minimieren?

Webpack hat hierfür eine HTML minify plugin.

Sie können es wie so verwenden:

loaders: [ 
     { 
       test: /\.html$/, 
       name: "mandrillTemplates", 
       loader: 'raw!html-minify' // raw is another loader 
     } 
    ]