Angular CLI 构建 dist，无需更新资产（例如图像）的修改时间

Question

有没有办法告诉 Angular 4 CLI 将资源复制到 dist 文件夹中而不更新文件修改日期/时间？

我的部署应用程序复制所有更改的文件，并且由于资产文件夹中的所有文件都会获得新的修改日期/时间，因此每次都会复制所有内容 - 包括大量永不更改的图像和文档。

我正在考虑将资产文件夹移出项目并单独复制它们，但这让我很烦恼。

Answer 1

我假设您使用自动化脚本进行部署，在其中运行修改时间戳的复制命令。考虑使用具有保留原始时间戳选项的实用程序替换常规复制命令。

例如，您可以在 npmjs.org 上找到 fs-extra 包，其中有一个选项preserveTimestamps。该软件包还有一个包装器 fs-extra-cli，允许您从命令行运行该实用程序：https://www.npmjs.com/package/fs-extra-cli

这应该可以解决问题。

Answer 2

我可以通过直接修改 Angular v14 构建代码来做到这一点。然后，我使用 patch-package 将这一更改保留到我的代码库中。

这是生成的补丁代码，其中包括文件名

node_modules/@angular-devkit/build-angular/src/utils/copy-assets.js

我添加的两行使用

fs.statSync

从原始文件中读取时间戳，然后使用

fs.utimesSync

将它们写入复制的文件。

@@ -1,3 +1,17 @@
+diff --git a/node_modules/@angular-devkit/build-angular/src/utils/copy-assets.js b/node_modules/@angular-devkit/build-angular/src/utils/copy-assets.js
+index 2eb79a8..ed1f9f1 100644
+--- a/node_modules/@angular-devkit/build-angular/src/utils/copy-assets.js
++++ b/node_modules/@angular-devkit/build-angular/src/utils/copy-assets.js
+@@ -69,6 +69,9 @@ async function copyAssets(entries, basePaths, root, changed) {
+                     directoryExists.add(dir);
+                 }
+                 fs.copyFileSync(src, dest, fs.constants.COPYFILE_FICLONE);
++                // This patch added so that copied assets retain their original createdAt/updatedAt timestamps, which will improve browser caching and deployments
++                const stat = fs.statSync(src);
++                fs.utimesSync(dest, stat.atime, stat.mtime)
+             }
+         }
+     }