如何使用CSS和Javascript缩小HTML?

我有一个带有CSS和Javascript文档的.html文档(没有外部文件)。 是否有一些在线工具可以将文档和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压缩器也是Google的Closure Compiler ,反之亦然,为了使压缩代码更好一点,你可以使用Javascript Beautifier 。 您还可以查看phpEasyMin项目。

已正确推荐用于JS的Closure编译器 ; 但并不是很多人都知道Google的Closure样式表 。 其中一个闭包样式表function是重命名,其中

  

Lorem ipsum

Lorem ipsum

会成为

  

Lorem ipsum

Lorem ipsum

还会有进一步的缩小; 并且鉴于OP表明所有资源都包含在html中,这可能最终节省了相当多的流量开销。

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

通过使用众多 可用的 缩放器之一 。

甚至 还有一些缩小了CSS。

我担心你必须分两步完成:

  1. 在文本编辑器中手动搜索和替换全局对象
  2. minifiers完成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编写的。 没有理由你必须使用多个工具。

从来没有尝试过,但听过谷歌的Closure编译器的真实好评……你可能想尝试一下

我建议你试试WebMarkupMin Online 。

WebMarkupMin Online是一款免费的在线工具,可以缩小您的HTML,XHTML和XML代码。 HTML和XHTML minifiers支持从style标记和属性缩小CSS代码,并使用javascript: pseudo-protocol从script标记,事件属性和超链接缩小JavaScript代码。 这些缩小器支持多种CSS缩小算法(Mads Kristensen的高效样式表缩小器 , Microsoft Ajax CSS Minifier和YUI CSS Compressor )和JavaScript缩小(Douglas Crockford的JSMin , Microsoft Ajax JS Minifier和YUI JS Compressor )。

这些工具基于WebMarkupMin库。