用于调试的Angular2 WebPack捆绑永远需要花费大量时间

Question

我使用Angular2命令行界面来创建我的项目脚手架。它用的是Webpack。当我进行开发时，每次我进行更改并保存它时，在我重新加载页面并看到更改之前，Webpack都必须重新创建包。实际上，这只需要10-12秒，但对于调试来说，这是一个很长的时间。有时，捆绑和重新加载页面所需的时间是进行更改所需时间的4倍。真让人抓狂。我做错了什么吗？我没有改变任何角度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将检测到你已经更改了一个文件，并将只构建一个文件，并将它自动传输到浏览器使用套接字，浏览器将只更新一个模块和任何依赖的模块。您甚至可以保持相同的应用程序状态，这样就不必刷新浏览器，浏览器状态将从保存之前中断的位置继续。