Angular 2プロジェクトでHMR（Hot Module Reload）を実装する方法（段階的）

Question

私はAngular 2の新機能で、Angular 2プロジェクトにHMRを実装したいと思っています。なぜなら、ページを読み込むまで待つのは非常に混乱しているからです。

Answer 1

どのようなビルドツールを使用していますか？ Systemjsまたはwebpack？あなたはWebPACKを使用している場合は

あなたが作るためにできることがいくつかあり、アプリケーション、ベンダーとpolyfills一部で

• デバイドアプリケーション高速化（角度チームによるangular2プロジェクトのために、一般的にWebPACKのお奨めされたツール）を構築しています：

コード：

entry: { 
    app: [ helpers.root('src/main.browser')], 
    vendor: [helpers.root('src/vendor.browser')], 
    polyfills: [helpers.root('src/polyfills.browser.ts')] 
}, 

これは、あなたが--watchモードを使用する場合は、あなたの繰り返しビルドをスピードアップします - >変更されたファイルのみがリロードされます。

• 最初のDLLを使用することを検討して構築スピードアップするために - >ダイナミックリンクライブラリ

（このリポジトリは、角のチームによって作られたものよりも有用と思われる）

を https://github.com/qdouble/angular-webpack2-starter.gitをご覧ください
• この改良を施したら、最終的にHMRを実装する時間になります。

残念ながら、私はあまりにも今これを理解しているので、私はあまり助けにならない。幸いなことに、前の2つのステップで、コンピュータの20秒からほぼ即時+ページの再読み込みまでの時間が短縮され、合計5秒に短縮されました。

私が提供したgit repoへのリンクは、物事を理解するのに役立つはずです。

1つのビルドdll、1つはビルド前のDLLを使用した開発ビルド、もう1つはプロダクション用に最適化されていますが、遅くて苦しいですが、小さな出力ファイルを生成する必要があります。