【问题标题】:What should I consider before minifying HTML?缩小 HTML
【发布时间】:2010-10-02 18:13:57
【问题描述】:

我在 Google 上四处搜索,但找不到任何 HTML 小型化脚本。

我突然想到,HTML minifacation 没有什么比删除所有不需要的空格更重要的了。

是我遗漏了什么还是我的 Google Fu 丢失了?

【问题讨论】:

  • 你不能只在你的服务器上使用 gzip 吗?
  • 我想看看压缩后的 HTML 与压缩后的 HTML 的比较,然后是压缩后的 HTML。我的直觉是压缩后的压缩 HTML 更小。
  • @Lance Fisher:在我的测试中,Gzip 后缩小的 JS/CSS 比未缩小的要小。但是,如果您缩小 HTML,则存在潜在的陷阱;我会说现有页面不值得这样做。

标签: html minify


【解决方案1】:

如果你已经安装了 node.js 并且你是一个 windows 用户你可以创建这个 .bat 它将在 min 子文件夹中缩小文件夹中的所有 html。

输出将在 min 文件夹中

  1. 打开控制台。运行--> npm install html-minifier -g
  2. 创建 .bat。不要忘记在 cd 命令中更改路由。更改 bat 文件中的文件夹比复制和粘贴更容易。
  3. 进入控制台进入 .bat 文件夹并运行它。

cd the_destination_folder

dir  /b *.HTML > list1.txt

for /f "tokens=*" %%A in (list1.txt) do html-minifier --collapse-whitespace --remove-comments --remove-optional-tags %%~nxA  -o min\%%~nxA 

pause

