如何通过缩小和压缩文件来提高性能？

缩小是一个被广泛认可和有用的过程，它通过删除不必要的部分（通常是 HTML、CSS 和 JavaScript 文件中的空格、换行符和注释）来帮助我们提高 Web 应用程序的性能。

缩小：这是在不改变应用程序的行为和输出的情况下最小化 Web 应用程序中的代码或标记文件大小的过程。简而言之，缩小是从不影响我们输出的 HTML、CSS 和 JavaScript 代码中删除所有不必要的东西的方法，包括空格和注释。它减少了项目规模并提高了性能。

缩小是如何工作的？

开发人员首先编写 HTML、CSS 和 JavaScript，因为在开发代码时需要具有良好的可读性和可理解性。所以我们在开发过程中需要注释、换行和空格。
应用程序完成后，现在可以部署了。我们将在部署之前压缩所有 HTML、CSS 和 JavaScript 代码。我们将从代码文件中删除所有换行符、空格和注释。
将优化的应用程序部署到服务器。

缩小方法：我们可以通过三种方法来缩小 HTML、CSS 和 JavaScript 文件。他们是

手动缩小：这个过程很简单，开发人员从我们的应用程序文件中删除了所有不必要的部分。但是如果项目规模很大，那么这种方法就不是最优的，因为它会从开发和部署方面花费大量时间。
通过在线工具缩小有不同的网站可以帮助我们自动缩小代码。但是这些网站对于不同的编程和标记语言是不同的。下面给出了用于此类任务的最广泛使用的网站。复制并粘贴原始代码，它将自动生成缩小版本。这是最优化的方法。

对于 HTML：
```
https://html-minifier.com/
```
对于 CSS：
```
https://cssminifier.com/
```
对于 JavaScript：
```
https://javascript-minifier.com/
```

编辑器扩展： Visual Studio Code 或 Atom 等代码编辑器提供的不同扩展也非常有用，可以自动生成 HTML、CSS 或 JavaScript 代码的缩小版本。根据您使用的特定编辑器的谷歌搜索将向您显示执行此操作的路径。 JS & CSS 缩小器（缩小） by olback是 Visual Studio Code 中最流行的 JavaScript 和 CSS 压缩器扩展之一。

缩小的优点：缩小的主要方面是它减小了 Web 应用程序的大小。这带来了很多好处。它们如下

改进加载时间：与缩小前加载时间相比，缩小页面的加载时间更短。缩小可以将应用程序加载时间减少多达 60%，这一事实使其成为开发基于生产的 Web 应用程序的最重要步骤之一。
更低的空间使用：随着 Web 应用程序的大小减小，它占用的存储空间和空间非常少在服务器中构建和存储。这在托管 Web 应用程序时降低了公司的服务器成本。
更好的用户体验：由于缩小而改进的加载时间为用户提供了更好和优化的体验，并使 Web 应用程序快速响应。应用程序越快，用户体验就越好。

例子：

HTML：

缩小前的 HTML：

HTML


  

  
  
  
      Page Title
  
  
  
  
  
      Welcome To GeeksforGeeks
  
      How to improve performance by Minify and Compress Files.

HTML




Page Title


Welcome To GeeksforGeeks
  
How to improve performance by Minify and Compress Files.

CSS

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

CSS

body{background-color:#282c34;color:#fff;padding:40px;font-family:Arial;text-align:center}

Javascript

function helloWorld() {
  console.log("Hello World!");
}

Javascript

function helloWorld(){console.log("Hello World!")}

HTML




  GFG
  


  Welcome To GFG
  How to improve performance by Minify and Compress Files

HTML




  GFG
  


  Welcome To GFG
  How to improve performance by Minify and Compress Files

缩小后的 HTML：

HTML




Page Title


Welcome To GeeksforGeeks
  
How to improve performance by Minify and Compress Files.

CSS：

缩小前的 CSS：

CSS

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

缩小后的 CSS：

CSS

body{background-color:#282c34;color:#fff;padding:40px;font-family:Arial;text-align:center}

JavaScript：

缩小之前的 JavaScript

Javascript

function helloWorld() {
  console.log("Hello World!");
}

缩小后的 JavaScript：

Javascript

function helloWorld(){console.log("Hello World!")}

输出变化：现在我们将检查是否由于 CSS 文件的缩小而导致输出发生任何变化。我们将在整个示例中保持 HTML 文档不变。

缩小前：

HTML




  GFG
  


  Welcome To GFG
  How to improve performance by Minify and Compress Files

输出：

缩小后：

HTML




  GFG
  


  Welcome To GFG
  How to improve performance by Minify and Compress Files

输出：