Angular 2快速啓動項目的捆綁和縮小

Question

如何對Angular 2快速啓動項目進行捆綁和縮小以減少初始加載時的HTTP請求？

在快速啓動項目的第一頁加載時，大約有300個http請求生成，這需要很多時間。

我在一些博客上看到，捆綁和縮小可以有助於減少這種調用。

角2有很多方法。 Web pack SystemJs angular CLI

但我無法找到如何使用任何這些快速啓動項目。

Answer 1

您可以使用Angular Compiler來執行此操作。有幾種方法可以實現。

選項1：泊塢 如果您已經使用泊塢窗和/或碼頭，撰寫，這是一個相當不錯的選擇，而且超級簡單。我製作了一個容器，可以觀看您的應用程序源並在每次保存文件時進行構建。您可以使用容器像這樣（注意，圖像大約是600MB - 對不起，棱角分明的編譯器實際上是巨大的！）：

docker run --rm -v $(pwd)/src treyjones/ng build -w 

在這種情況下，我假設你的應用程序是src。

您還可以使用這個命令來查看完整的說明文檔ng：

docker run --rm treyjones/ng -h 

真正找到完整的在線文檔已被證明很難，對我來說。

如果你不想使用docker來做這件事，你也可以只做容器的事情，被警告，它仍然是一個巨大的安裝，只是通過節點而不是docker。這兩個選項：

npm i angular-cli@1.0.0-beta.24 -g 

選擇2 - 它package.json添加到項目的依賴：

"devDependencies": { 
    "angular-cli": "1.0.0-beta.24" 
} 

beta.24是NPM列出的最新版本。我只使用beta.18。但是，我可以確認構建過程非常順利，對我來說工作得非常好。

You can read a little bit more about how this is intended to work on github。

Answer 2

爲避免加載數百個小文件，您通常使用捆綁器（如webpack）創建所謂的捆綁包。 Webpack是一個解決項目內部依賴關係的工具，並提供了對Typescript，Javascript，ES2015模塊導入等方面的很好的工具。

要了解工作情況，請查看angular2-webpack-starter項目。

此外Angular CLI使用引擎蓋下的webpack。

如果你有興趣使用webpack，讓我說學習曲線非常陡峭。不要試圖理解一個完整的項目，比如上面提到的angular2-webpack-starter項目。而是從更簡單的事情開始，例如webpack教程的getting started部分。

Answer 3

我發現要做到這一點的最簡單的方法是擁有大量的增長空間，就是將這個「模板」用於角度2項目。它還爲建築生產提供了一個很好的可視化。 AoT, Minification, Webpack, etc... template