2016-08-12 10 views
0

angular2からの更新後、しばらくの間、angular2プロジェクトに取り組んでいました。angle2プロジェクト(JsとHtml)のバンドルと縮小

私はこのプロジェクトをバンドルしたいと思いますが、使用するには最適なバンドラは何ですか? また、バンドルを複数のファイル(app.bundle.jsやvendors.bundle.jsなど)に分割し、他に1つの大きなファイルがあると言う記事もあります。最善の方法は何ですか?私はいつもブラウザが同時に複数のファイルをダウンロードできるので、多くのファイルが良いと思っていましたか? これはすべて、または他の何かのための麻薬のタスクを使用する必要がありますか?

また、Angular2アプリでHTMLテンプレートをどのように縮小できますか?

答えて

0

WebpackまたはSystemjs-Builderを使用してアプリケーションをバンドルすることができます。あなたがヒントを取ることができる種のプロジェクトがたくさんあります。 thisthisであり、gulpタスクでthisを使用すると、ビルドでテンプレートをインライン化できます。

0

私はこのプロジェクトをバンドルしたいと思いますが、使用するには最適なバンドラは何ですか?

あなたの質問に対するすべての回答は主観的なものですが、Webpackはニーズに合わせてプラグインと設定を提供しています。

また、バンドルを複数のファイル(app.bundle.jsやvendors.bundle.jsなど)に分割し、他に1つの大きなファイルがあると言う投稿があります。最善の方法は何ですか?

複数のファイルに分割するのが最も一般的な方法です。これにより、アプリケーションコードを依存関係から分離しておくことができます。これにより、デバッグを悪夢に近づけないようになります。

これは、このようになります扱うあなたのWebPACKの設定ファイルの一部:

// 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' 
    }, 

は、あなたが完全にすべてこのためにゴクゴクタスクを使用する必要がある、または何か他のものですか?

Webpackを使用する場合、Gulpはまったく必要ありません。 NPMスクリプトを使用することをお勧めします。これについて私を引用してはいけませんが、私はWebpackがAngular2プロジェクトのGulpを置き換えることができると思います。

また、Angular2アプリでHTMLテンプレートをどのように縮小できますか?

WebpackにはHTML minify pluginがあります。

あなたはそうのようにそれを使用することができます:

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