Angular2 WebPack 捆绑调试需要很长时间答案

【问题标题】：Angular2 WebPack Bundling for debugging takes foreverAngular2 WebPack 捆绑调试需要很长时间
【发布时间】：2017-01-24 21:49:24
【问题描述】：

我使用 Angular2 CLI 来创建我的项目脚手架。它使用 Webpack。当我进行开发时，每次我进行更改并保存它时，Webpack 必须重新创建捆绑包，然后我才能重新加载我的页面并查看更改。实际上，它只有 10-12 秒，但对于调试来说，这是一个 eon。有时，捆绑和重新加载页面所需的时间是进行更改所需时间的 4 倍。真让人抓狂。难道我做错了什么？我没有更改任何 Angular CLI 或 webpack 设置，因为我什至不知道从哪里开始。我的项目（还）不是特别大 - 到目前为止 5-6 个非常简单的组件。

有什么想法吗？

谢谢，

戴夫

【问题讨论】：

感谢 Fabien 和 John 的回复。不幸的是，我看起来像 SOL，因为根据this，Angular CLI 不提供对 webpack 配置的访问。无赖... :-(

标签： angular webpack angular-cli

【解决方案1】：

这可能对您的构建有所帮助，将其添加到您的 webpack 配置中；

  cache: true,
  devtool: 'cheap-module-source-map',

也可以看看这个：https://webpack.github.io/docs/build-performance.html

【讨论】：

【解决方案2】：

在开发过程中加快 webpack 的两个选项。

您可以使用 Webpack DLL 预构建库。这基本上需要一个 javscript 文件（即 vendor.ts），其中包含您要预构建的模块列表，并生成一个 JS 文件，该文件将在您下次构建 webpack 时自动使用，而不是一次又一次地构建每个模块。
您可以使用 HMR（热模块重新加载）。这意味着您可以运行一次 webpack，它会等待您将来对任何源文件（javascript/html/CSS/LESS/etc）进行任何更改。当你点击 Save 时，webpack-dev-server 将检测到你已经更改了一个文件，并且将只构建一个文件并使用套接字自动将其传输到浏览器，并且浏览器只会更新那个模块和任何依赖的模块.您甚至可以保持相同的应用状态，这样您就不必刷新浏览器，并且浏览器状态将在您保存之前离开的地方继续。

【讨论】：