Angular 8：如何高效实现dist文件夹自动更新并直接启动？

你现在遇到的问题我很理解——不想用ng serve直接运行，希望基于生成的dist文件夹启动服务，但全量构建速度慢，还得手动触发流程。下面给你几个针对性的高效解决方案：

方案1：增量构建+文件监听+并行启动服务 #

Angular本身支持增量构建，只重新编译修改过的文件，能大幅提升构建速度。结合文件监听和并行运行服务的工具，就能实现修改文件后自动更新：

1. 首先安装concurrently（用来同时运行多个命令）：

npm install --save-dev concurrently

2. 修改package.json里的start-dev脚本：

"scripts": {
  "start-dev": "concurrently \"ng build --watch --configuration development\" \"http-server dist\""
}

• ng build --watch --configuration development：开启监听模式，使用开发配置进行增量构建，文件修改时自动重新生成dist内容
• concurrently：让构建监听和http服务同时运行，不用等构建完成再启动服务

方案2：使用ESBuild构建引擎（Angular 16+） #

如果你的Angular版本是16及以上，可以用官方的ESBuild构建器，它比默认的Webpack快好几倍，配合监听模式效果更好：

修改脚本为：

"scripts": {
  "start-dev": "concurrently \"ng build --watch --configuration development --builder=@angular-devkit/build-angular:browser-esbuild\" \"http-server dist\""
}

ESBuild是基于Go语言的构建工具，编译速度提升非常明显，尤其适合中大型项目。

方案3：自定义监听脚本（进阶） #

如果你想更灵活控制流程，可以用chokidar这类文件监听工具，自定义触发构建的逻辑，比如只监听特定目录的文件变化：

1. 安装依赖：

npm install --save-dev chokidar-cli

2. 编写脚本：

"scripts": {
  "build-dev": "ng build --configuration development",
  "watch-files": "chokidar \"src/**/*\" -c \"npm run build-dev\"",
  "start-dev": "concurrently \"npm run watch-files\" \"http-server dist\""
}

这个方案适合需要精细化控制监听范围的场景，比如只监听src/app目录的变化。

额外小技巧 #

• 可以给http-server加上自动刷新参数：http-server dist -c-1 -o，-c-1禁用缓存，-o自动打开浏览器，修改文件后刷新页面更顺畅
• 开发配置里可以关闭一些不必要的优化，比如在angular.json的configurations.development中设置optimization: false、sourceMap: true，进一步提升构建速度

内容的提问来源于stack exchange，提问作者Naman Jain