如何使用CSS和Javascript缩小HTML？

I have a .html document with CSS and Javascript inside of document (no external files). Is there some online tool that would minify document and Javascript to some very small footprint? I saw many scripts kind of unreadable, where all variables and function names are replaced with one-letter names, etc. Please advice.

我有一个带有CSS和Javascript文档的.html文档(没有外部文件)。是否有一些在线工具可以将文档和Javascript缩小到一些非常小的空间?我看到许多脚本难以理解,所有变量和函数名称都被替换为单字母名称等。请提供建议。

9 个解决方案

#1

Edit 2 (Feb 22, 2017): Now the best tool to minify your assets (and a whole lot more, by adding loaders and plugins) is definitely Webpack.

编辑2(2017年2月22日):现在最好的工具来缩小你的资产(以及更多,通过添加加载器和插件)绝对是Webpack。

Example of config to move all your .css in one file and minify it:

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

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

Edit 1 (Sept 16, 2014): Even better, now you have task runners like Gulp or Grunt.

编辑1(2014年9月16日):更好的是,现在你有像Gulp或Grunt这样的任务选手。

Task runners are small applications that are used to automate many of the time consuming, boring (but very important) tasks that you have to do while developing a project. These include tasks such as running tests, concatenating files, minification, and CSS preprocessing. By simply creating a task file, you can instruct the task runner to automatically take care of just about any development task you can think of as you make changes to your files. It’s a very simple idea that will save you a lot of time and allow you to stay focused on development.

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

Must read: Getting started with Gulp.js

必读:Gulp.js入门

Example of task with JavaScript concatenation and minification (and JSHint):

使用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' }));
});

Original answer (Jul 19, 2012): I advise the HTML5 Boilerplate Build Script which can minify your JS and CSS.

原始答案(2012年7月19日):我建议HTML5 Boilerplate构建脚本,它可以缩小你的JS和CSS。

#2

Good javascript compressor is also Google's Closure Compiler and vice versa, to make compressed code a bit better readible you can use Javascript Beautifier. You can also have a look at phpEasyMin project.

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

#3

Closure compiler has been correctly recommended for JS; but not many are aware of Google's Closure stylesheets. One of the closure stylesheets features is renaming, where

已正确推荐用于JS的Closure编译器;但并不是很多人都知道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>

would become

<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>

There'll be further minification too; and given the fact that OP indicates all resources are included into the html, this may end up saving quite a bit in traffic overhead.

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

NB: if you inspect any Google search results page, you'll see their class and ID names are almost never longer than 4 random characters

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

#4

By using one of the many available minifiers.

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

There are even some that minify CSS.

甚至还有一些缩小了CSS。

#5

I am afraid you'll have to do it in two steps:

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

manual search and replace of global objects in a text editor

在文本编辑器中手动搜索和替换全局对象

minifiers to finish the job on css and js

minifiers完成css和js的工作

I had a similar question some time ago (about global objects and object keys). The answer I got was that no tool will make assumptions about the global context. In your example, they won't minify "pageLoad" because it might be used by another html or js fragment you didn't provide.

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

A workaround in your example would be to make the pageLoad function local and add the onload event dynamically in the script:

您的示例中的解决方法是使pageLoad函数本地化并在脚本中动态添加onload事件:

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

#6

While JavaScript code can be compressed and decompressed within JavaScript (see other answers), it's actually hard to achieve the same result in CSS. There is currently no tool that will do more than remove unnecessary whitespace (see also Are there any agressive CSS Minification tools?), since identifier and class names cannot be changed without destroying the link between HTML and CSS.

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

Also, you can't remove anything from HTML markup except whitespace. Well, you could minify the class names and identifier, but there's currently no tool that will update those minified values in your CSS/JS files, so this would render your website ugly and broken. And even empty elements are often needed in order to get some CSS effects right (yes, I'm looking at you, IE6). This applies to JavaScript function names too.

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

TL;DR: Unfortunately there's no all-in-one-minify-everything tool. The closest thing is htmlcompressor.

TL; DR:不幸的是,没有一体化的一切工具。最接近的是htmlcompressor。

#7

Try http://prettydiff.com/. It offers automatic language detection and can minify html, css, and javascript. This tool presumes that script tags without a mime type or with a javascript relevant mime type must contain either javascript or nothing. Likewise, style tags without a mime type or with the "text/css" mime type are presumed to contain CSS. The CSS and JavaScript are minified accordingly. The tool itself is written in javascript. There is no reason you should have to use more than one tool.

试试http://prettydiff.com/。它提供自动语言检测,可以缩小html,css和javascript。此工具假定没有mime类型或与javascript相关的mime类型的脚本标记必须包含javascript或什么都不包含。同样,没有mime类型或“text / css”mime类型的样式标记被假定为包含CSS。相应地缩小了CSS和JavaScript。该工具本身是用JavaScript编写的。没有理由你必须使用多个工具。

#8

Have never tried it but have heard real good reviews of Google's Closure compiler..You may want to try it out

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

#9

I recommend you to try WebMarkupMin Online.

我建议你试试WebMarkupMin Online。

The WebMarkupMin Online a free online tools to minify your HTML, XHTML and XML code. HTML and XHTML minifiers supports the minification of CSS code from style tags and attributes, and minification of JavaScript code from script tags, event attributes and hyperlinks with javascript: pseudo-protocol. These minifiers supports multiple algorithms of CSS minification (Mads Kristensen's Efficient stylesheet minifier, Microsoft Ajax CSS Minifier and YUI CSS Compressor) and JavaScript minification (Douglas Crockford's JSMin, Microsoft Ajax JS Minifier and YUI JS Compressor).

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

These tools is based on WebMarkupMin library.

这些工具基于WebMarkupMin库。

#1