如何用CSS和Javascript缩小HTML



我有一个.html文档,文档中有CSS和Javascript(没有外部文件)。是否有一些在线工具可以缩小文档和Javascript,使其占地面积非常小?我看到许多脚本有点不可读,所有变量和函数名都被替换为一个字母的名称,等等。请给出建议。

编辑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构建脚本,它可以缩小JS和CSS。

好的javascript压缩器也是谷歌的闭包编译器,反之亦然,为了使压缩代码更好地可读,您可以使用javascript Beautifier。您还可以查看phpEasyMin项目。

闭包编译器已被正确推荐用于JS;但没有多少人知道谷歌的闭包样式表。闭包样式表的一个特性是重命名,其中

<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中的事实,这最终可能会节省相当多的流量开销。

注意:如果你查看任何谷歌搜索结果页面,你会发现它们的类和ID名称几乎永远不会超过4个随机字符

通过使用众多可用的迷你程序之一。

甚至还有一些缩小了CSS。

恐怕您必须分两步完成:

  1. 在文本编辑器中手动搜索和替换全局对象
  2. 在css和js上完成任务的迷你程序

不久前我也遇到过类似的问题(关于全局对象和对象键)。我得到的答案是,没有任何工具会对全球环境做出假设。在您的示例中,他们不会缩小"pageLoad",因为它可能被您没有提供的另一个html或js片段使用。

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

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

虽然JavaScript代码可以在JavaScript中压缩和解压缩(请参阅其他答案),但实际上很难在CSS中获得相同的结果。目前还没有任何工具可以去除不必要的空白(另请参阅是否有任何激进的CSS最小化工具?),因为在不破坏HTML和CSS之间的链接的情况下,无法更改标识符和类名。

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

TL;DR:不幸的是,没有一个集所有于一身的迷你所有工具。最接近的是htmlcompressor。

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

我从未尝试过,但听到了谷歌闭包编译器的好评。。您可能想试用

我建议您尝试WebMarkupMin Online。

WebMarkupMin Online是一个免费的在线工具,可以缩小HTML、XHTML和XML代码。HTML和XHTML缩小版支持style标签和属性中的CSS代码缩小,以及使用javascript:伪协议的script标签、事件属性和超链接中的JavaScript代码缩小。这些缩小程序支持多种CSS缩小算法(Mads-Kristensen的高效样式表缩小程序、Microsoft Ajax CSS缩小程序和YUI CSS压缩器)和JavaScript缩小算法(Douglas Crockford的JSMin、Microsoft Ajax JS缩小程序和YUI JS压缩器)。

这些工具基于WebMarkupMin库。

最新更新