JS 压缩

在开发小型或大型项目时，我们经常会遇到代码运行缓慢的问题，这会严重影响可读性。此外，在许多情况下，代码可以轻松地缩短，但由于空间限制，开发人员倾向于利用这些空白区域，而没有意识到它们可以被优化。这个问题主要困扰新手，因为他们无法编写有效的工业级代码。为了解决这类问题，我们使用各种工具，其中之一就是代码压缩。在本文中，我们将更详细地介绍它。让我们开始吧。

代码压缩可以定义为移除源代码中所有不必要的字符或实例的过程。虽然它可能因语言而异，但不会改变其功能。

重要性

不仅 JavaScript 的代码压缩很重要，像 HTML 和 CSS 这样的与之相关的子项也需要进行压缩，因为我们可以节省宝贵的页面加载时间。代码压缩可以加快应用程序启动和代码处理速度，比普通的笨拙代码格式更快。我们并不是说将加载速度缩短一半左右，但对于需要快速响应的网站来说，代码压缩变得非常重要。需要注意的是，当网站加载缓慢时，用户会觉得很麻烦，这不仅会打扰首次访问者，还会降低页面在浏览器中的排名，从而影响整体表现。

因此，在编程术语中，“minify”这个词用来定义移除无用字符的过程，包括空格、块的结束符、注释和换行符，这些字符在美化方面可能看起来不错，但对机器来说通常没有用，因为它们都被转换为二进制，并且这些不必要的字符确实具有一些 ASCII 值，占用了内存空间。这就是为什么页面加载速度会因为这些字符的无用处理而受到影响。

为了使其在视觉上更有效，让我们通过下面安装过程中的步骤开始安装 minify。

安装

Minification 是一个中间件，所以我们需要安装它的依赖项以在Node.js环境中进行安装，因为我们处理的是 JavaScript。要在本地系统上安装 minify，请键入给定的命令。

如何使用？

下面的 CLI 命令会创建一个保存为hello.js的代码片段。我们只需要复制粘贴它，包括行末的EOT，然后按 Enter 键。

现在，我们需要使用 minify 命令，后面跟着要压缩的 JavaScript 文件名所在的路径。最终，代码将被压缩，输出将显示在屏幕上。

代码现在似乎被压缩到了一行。因此，将生成的输出如下所示。

让我们用另一个例子来理解 JavaScript 中的代码压缩过程是如何工作的。

Minify 是一个功能强大的工具，可以作为 JavaScript 中的 Promise 来使用。下面的例子展示了一个这样的例子。

另一种可以进行代码压缩的方法是使用async-await和try-to-catch方法。请参考以下代码片段。

虽然我们已经讨论了上述代码片段，这些代码片段可能相当难以实现，但在线上仍然有许多选择。准确地说，有在线 JavaScript 压缩工具可以处理移除不必要的冗余字符。

在上面的代码片段中，我们试图让您熟悉NPM上的软件包，该软件包专门用于通过命令行处理代码压缩的各个方面。

选项

Options 对象可以接受不同的配置，不仅是 JavaScript，还包括 HTML 和 CSS。

JavaScript 中的代码压缩示例

让我们考虑一些示例，通过这些示例，我们可以轻松地可视化代码压缩是如何工作的。在之前的代码片段中，我们已经讨论了如何通过命令行将代码压缩框架到我们的系统中的后端方法。让我们通过许多提供缩短或压缩 JavaScript 功能的网站来可视化这一点。

示例 1：数字求和

压缩后的输出

 let naturalSum=function(u){return 
u<=0?0:u+naturalSum(u1)};document.write(naturalSum(10));

示例 2：斐波那契数列

压缩后的输出

  var a=0,b=1,fibValue=0;let 
fibnocci=function(i){i>0&&(fibValue=a+b,a=b,b=fibValue,
document.write(" "+fibValue),fibnocci(i-1))};document.write(a+" "+b+" 
"),fibnocci(5);

CDN 视角

从CDN的角度来看，代码压缩可以被视为一项主要组件，旨在实现前端优化 (FEO)。它可以被称为一套工具和技术，可以逐渐减少相关的网页请求，并减小文件大小。

然而，代码压缩有时在执行和管理不同文件时可能很麻烦。如果文件大小太大或源代码有庞大的代码库，手动压缩通常被认为是糟糕的做法。就自动化工具而言，通过复制粘贴指定的代码片段可以轻松处理，无论代码库有多大，它都会自动进行压缩。尽管如此，自动化工具有时可能会带来挑战，因为我们可能被迫将不同的开发文件和生产文件分开。此外，保持它们同步也极其麻烦。

这个问题可以通过内容分发网络 (CDN)来解决。使用 CDN 的自动化代码压缩不需要额外开销来压缩不同的文件。它将从主服务器上的原始或未压缩文件中自动提取。它还会同步从代码压缩生成的压缩变体缓存文件。如今使用的一个 CDN 是Imperva CDN。它会自动压缩存储在其服务器上的复杂 JavaScript 文件，以减少加载时间。这无需用户端的任何配置即可完成，并且会自动管理以节省时间，同时保护原始文件以及压缩或精简后的文件。在代码压缩中使用 CDN 的另一个好处是能够防御DDoS或网络钓鱼等主要攻击。

代码压缩的优点和缺点

优点

1. JavaScript 代码压缩可以减少页面加载时间。
2. 提高 Web 应用程序或网站的整体性能。
3. 提高网站在互联网上的页面排名。
4. 促进请求和响应的更快执行。
5. 采用更快捷的方法来获得 Web 应用程序或网站中某些操作的动力。

缺点

1. 代码有时可能看起来笨拙或难以阅读。
2. 移除特殊字符或空格可能会让开发人员感到困惑。
3. 缓存文件可能无法正确处理。
4. 语法获取可能看起来约束性较小。
5. 压缩后的代码的可读性增强。

结论

在本文中，我们深入了解了代码压缩。它不仅限于 JavaScript，还可以与 HTML 和 CSS 紧密集成，因为 JavaScript。因此，代码压缩可以称为从我们的网站或 Web 应用程序的页面和脚本文件中最小化代码、标记和 Markdown 的过程。它是处理依赖于交付性能的网站的时间和带宽使用的最有效方法之一。代码压缩逐渐提高了任何网站的访问速度，从而直接转化为更好的最终用户体验。这对于使用有限数据计划访问网络内容的用户以及喜欢在浏览网络时节省带宽的用户来说非常有益。

此外，我们注意到，在创建 JavaScript 文件时，开发人员似乎倾向于使用过多的空格和注释来简化调试，而没有意识到他们正在构建的项目或产品可能会遇到性能问题。他们还倾向于使用简短的变量名，这使得代码库占用比通常更多的空间。这会让他们在生产阶段遇到问题，因为在开发阶段，代码易于阅读且注释良好可能听起来是个好主意。但当涉及到在生产环境中提供页面时，人们不会因为担忧而提出问题，也不会留下生产效益。这就是为什么我们使用 minify 方法来处理如此巨大的问题。