如何在我的 Angular 2 项目中实现 HMR（热模块重载）（逐步）？答案

【问题标题】：How to implement HMR (Hot Module Reload ) in my Angular 2 project (step-by-step)?如何在我的 Angular 2 项目中实现 HMR（热模块重载）（逐步）？
【发布时间】：2017-01-29 05:56:25
【问题描述】：

我是 Angular 2 的新手，我想在我的 Angular 2 项目中实现 HMR（因为等待页面重新加载的大量时间对我来说非常混乱）。

【问题讨论】：

标签： angular webpack-hmr hot-module-replacement

【解决方案1】：

您使用哪种构建工具？ Systemjs 还是 webpack？

如果您使用 webpack，您可以做一些事情来加快构建速度（通常 webpack 是 angular 团队推荐用于 angular2 项目的工具）

将您的应用程序划分为应用程序、供应商和 polyfill 部分：

代码：

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 的时候了。

不幸的是，我现在太想通了，所以我帮不上什么忙。幸运的是，前两个步骤将构建速度从我的计算机上的大约 20 秒加速到几乎即时 + 页面重新加载，因此总共大约 5 秒。

我提供的 git repo 的链接应该有助于解决问题。

您应该进行 3 种设置：一种构建 dll，一种用于使用预构建 dll 进行开发构建，第三种为生产优化，缓慢而痛苦，但生成的输出文件很小。

【讨论】：