9

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

4

9 回答 9

9

编辑 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 样板构建脚本，它可以缩小您的 JS 和 CSS。

于 2012-07-19T21:01:40.620 回答
7

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

于 2012-07-19T20:48:05.570 回答
5

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

<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 个随机字符

于 2012-07-20T00:42:13.337 回答
3

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

甚至 有一些缩小 CSS。

于 2012-07-19T20:36:41.277 回答
3

恐怕您必须分两步完成：

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

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

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

elt.onload=function(){pageLoad();};
于 2012-07-19T21:12:31.050 回答
1

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

于 2012-07-21T13:16:00.503 回答
1

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

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

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

于 2012-07-19T21:04:25.993 回答
0

我建议您尝试WebMarkupMin Online。

WebMarkupMin Online 是一个免费的在线工具，用于缩小您的 HTML、XHTML 和 XML 代码。HTML 和 XHTML 压缩器支持从标签和属性中压缩 CSS 代码，以及使用伪协议从标签、事件属性和超链接中压缩styleJavaScript 代码。这些压缩器支持多种 CSS 压缩算法（Mads Kristensen 的Efficient stylesheet minifier、Microsoft Ajax CSS Minifier和YUI CSS Compressor）和 JavaScript 压缩（Douglas Crockford 的JSMin、Microsoft Ajax JS Minifier和YUI JS Compressor）。scriptjavascript:

这些工具基于WebMarkupMin库。

于 2013-04-28T09:14:19.727 回答
0

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

于 2012-07-19T21:00:23.617 回答