如何使用 CSS 和 Javascript 缩小 HTML？

Question

我有一个包含 CSS 和 Javascript 的 .html 文档（没有外部文件）。 是否有一些在线工具可以将文档和 Javascript缩小到非常小的占用空间？ 我看到很多脚本有点不可读，其中所有变量和函数名称都被替换为一个字母的名称等。请指教。

Answer 1

编辑 2（2017 年 2 月 22 日）：现在缩小资产的最佳工具（以及更多，通过添加加载器和插件）绝对是Webpack 。

将所有.css移动到一个文件中并缩小它的配置示例：

{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        minimize: true
      }
    }
  ]
}

---

编辑 1（2014 年 9 月 16 日）：更好的是，现在您拥有Gulp或Grunt等任务运行器。

任务运行器是小型应用程序，用于自动执行您在开发项目时必须执行的许多耗时、枯燥（但非常重要）的任务。 其中包括运行测试、连接文件、缩小和 CSS 预处理等任务。 通过简单地创建一个任务文件，您可以指示任务运行器在您对文件进行更改时自动处理您能想到的任何开发任务。 这是一个非常简单的想法，它将为您节省大量时间并让您专注于开发。

必读： Gulp.js 入门

使用 JavaScript 连接和缩小（和 JSHint）的任务示例：

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

---

原始答案（2012 年 7 月 19 日）：我建议使用HTML5 Boilerplate Build Script ，它可以缩小您的 JS 和 CSS。

Answer 2

好的 javascript 压缩器也是Google 的 Closure Compiler ，反之亦然，为了使压缩代码的可读性更好一点，您可以使用Javascript Beautifier 。 您还可以查看phpEasyMin项目。

Answer 3

JS 已正确推荐闭包编译器； 但没有多少人知道 Google 的Closure stylesheets 。 闭包样式表的功能之一是重命名，其中

<style>
  .descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
  <p class="descriptive-element-class-name">Lorem ipsum</p>
  <p class="descriptive-element-class-name">Lorem ipsum</p>
</div>

会成为

<style>
  .a-b .a-c {color:red;}
</style>
<div class="a-b">
  <p class="a-c">Lorem ipsum</p>
  <p class="a-c">Lorem ipsum</p>
</div>

也会有进一步的缩小； 考虑到 OP 指示所有资源都包含在 html 中，这最终可能会节省相当多的流量开销。

注意：如果您检查任何 Google 搜索结果页面，您会看到它们的类和 ID 名称几乎不会超过 4 个随机字符

Answer 4

通过使用许多可用的缩小器之一。

甚至还有一些可以缩小 CSS。

Answer 5

恐怕您必须分两步完成：

1. 在文本编辑器中手动搜索和替换全局对象
2. minifiers 来完成 css 和 js 的工作

前段时间我有一个类似的问题（关于全局对象和对象键）。 我得到的答案是，没有任何工具会对全球环境做出假设。 在您的示例中，它们不会缩小“pageLoad”，因为它可能被您未提供的另一个 html 或 js 片段使用。

您的示例中的解决方法是将 pageLoad 函数设为本地并在脚本中动态添加 onload 事件：

elt.onload=function(){pageLoad();};

Answer 6

虽然可以在 JavaScript 中压缩和解压缩 JavaScript 代码（请参阅其他答案），但实际上很难在 CSS 中实现相同的结果。 目前没有任何工具可以做的不仅仅是删除不必要的空白（另请参阅是否有任何积极的 CSS 缩小工具？ ），因为在不破坏 HTML 和 CSS 之间的链接的情况下无法更改标识符和类名。

此外，除了空格之外，您不能从 HTML 标记中删除任何内容。 好吧，您可以缩小类名和标识符，但目前没有工具可以更新 CSS/JS 文件中这些缩小的值，因此这会使您的网站变得丑陋和损坏。 为了获得正确的 CSS 效果，甚至经常需要空元素（是的，我在看你，IE6）。 这也适用于 JavaScript 函数名称。

TL;DR：不幸的是，没有一体化的缩小一切工具。 最接近的是htmlcompressor 。

Answer 7

试试http://prettydiff.com/ 。 它提供自动语言检测并可以缩小 html、css 和 javascript。 此工具假定没有 mime 类型或具有 javascript 相关 mime 类型的脚本标签必须包含 javascript 或不包含任何内容。 同样，没有 mime 类型或具有“text/css” mime 类型的样式标签被假定为包含 CSS。 CSS 和 JavaScript 相应地缩小了。 该工具本身是用 javascript 编写的。 您没有理由必须使用多种工具。

Answer 8

从未尝试过，但听说过对 Google Closure 编译器的好评。您可能想尝试一下

Answer 9

我建议您尝试WebMarkupMin Online 。

WebMarkupMin Online 是一个免费的在线工具，用于缩小您的 HTML、XHTML 和 XML 代码。 HTML 和 XHTML minifiers 支持从style标签和属性中缩小 CSS 代码，并通过javascript: pseudo-protocol 从script标签、事件属性和超链接中缩小 JavaScript 代码。 这些压缩器支持多种CSS 压缩算法（Mads Kristensen 的Efficient stylesheet minifier 、 Microsoft Ajax CSS Minifier和YUI CSS Compressor ）和 JavaScript压缩（Douglas Crockford 的JSMin 、 Microsoft Ajax JS Minifier和YUI JS Compressor ）。

这些工具基于WebMarkupMin库。