JavaScript - 压缩 JS
JavaScript 为网站和 Web 应用提供动态交互功能。它是现代 Web 开发的关键组件。但随着 JavaScript 文件越来越大、越来越复杂，它们会显著影响页面加载时间和整体速度。
为了解决这个问题，开发者使用代码压缩等技术来简化 JavaScript 代码，同时又不影响其功能。
什么是"代码压缩"?
最小化是压缩的另一个名称。代码压缩是指优化代码以最大限度地减少带宽使用、节省空间并加快页面加载速度的过程。
所有基础编程语言，例如 HTML、CSS 和 JavaScript，都提供代码压缩功能。不过，该过程并非立竿见影。在不牺牲功能的情况下使代码更简洁需要付出一些努力。
为了压缩 JavaScript 代码，必须对其进行解析、压缩并获得输出。一旦缩小，用肉眼几乎不可能读取。所有曾经提升代码可读性的元素都已被移除，包括多余的空格、注释和换行符。
可能需要进行其他代码更改，包括重写局部变量、使用隐式条件、删除块分隔符或内联方法。
最小化代码的必要性
以下显示了最小化 JavaScript 代码的必要性 -
更快的加载时间:精简代码可减小文件大小，从而加快下载和执行时间，最终提升用户体验。
带宽优化:较小的文件大小可限制服务器和客户端之间交换的数据量，从而降低带宽和托管成本。
改进的 SEO::搜索引擎喜欢加载速度更快的页面，这可以提高搜索引擎排名并为网站带来更多自然流量。网站。
增强用户体验:缩短加载时间可提升用户参与度和满意度，同时降低跳出率并提高转化率。
未压缩与压缩后的 JavaScript 代码
我们来看看下面的一些示例代码。第一个代码块包含常见的未压缩 JavaScript 代码 -
// 用于检查单词是否为回文的程序
function isPalindrome(word) {
// 计算单词的长度
const length = word.length;
// 循环遍历单词的一半
for (let i = 0; i < length / 2; i++) {
// 检查第一个字符和最后一个字符是否相同
if (word[i] !== word[length - 1 - i]) {
return 'This is not a palindrome';
}
}
return 'This is a palindrome';
}
// 获取输入
const inputWord = "hello";
// 调用函数
const result = isPalindrome(inputWord);
console.log(result);
输出
这将生成以下结果 -
This is not a palindrome
现在我们来看看压缩后的代码是什么样子。压缩后的版本如下:
function isPalindrome(w){const l=w.length;for(let i=0;i<l/2;i++)if(w[i]!==w[l-1-i])return"This is not a palindrome";return"This is a palindrome"}
const inputWord="hello",result=isPalindrome(inputWord);console.log(result);
如您所见，第二段代码明显更短更简洁。这意味着它将加载和渲染得更快，从而减少页面加载时间并提升内容质量。
我们将 529 字节减少到 324 字节，获得了 205 字节的可用空间，并将页面加载时间缩短了 40% 以上。
如何压缩 JavaScript 代码
您可以通过多种方式压缩 JavaScript 代码。每种方法都采用不同的策略。
手动压缩大型 JavaScript 文件中的所有代码几乎是不可能的。由于耗时，手动压缩 JavaScript 文件仅适用于小文件。
要开始手动压缩 JavaScript 文件，请在您选择的文本编辑器中打开 JavaScript 文件，然后手动逐个删除空格。清理 JavaScript 文件中的所有空格和注释需要几分钟时间。其中一些文本编辑器甚至可能支持正则表达式，这可能会显著加快处理速度。
另一种选择是在您的计算机上安装压缩软件，并从命令行运行它。您需要选择要压缩的文件，并在命令行开关中将其与目标文件一起提供。其余任务将由压缩工具处理。
代码压缩与压缩
虽然代码压缩和压缩都可以最小化文件大小，但它们的方法和目的各不相同 -
代码压缩:代码压缩包括从源代码中删除不必要的字符，以提高可读性并缩短加载时间，同时保持功能性。
压缩:通过更有效地编码数据来减小文件大小的技术，这通常会导致文件结构发生不可逆的更改。 Gzip、Brotli、deflate 是网络传输中常用的压缩技术，可以减少带宽占用。
