performance - 在保持元素/样式/脚本关系的同时缩小整个目录？

Question

当前是否存在可以缩小整个项目目录的解决方案？更重要的是，是否存在任何可以缩短类名、id 并在所有文档中保持一致的解决方案？

可以改变这个的东西:

索引.html ---

<div class="fooBar">
  <!-- Code -->
</div>

样式.css ---

.fooBar { 
  // Comments and Messages
  background-color: #000000; 
}

索引.js ---

$(".fooBar").click( function () { 
  /* More Comments */
  alert( "fooBar" ); 
});

进入这个:

索引.html ---

<div class="a"></div>

样式.css ---

.a{background-color:#000;}

索引.js ---

$(".a").click(function(){alert("fooBar");});

Answer 1

您正在寻找的不是缩小，而是压缩。根据定义缩小只会删除空格，因为缩短标识符会改变接口(interface)，可能会破坏依赖它的外部脚本。出于这个原因，缩小本质上比压缩“更安全”，尽管在封闭系统(即封装的 Web 应用程序)中，压缩可能是一个好主意。

Javascript ，大多数人使用YUI Compressor或 Dean Edwards' Packer .

对于 CSS ，有很多用于“优化”样式的工具，但我也不知道有什么工具可以缩短类名。造成这种情况的原因可能有几个:

要压缩 CSS 文件，脚本需要知道包含它的所有 HTML 文件，以便更改其中的类和 id 引用。根据您网站的大小和结构，他可能会很重要。

压缩后，语义 HTML 变得不那么可读，如 <span class="image_caption">变成 <span class="a12"> ，或者更糟糕的是，<p id="a12"> .

绝对有可能做你所描述的事情(我实际上正在开发一个个人 CMS/框架)，但为了使其可维护，它可能必须是结构紧密的 CMS 的一个组成部分，每当发布新的更改时，都会在“幕后”压缩所有文件，同时保留所有原始文件，以便可以将站点作为一个整体进行维护。