如何最小化JavaScript – 推荐的工具和方法

WBOLT_COM 2 月 14, 2023 1.4k+ 0

如何最小化JavaScript - 推荐的工具和方法

大多数用户都希望有一个优雅的网络浏览体验，而JavaScript长期以来一直是开发者的最爱，以提供这种高级的体验。

然而，JavaScript不仅是为了让网站看起来更漂亮。它还直接影响到网站的性能和成功。加快网站速度或缩短页面加载时间–这两个概念是JavaScript开发的核心–是改善用户体验的关键因素。

如果你想在最短的时间内提升网站的性能，你需要熟悉JavaScript的最小化。它将帮助你从你的JavaScript源代码中排除所有不必要的字符而不改变其功能。更重要的是，它将减少你的网站的加载时间和带宽使用。

JavaScript的最小化可能是很棘手的。在这篇文章中，我们将制定一个方案，帮助你为WordPress和非WordPress网站的JavaScript代码进行最小化。

什么是JavaScript？
什么是代码最小化？
为什么要对JavaScript代码进行最小化？
最小化、美化和压缩的区别
如何最小化JavaScript代码

什么是JavaScript？

JavaScript

JavaScript (图片来源: Medium)

JavaScript是一种面向文本的脚本语言，用于在客户端和服务器端创建互动网站。与大多数语言相比，它是一种更简单、更不复杂的语言，这也是它被广泛使用的原因。

HTML和CSS构建了一个网站的结构，而JavaScript增加了复杂的功能，为你的网站带来互动性，以吸引用户。例如，JavaScript提供了复杂的元素，如滚动的视频点唱机、2D/3D视频和互动地图。

值得注意的是，网络浏览器可以理解JavaScript。因此，与HTML和CSS一起，如果你对网络开发感兴趣，它是一个熟练的选择。如果你需要创建一个高度互动的网站，并在所有浏览器中无障碍运行，那么JavaScript是你可以采用的最可靠的选择。

什么是代码最小化？

最小化也被称为最小化。代码最小化意味着优化代码，以节省空间，减少页面加载时间，并降低网站带宽使用。然而，最大的问题是在不改变功能的情况下最小化代码。

代码最小化在所有核心编程技术中都是可能的，包括HTML、CSS，以及–正如我们即将看到的–JavaScript。然而，这个过程并不是一蹴而就的。在保持代码功能的同时，还要做一些工作来使其更加紧凑。

为了最小化JavaScript代码，你必须解析它，压缩它，并获得输出。一旦它被最小化，它应该是肉眼几乎无法阅读的。你已经删除了所有不必要的空白、注释、换行符，以及最初使代码可读的一切。

你可能还需要对代码做一些进一步的修改–例如，内联函数、删除块定界符、使用隐含条件，或者重写局部变量。

未简化与简化的JavaScript代码示例

让我们来看看一些示例代码。这第一块是普通的、没有经过删减的JavaScript。

// program to check if the string is palindrome or not
function checkPalindrome(str) {
// find the length of a string
const len = string.length;
// loop through half of the string
for (let i = 0; i < len / 2; i++) {
// check if first and last string are same
if (string[i] !== string[len - 1 - i]) {
return 'It is not a palindrome';
}
}
return 'It is a palindrome';
}
// take input
const string = prompt('Enter a string: ');
// call the function
const value = checkPalindrome(string);
console.log(value);

现在，让我们看看同样的代码在被简化后的样子：

function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++)
if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"}
const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

正如你所看到的，第二个代码块要小得多，也更紧凑。这意味着它将更快地加载和渲染，减少页面加载时间，加快内容速度。

在这里，我们将529个字节减少到324个字节，获得了205个字节的自由空间，减少了几乎40%的页面负载。

这就像把一本529页的书，浓缩成324页的书。当然，人读起来会很费劲，但机器读起来会很快，没有任何问题。

当把多个JavaScript文件连接成一个单独的小型化文件时，代码小型化减少了对服务器的HTTP请求的数量。这也降低了网站的带宽消耗。此外，代码最小化减少了脚本运行的时间–所有这些都会降低你的首字节时间（TTFB）。

为什么要对JavaScript代码进行最小化？

在编写最初的代码时，大多数开发人员主要关注的是如何完成工作。在这条路上，他们倾向于使用大量的注释、间距和变量，以使代码对将来使用它的其他人更有可读性。

尽管是一种优秀的编程语言，但JavaScript通过减慢速度影响网页。为了重新获得空间并提高页面的加载速度，你必须将JavaScript代码最小化。

最小化版本的JavaScript代码可以减少多达30-90%的文件大小。因此，JavaScript的最小化已经成为所有开发人员熟悉的仪式。

