2

私は Angular 2 を初めて使用し、HMR を自分の Angular 2 プロジェクトに実装したいと考えています (ページのリロードまでの待ち時間が非常に混乱するため)。

4

1 に答える 1

1

どのようなビルドツールを使用していますか? Systemjsまたはwebpack?

Webpack を使用している場合、ビルドを高速化するためにできることはほとんどありません (一般に、Webpack は angular チームによって angular2 プロジェクトに推奨されるツールです)。

  • アプリケーションをアプリケーション、ベンダー、およびポリフィルの部分に分割します。

コード：

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をご覧ください(このリポジトリは、angular チームによって作成されたものよりも便利なようです)

  • この改善を行ったら、いよいよ HMR を実装します。

残念ながら、私は今これを理解しすぎているので、あまり役に立ちません。幸いなことに、前の 2 つの手順により、コンピューターでのビルドが約 20 秒からほぼ瞬時に + ページのリロードまで高速化されるため、合計で約 5 秒になります。

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

3 つのセットアップを行う必要があります。1 つはビルド dll、1 つはビルド前の dll を使用する開発ビルド用、3 番目は本番用に最適化されたもので、遅くて面倒ですが、小さな出力ファイルを生成します。

于 2016-12-16T09:22:08.353 に答える