我是 Web 开发的新手，当我遇到一个新网站时，我会从浏览器查看它的源代码，并尝试了解该网站的结构和所有内容。但是当我查看一些网站的源代码时，看起来真的很乱，很难学习。我想知道为什么源代码看起来像这样，如果是出于某些安全目的，我只想知道有哪些工具可以在我们投入生产时将源代码变成那些乱七八糟的不可读代码。
你可以看下面的图片来明白我的意思。
【问题讨论】：
标签： javascript html css web frontend
您正在查看的是一个称为minification 的过程。许多常见的前端 Web 开发工具（例如 Bower 或 Grunt）都允许您将文件压缩到尽可能少的代码，从而获得相同的输出。
这通常不是出于安全目的，而是出于性能目的。行数越少，文件中的字节数就越少，从而加快网站访问者的加载速度（通过网络传输的数据更少）。
HTML 和 CSS 只能做这么多，但大多数工具都能够将 JavaScript 缩小到几乎无法阅读的程度；变量名会被转换成单个字母，有时代码会被完全重写/优化。
请记住，前端副本始终对最终用户可见，因此您不能完全阻止最终用户反编译您正在执行的操作使用 JavaScript，但如果有专有代码在起作用，许多公司也喜欢让访问者难以反编译他们的客户端代码。这是一个称为obfsucation 的过程，并应用了类似的逻辑；变量名会变，逻辑会变等等。
【讨论】：
我相信您指的是缩小。
缩小是一种在不影响浏览器处理代码方式的情况下删除不必要数据的方法 - 例如代码 cmets 和格式化，删除未使用的代码，使用更短的变量和函数名称，等等。
这就是代码最终看起来不可读的原因。
您也可以缩小 HTML、CSS 和 JavaScript 资源：
To minify HTML, try [HTMLMinifier](http://kangax.github.io/html-minifier/)
To minify CSS, try [CSSNano](https://cssnano.co/)
To minify JavaScript, try [JScompress](https://jscompress.com/)
【讨论】：
源代码将被缩小，这就是为什么它在看到时如此笨拙。缩小意味着去掉括号、空格、分号。
坦率地说，您无法查看该网站的源代码，因为您是 Web 开发的新手。学习基础知识的最佳方法是从 w3schools 亲自动手（通过您从这里获得的知识）。然后尝试使用浏览器开发工具了解网站布局。
【讨论】：