每个主要的JavaScript库开发商（Angular、Bootstrap等）都提供了一个最小化的JavaScript版本，用于生产部署。每个人都使用min.js扩展来表明这一点。

最小化JavaScript代码的好处

以下是采用JavaScript最小化后你将获得的好处的简要概述：

减少页面加载时间
减少你的网站的带宽消耗
降低脚本执行时间
减少对服务器的HTTP请求（以及更轻的负载）。
盗窃保护（最小化或丑化的版本很复杂，无法阅读和窃取再利用）。

缩小、美化和压缩之间的区别

JavaScript的最小化、美化或压缩在功能上是相似的。然而，它们有不同的目的。

JavaScript的uglification重写了代码，使其不那么容易被人阅读。这个过程删除了空白、分号和注释，同时重命名变量和内联函数，使代码难以阅读。

JavaScript有一个名为UglifyJS的库，可以自动对代码进行美化。它提高了性能，降低了可读性，使代码安全，对盗贼的吸引力降低。

压缩与最小化或美化不同。它使用像GZIP这样的压缩算法，将代码重写成二进制格式，使其更小，加载更快。

最小化是指减少空白和注释，而完全丑化则是通过改变函数名、变量名等将代码转变为不可读的形式。而压缩则是将代码以二进制形式重写，以减少文件大小。

最小化和压缩都是可逆的，这意味着你可以将代码变回原来的形式，但丑化是不可逆转的。

如何最小化JavaScript代码

你可以通过各种方式来简化你的JavaScript代码。这些方法中的每一种都采取了与其他方法不同的方法。

手动将大的JavaScript文件中的所有代码最小化，这几乎是不可能的。手动最小化JavaScript文件只可能用于小文件，因为它是如此的耗时。

要开始手动减化JavaScript的过程，你会在你最喜欢的文本编辑器中打开你的JavaScript文件，然后一个接一个地手动删除所有的空格。这将需要几分钟时间来删除所有为JavaScript文件设置的空格和注释。有些文本编辑器甚至可能支持正则表达式，这可以大大加快这一过程。

另一个选择是在你的电脑上安装最小化工具，并从命令行中使用它们。你必须选择你想要最小化的文件，并将其与目标文件一起添加到命令行开关中。然后，最小化工具就会处理其余的事情了。

如何利用工具手动最小化JavaScript

开发人员依靠几个JavaScript最小化工具来最小化代码并实现更好的性能。然而，每个开发者都有自己的个人偏好，选择不同的工具。现在有很多的JavaScript最小化工具，它们都有独特的品质，所以你需要仔细考虑你的选择。

我们并没有根据任何排名或类别来列出这些工具。我们只包括最有效和最流行的JavaScript最小化工具。

这里是最好的JavaScript最小化工具，可以帮助你提高你的网络性能。

1. JSMin

JSMin是一个专门的命令行JavaScript最小化工具和库，用于最小化JavaScript代码，使代码尽可能轻量化。只要把JSMin安装成一个全局脚本，它就会非常有效地删除代码中所有的空白和不必要的注释。因此，它可以立即将你的JavaScript文件大小减少50%左右。

所以，减少的大小会给快速下载带来机会。你还会注意到，作为下载新的、文学性的自我文件的代价，更多的交流性的编程风格也在增加。

然而，JSMin有一个缺点，它不能产生最佳的节省。由于其简单的算法，它使许多换行字符没有改变。否则，它可能会在代码中引入新的错误。

2. Microsoft Ajax Minify

Microsoft Ajax Minifier使你能够通过减少JavaScript和CSS文件的大小来提高你的Web应用程序的性能。它删除了注释、不必要的空间、分号、函数和括号。

除了缩短局部变量、函数名、引号/双引号，合并相邻的变量声明，删除未执行的代码。

使用AjaxMin，你可以分析生产力，并在后台对JS minifier进行收费。而且，当它完成了minification后，你可以打开生产力文件夹。

3. Google Closure Compiler

Google Closure Compiler是另一个优秀的JavaScript最小化工具。它制定了JavaScript的快速下载和更流畅的性能。它还验证了语法和可更改的建议，删除了死代码和类型，并通知你有关JavaScript的缺点。这个工具收集你的JavaScript，评估它，删除多余的代码，并重写它。

另外，它还对非法的JavaScript和潜在的危险操作提供警告。此外，它是一个适当的编译器，从普通的JavaScript到一个更好的和最小化的JavaScript。

4. YUI Compressor

YUI compressor是一个命令行的JavaScript和CSS最小化工具，它保证你比其他大多数工具有更高的压缩率。它是一个用Java编写的最小化工具，依靠Rhino对源JavaScript文件进行标记。

