如何在将文件部署到服务器之前缩小文件

Question

我想提高前端网站的性能，我发现最佳实践之一是缩小我的文件。搜索后我决定使用 terser 包。我以前从未这样做过，所以有些地方让我感到困惑。

1- 在构建项目之前，我是否必须使用缩小的文件更改 HTML 标头中的脚本和 CSS 链接（我正在使用 Parcel）？

所以他们会变成：

<!-- <link rel="stylesheet" href="old-style.css" /> -->
<link rel="stylesheet" href="style.min.css" />
<!-- <script type="module" defer src="old-app.js"></script> -->
<script type="module" defer src="app.min.js"></script>

2-就我而言，我有

app.js

文件导入其他文件：

import { revealContent } from "./script/revealContent.js";
import { gsapAnimation } from "./script/gsapAnimation.js";
import { map } from "./script/map.js";
import { showPopup, closePopup } from "./script/reservationPopup.js";
import { validateDate, validatePhone, validateForm, errorMessage} from "./script/validateData.js";
import { slider } from "./script/slider.js";

我应该在

app.js

之前缩小它们还是顺序无关紧要？

3-如果以前的脚本文件被缩小并且它们现在位于 ./script/min-script/ 文件夹中，那么在缩小 app.js 时，terser 是否能够知道它们的新目的地，以便该过程正确完成？

4-完成缩小过程后，我猜包裹

build

命令应该用于新的缩小 HTML，其中包含指向缩小 CSS/JavaScript 文件的链接，对吗？

非常感谢您的帮助

Answer 1

嘿那里！ 当您缩小 CSS 和 JavaScript 文件时，您应该更新 HTML 中的引用以指向缩小版本。因此，在您的 HTML 中，使用如下链接：

<link rel="stylesheet" href="style.min.css" />

如果将缩小的脚本文件移动到其他文件夹（例如“./script/min-script/”），则需要更新“app.js”中的导入路径以反映新位置。 Terser 不会自动知道文件的新目的地，因此请确保相应地调整导入路径。

例如，如果您的“revealContent.js”文件已移至“./script/min-script/revealContent.js”，请像这样更新“app.js”中的导入：

import { revealContent } from "./script/min-script/revealContent.js";

缩小过程之后，您确实应该对引用缩小的 CSS 和 JavaScript 文件的更新的 HTML 文件使用 Parcel build 命令。确保您的 HTML 文件指向缩小文件的正确路径。

parcel build path/to/your/minified/index.html