用于调试的Angular2 WebPack Bundling需要永远

Question

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

有什么想法吗？

谢谢，

戴夫

Answer 1

这可能对您的构建有所帮助，请在您的webpack配置中添加;

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

也请查看：https://webpack.github.io/docs/build-performance.html

Answer 2

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

1. 您可以使用Webpack DLL预构建库。这基本上需要一个javscript文件（即vendor.ts），其中包含您要预建的模块列表，并生成一个JS文件，该文件将在您下次构建webpack时自动使用，而不是一次又一次地构建每个模块。

2. 您可以使用HMR（热模块重新加载）。这意味着您可以运行webpack一次，它将等待您对任何源文件（javascript / html / CSS / LESS / etc）进行任何更改。点击“保存”后，webpack-dev-server将检测到您已更改文件，并且只能构建一个文件，并将使用套接字自动将其传输到浏览器，浏览器将仅更新该模块和任何相关模块。您甚至可以保持相同的应用程序状态，这样您就不必刷新浏览器，浏览器状态将在您保存之前从中断处继续。