2

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

4

1 回答 1

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 进行开发构建，第三种为生产优化，缓慢而痛苦，但产生的输出文件很小。

于 2016-12-16T09:22:08.353 回答