【讨论】:

    【解决方案2】:

    这是一个用 PHP 编写的 HTML5 压缩器。

    <?PHP
    $in=file_get_contents('path/to/source.html');
    
    //Strips spaces if there are more than one.
    $in=preg_replace('/\s{2,}/m',' ',$in);
    //trim
    $in=preg_replace('/^\s+|\s+$/m','',$in);
    /*Strips spaces between tags. 
    Use (&nbsp; or &shy; or better) padding or margin if necessary, otherwise the html
    parser appends a one space textnode.*/  
    $in=preg_replace('/ ?> < ?/','><',$in);
    //Removes tag end slash.
    $in=preg_replace('@ ?/>@','>',$in);
    //Removes HTML comments except conditional IE comments.
    $in=preg_replace('/<!--[^\[]*?-->/','',$in);
    //Removes quotes where possible.
    $in=preg_replace('/="([^ \'"\=><]+)"/','=$1',$in);
    $in=preg_replace("/='([^ '\"\=><]+)'/",'=$1',$in);
    
    file_put_contents('path/to/min.html',$in);
    ?>
    

    之后,您将拥有一行更短的 html 代码。

    最好从正则表达式创建一个数组,但要注意转义反斜杠。

    【讨论】:

    • "尽可能删除引号。" , 也删除了 javascript IF 的检查。示例:“if(typeof variable!=="object"){"
    【解决方案3】:

    我多年来一直使用这个正则表达式,没有任何问题:s/&gt;\s*&lt;/&gt;&lt;/g

    在 Python 中re.sub(r'&gt;\s*&lt;', '&gt;&lt;', html)

    或者在 PHP 中 preg_replace('/&gt;\s*&lt;/', '&gt;&lt;', $html);

    这删除了标签之间的所有空格,但不是任何地方,这是相当安全的(但并不完美,有些情况会破坏,但很少见)。

    我这样做的主要原因不是速度/文件大小,而是因为空白通常会引入一个空间。这没关系,但是当您开始在 DOM 中使用 Javascript 时,经常会丢失空格,从而产生(较小的)布局差异。

    考虑:

    <div>
        <a>link1</a>
        <a>link2</a>
    </div>
    

    链接之间有一个空格,但现在我执行以下操作:

    $('div').append('<a>link3</a>')
    

    而且没有空间......我需要在我的 JS 中手动添加空间,恕我直言,这相当丑陋且容易出错。

    【讨论】:

      【解决方案4】:

      我最近发现了一个基于 PHP 的脚本,它可以缩小您的网站 HTML - 内联 css - 动态内联 javascript,它被称为 Dynamic website compressor

      【讨论】:

        【解决方案5】:

        我还没有尝试过,但是htmlcompressor 是一个 HTML 压缩器,如果你想试试的话。

        【讨论】:

          【解决方案6】:

          您可以在 here 找到一些很好的参考资料,例如 HTML tidy 等。

          如果您不想使用这些选项之一,Prototype 可以在 DOM 中使用clean the whitespace。您可以自己执行此操作,并通过 Firefox 扩展 Web 开发人员工具栏中的“查看生成的源代码”进行复制。然后你可以用原型的修复替换原来的 html。很抱歉没有做出明显的 nickf。

          (我推荐第一个链接)

          【讨论】:

          • Prototype 是一个客户端脚本,所以 HTML 已经被原封不动地发送了,从而达不到目的......
          【解决方案7】:

          JavaScript 不能用作压缩 HTML 字符串的解压缩器,例如,为未压缩格式创建 DEV 构建,运行“发布”脚本将 DEV 构建压缩到生产环境,并将 JavaScript 附加到 HTML 源代码(像以前一样删除空格等)?

          服务器上的带宽会减少,但缺点是将字符串解压缩为 HTML 的客户端压力更大。还需要启用 JavaScript 并能够将解压缩的字符串解析为 HTML。

          我并不是说它是一个明确的解决方案,但它可能会起作用 - 这完全取决于您是否在没有用户 JavaScript 权限/系统规范等的情况下查看带宽。

          否则寻找混淆脚本,一个简单的谷歌搜索产生http://tinyurl.com/phpob - 取决于你在寻找什么应该有可用的软件包。

          如果我走错了路线,请大声喊叫,我会看看我还能做些什么。

          祝你好运!

          【讨论】:

            【解决方案8】:

            从 HTML 中删除内容时必须小心,因为它是一种脆弱的语言。根据您的页面编码方式,一些空白可能更重要;此外,如果您有 CSS 样式,例如 white-space: pre,那么您可能需要保留空格。此外,还有许多浏览器错误等,基本上 HTML 文件中的每个字符都可能满足某些要求或安抚某些浏览器。

            在我看来,最好的办法是使用 CSS 技术来设计页面(我最近能够在我工作的网站上获取一个重要页面,并通过使用 CSS 而不是表格对其进行重新编码来将其大小减少 50%和嵌套的 style="..." 属性)。然后,使用 GZip 为支持 gzip 的浏览器减小页面大小。这将节省带宽,同时保留 html 的结构。

            【讨论】:

              【解决方案9】:

              有时,根据封闭标签和/或 CSS,空格可能很重要。

              【讨论】:

                【解决方案10】:

                除了提到的其他答案的 HTML Tidy/删除空白之外,没有太多。

                这更像是一项手动任务,将样式属性提取到 CSS 中(希望您没有使用 FONT 标签等),尽可能使用更少的标签和属性(例如不在元素中嵌入 标签,而是使用CSS 使整个元素的字体粗细:粗体,除非当然使用 >strong

                【讨论】:

                  【解决方案11】:

                  this Wordpress blog 上有一个关于这个话题的相当长的讨论。您可以在那里找到使用 PHP 和 HTML Tidy 提出的非常冗长的解决方案。

                  【讨论】:

                    【解决方案12】:

                    是的,我想它几乎可以删除空格和 cmets。您不能像在 javascript 中那样用较短的标识符替换标识符,因为 CSS 类或 javascript 可能会依赖于这些标识符。

                    此外,您在删除空格时应该小心,并确保始终至少留下空格字符,否则您的所有文本都会看起来像这样。

                    【讨论】:

                    • 甚至 cmets 也无法安全移除。您也可以摆脱 IE 的条件 cmets。有时我会使用 cmets 来隐藏导致 IE 出现错误的空白。
                    猜你喜欢
                    • 2011-03-06
                    • 2012-07-27
                    • 2016-03-22
                    • 2010-10-18
                    • 1970-01-01
                    • 1970-01-01
                    • 2015-06-05
                    • 2011-02-13
                    • 2011-05-23
                    相关资源
                    最近更新 更多