前端代码怎么压缩,前端代码压缩的方式,其实,不需要前端代码压缩工具,写个方法,就能实现页面GZIP压缩输出。废话就不多说了,小千还是直接上代码吧。
织梦模板代码压缩
之前,小千写过《织梦模板压缩前端代码,并且可以过滤注释不显示》教程,针对的是织梦模板的,如果,你的网站也和小千的一样,是织梦程序做的,那么,你有福了,看这个教程就行了,而且,只要修改两处,就能实现PHP前端代码压缩,PHP压缩输出HTML网页代码。
但是,除了织梦模板以外,还有很多的程序,或者是很多的网站,基本上都是动态、伪静态的,那么,对于这种,直接使用PHP搭建的网站,也是可以实现前端代码压缩的。下面,就是PHP前端代码压缩的方法了,看看你的模板属于那种,找到属于你的压缩代码,就没有压缩不了的,如果有,那肯定是你方法不对。
开启GZIP压缩输出
<?php error_reporting(0); /*开启GZIP压缩*/ ob_start('ob_gzhandler'); ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> <title>全民博客</title> </head> <body> <!--{网页代码}--> </body> </html> <?php /*结束GZIP压缩*/ ob_end_flush(); ?>
说明:一般,做为站长,都希望网站打开快,除了加宽带以外,站内代码优化,代码压缩,也是能提升网站打开速度的。最常见的,就是这个开启GZIP压缩输出了,但是,仅仅只是开启GZIP压缩输出,还是远远不够的,想要把代码优化到极致,肯定是要整前端代码压缩的啊。
代码压缩方法一
<?php error_reporting(0); /*开启GZIP压缩*/ ob_start('ob_gzhandler'); ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> <title>全民博客</title> </head> <body> <!--{网页代码开始}--> <a style="cursor:pointer;" onclick="linka('http://nidecms.com/','_self')">全民博客</a> <!--{网页代码结束}--> <!--{这里是注释}--> <script type="text/javascript"> function linka(hrsrc,fblank){ var href = hrsrc; window.open(href,fblank); } </script> <!--{这个注释会被过滤掉}--> </body> </html> <?php /*PHP压缩输出网页代码*/ $bodyhtml = ob_get_contents(); ob_end_clean();// 得到当前缓冲区的内容并删除当前输出缓冲区 ob_end_flush();/*结束GZIP压缩*/ exit(HTMLBODY($bodyhtml)); function HTMLBODY($muban) { $muban = preg_replace('#<!--{(.*?)}-->#','',$muban);//<!--{过滤这种注释标签}--> $muban = preg_replace('/\s+/', ' ',$muban); $muban = trim($muban); echo $muban; } /*PHP压缩输出网页代码*/ ?>
说明:PHP压缩前端代码,如果,你的网站,就是一个新站站,那么,使用这个代码就够用了。代码简洁,没有多余的代码,看起来很清爽,对于前端代码的压缩,也是达到要求了。但是,如果你的网站,是技术博客,技术教程网,就难免会用到pre标签,但是,pre标签也被压缩,那就出错了,所以,下面还有第二个代码,不处理pre的标签。
代码压缩方法二
<?php error_reporting(0); /*开启GZIP压缩*/ ob_start('ob_gzhandler'); ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> <title>全民博客</title> </head> <body> <!--{网页代码开始}--> <a style="cursor:pointer;" onclick="linka('http://nidecms.com/','_self')">全民博客</a> <!--{网页代码结束}--> <!--{这里是注释}--> <script type="text/javascript"> function linka(hrsrc,fblank){ var href = hrsrc; window.open(href,fblank); } </script> <!--{这个注释会被过滤掉}--> </body> </html> <?php /*PHP压缩输出网页代码*/ $bodyhtml = ob_get_contents(); ob_end_clean();// 得到当前缓冲区的内容并删除当前输出缓冲区 ob_end_flush();/*结束GZIP压缩*/ exit(HTMLBODY($bodyhtml)); function HTMLBODY($muban) { $chuns = preg_split('/(<!--<nocompress>-->.*?<!--<\/nocompress>-->|<nocompress>.*?<\/nocompress>|<pre.*?\/pre>|<textarea.*?\/textarea>|<script.*?\/script>)/msi', $muban, -1, PREG_SPLIT_DELIM_CAPTURE); $content = ''; foreach ($chuns as $c) { if (strtolower(substr($c, 0, 19)) == '<!--<nocompress>-->') { $c = substr($c, 19, strlen($c) - 19 - 20); $content .= $c; continue; } else if (strtolower(substr($c, 0, 12)) == '<nocompress>') { $c = substr($c, 12, strlen($c) - 12 - 13); $content .= $c; continue; } else if (strtolower(substr($c, 0, 4)) == '<pre' || strtolower(substr($c, 0, 9)) == '<textarea') { $content .= $c; continue; } else if (strtolower(substr($c, 0, 7)) == '<script' && strpos($c, '//') != false && (strpos($c, "\r") !== false || strpos($c, "\n") !== false)) { // JS代码,包含//注释的,单行代码不处理 $tmps = preg_split('/(\r|\n)/ms', $c, -1, PREG_SPLIT_NO_EMPTY); $c = ''; foreach ($tmps as $tmp) { if (strpos($tmp, '//') !== false) { // 对含有//的行做处理 if (substr(trim($tmp), 0, 2) == '//') { // 开头是//的就是注释 continue; } $chars = preg_split('//', $tmp, -1, PREG_SPLIT_NO_EMPTY); $is_quot = $is_apos = false; foreach ($chars as $key => $char) { if ($char == '"' && $chars[$key - 1] != '\' && !$is_apos) { $is_quot = !$is_quot; } else if ($char == '\'' && $chars[$key - 1] != '\' && !$is_quot) { $is_apos = !$is_apos; } else if ($char == '/' && $chars[$key + 1] == '/' && !$is_quot && !$is_apos) { $tmp = substr($tmp, 0, $key); // 不是字符串内的就是注释 break; } } } $c .= $tmp; } } $c = preg_replace('/[\n\r\t]+/', ' ', $c); // 清除换行符,清除制表符 $c = preg_replace('/\s{2,}/', ' ', $c); // 清除额外的空格 $c = preg_replace('/>\s</', '> <', $c); // 清除标签间的空格 $c = preg_replace('/\/\*.*?\*\//i', '', $c); // 清除 CSS & JS 的注释 $c = preg_replace('/<!--[^!]*-->/', '', $c); // 清除 HTML 的注释 $content .= $c; } return $content; } /*PHP压缩输出网页代码*/ ?>
说明:像这种代码,虽然看起来比较长,但是它不处理pre的标签啊。如果,你的网站有pre标签的,还是用这个方法,相反,没有pre标签的,我还是更倾向于第一种方法,毕竟,代码看起来比较简洁啊。
前端代码压缩的好处
压缩代码的好处,对于站长来说,就不用多言了,总的来说,前端代码压缩可以提高网页加载速度、减少文件大小和网络流量,提高搜索引擎优化,并保护代码的知识产权。这些好处对于提高用户体验、提高网站性能和保护代码安全都非常重要的。
特别注意
当然,一股脑的压缩代码,有些需要注意的地方,一定不能粗心大意。像JS中的 {} 和 ; 等闭合标签,以及PHP中的 // 注释标签,还有 {} 闭合,不能用双斜杠,得要用这种带闭合式的注释,不然肯定会运行出错的。压缩代码以后,得要仔细排查程序,看看前端,有没有运行出错,如果运行出错,肯定是少闭合标签导致的。
本文结束
评论专区
发表评论
评论列表(无评论)