首先，YUI检查源JavaScript文件以确定其结构。然后，它打印出令牌流。然后，它删除尽可能多的空白字符，并用1（或2，或3）个字母符号替换所有的局部符号。

由于YUI压缩器是开源的，你可以检查源代码以了解它的工作原理。此外，YUI是最安全的JavaScript最小化工具，具有雄辩的压缩率。

5. UglifyJS

UglifyJS是最流行的JavaScript最小化工具之一。它可以解析、减化和压缩JavaScript代码。此外，该工具在压缩的同时会生成一个源码地图文件，以追踪到你的原始代码。

而且，它可以同时接受多个输入文件，先解析输入文件，再解析选项。

UglifyJS按顺序解析输入文件并应用任何压缩选项。文件是在同一个全局范围内解析的，这意味着一个文件对另一个文件中声明的变量/函数的引用将被适当匹配。

如何利用在线工具自动最小化JavaScript

有大量的在线JavaScript最小化工具可以在线压缩你的代码。几乎所有的在线JavaScript最小化工具都遵循一个类似的最小化过程。

首先，你会复制并粘贴你的JavaScript源代码，或者在工具上上传源代码文件。然后，如果有选项的话，你将优化最小化工具的设置，以获得基于特定要求的输出。

最后，你会拿着这个最小化的文件在网站上使用，而不是原始的、扩展的代码（当然你应该把原始的源代码文件保存起来，以防万一）。

这里有5个最好的在线JavaScript最小化工具，可以帮助你丰富你的网络性能。虽然我们没有按任何特定的顺序或类别列出这些工具，但我们只包括最流行和最有效的JavaScript最小化解决方案。

1. Toptal JavaScript Minifier Toptal JavaScript最小化工具

Toptal JavaScript最小化工具

Toptal JavaScript Minifier提供了一个高效而直接的在线JavaScript minifier，你可以在几秒钟内浓缩你的JavaScript。它还允许你将代码转换为一个.js文件，以便将来使用。

2. JSCompress

jscompress

JSCompress可以将你的JavaScript最小化并减少80%的大小。它提供了一个简单的点击操作界面，你可以粘贴你的代码或上传你的.js文件进行减化。你将会收到压缩后的输出，作为干净的、可复制的代码，而不是一个.js文件。值得注意的是，该工具使用UglifyJS和Babel-minify来最小化和压缩JavaScript。

3. Minifier.org Minifier.org JavaScript最小化工具

Minifier.org JavaScript最小化工具

Minfier.org是最简单的JavaScript最小化器之一，你可以利用它来最小化你的代码。它使用多种方法来最小化JavaScript代码。该工具对你的JavaScript代码在最小化之前和之后的大小都进行了衡量。然后，它计算出脚本在最小化后的收益，并将其显示在屏幕上。

4. TutorialsPoint Tutorialspoint JavaScript最小化工具

Tutorialspoint JavaScript最小化工具

你可以输入一个.js文件，提供一个URL，或者直接将你的原始代码粘贴到TutorialsPoint JavaScript最小化工具。该工具有一个可编辑的字段，如果你愿意，可以直接编码。此外，它还有一个单次点击减化的选项，你可以将减化后的代码下载到一个.js文件中。

5. Packer: Dean Edwards JavaScript Compressor Packer JavaScript最小化工具

Packer JavaScript最小化工具

如果你需要压缩你的JavaScript代码，Dean Edwards的Packer可以为你提供最满意的在线JavaScript压缩体验之一。它适用于JavaScript标记/原子，以及比特和字节模式。

此外，它可以让你在压缩代码时实现Base62编码和收缩变量选项。要最小化你的JS代码，将其复制并粘贴到JavaScript中，然后按下打包按钮。它将自动为你生成最小化的代码。

如何在WordPress中最小化JavaScript

在WordPress中，JavaScript的最小化遵循一个不同的程序。对JavaScript进行最小化需要主机支持或安装一个WordPress插件。安装一个WordPress的最小化插件后，它将为你处理最小化过程。

有许多JavaScript最小化的WordPress插件。这些插件中的大多数都遵循相同的最小化程序，可以从WordPress仪表板上运行。

让我们来探索一些在WordPress中修改JavaScript的最有效的工具。

1. W3 Total Cache

W3 Total Cache

W3 Total Cache可以让你对JavaScript、CSS和HTML进行细化控制。此外，它允许你对内联、嵌入或任何第三方的JavaScript或CSS代码进行最小化。除了最小化之外，它还可以延迟JavaScript和CSS，以加快页面加载。此外，该插件为WordPress网站提供了多种JavaScript减化机会。

2. WP-Optimize