First look at the effect:
It means to make your source code look crowded together, so that if others want to see your source code is not easy to understand, (of course, if others really want to see the words can also be done by some of the software's collation of the function of the code, such as the idea of the Ctrl+alt+l shortcut key).
At first I thought that this effect is some of the online so-called compression software implementation, such as what Gzippy and WP super cache, but gzippy this compression plug-in only compresses the actual size of the page, not to make the source of the Web page look very compact. However, there are compressed source code methods, and later found that the online methods, although the source code can appear to be very compact, but also can actually compress a little page size, but also cause a lot of problems, and the effect of compressing the page size is not good.
But it doesn't matter, we want to make the source code look very compact effect.
Let's talk about the methods of compression and how to solve common problems:
To compress a webpage's code:
Insert the code between the function.php.
1234567891011121314151617181920212223242526272829 |
//压缩html代码
function wp_compress_html(){
function wp_compress_html_main (
$buffer
){
$initial
=
strlen
(
$buffer
);
$buffer
=
explode
(
"<!--wp-compress-html-->"
,
$buffer
);
$count
=
count (
$buffer
);
for (
$i = 0;
$i <=
$count
;
$i
++){
if (
stristr
(
$buffer
[
$i
],
‘<!--wp-compress-html no compression-->‘
)) {
$buffer
[
$i
]=(
str_replace
(
"<!--wp-compress-html no compression-->"
,
" "
,
$buffer
[
$i
]));
}
else {
$buffer
[
$i
]=(
str_replace
(
"\t"
,
" "
,
$buffer
[
$i
]));
$buffer
[
$i
]=(
str_replace
(
"\n\n"
,
"\n"
,
$buffer
[
$i
]));
$buffer
[
$i
]=(
str_replace
(
"\n"
,
""
,
$buffer
[
$i
]));
$buffer
[
$i
]=(
str_replace
(
"\r"
,
""
,
$buffer
[
$i
]));
while (
stristr
(
$buffer
[
$i
],
‘ ‘
)) {
$buffer
[
$i
]=(
str_replace
(
" "
,
" "
,
$buffer
[
$i
]));
}
}
$buffer_out
.=
$buffer
[
$i
];
}
$final
=
strlen
(
$buffer_out
);
$savings
=(
$initial
-
$final
)/
$initial
*100;
$savings
=
round
(
$savings
, 2);
$buffer_out
.=
"\n<!--压缩前的大小: $initial bytes; 压缩后的大小: $final bytes; 节约:$savings% -->"
;
return $buffer_out
;
}
ob_start(
"wp_compress_html_main"
);
}
add_action(
‘get_header‘
,
‘wp_compress_html‘
);
|
But later found that this feature makes other functions error, such as JS failure. (At first I did not know what the reason for the re-installation of WordPress)
But it doesn't matter, there are solutions on the net, since JS fails, we can let the JS code is not compressed, as long as the code does not want to be compressed (mainly JS code) in the code below can be. In fact, some online compression JS Web site to manually compress the JS code, and then replace the original JS code also play the same effect.
123 |
<!--wp-compress-html--><!--wp-compress-html no compression--> 此处代码不会被压缩,主要是避免压缩带来的错误,比如JS错误 <!--wp-compress-html no compression--><!--wp-compress-html--> |
Another problem, I used the code highlighting plugin Syntaxhighlighter, and then found that I inserted in the article after compression of the highlighted code is also all squeezed together and the style is also invalid, because this function also the CSS and JS are compressed. But there is a solution on the net, is to insert the following code between the function.php,
12345678 |
function unCompress(
$content
) {
if
(preg_match_all(
‘/(crayon-|<\/pre>)/i‘
,
$content
,
$matches
)) {
$content =
‘<!--wp-compress-html--><!--wp-compress-html no compression-->‘
.
$content
;
$content
.=
‘<!--wp-compress-html no compression--><!--wp-compress-html-->‘
;
}
return $content
;
}
add_filter(
"the_content"
,
"unCompress"
);
|
But this can only let the highlight code line effect, but the style is invalid, the interface is very difficult to see, which I can not solve.
After long-term observation, found that JS compression error has no more than 2 kinds of situations:
The author of the 1.js code is lazy and shorthand for some statements. For example, JS if structure is generally:
12345 |
if (条件){ 语句1; } else { 语句2; } |
But some people write JS, do not know whether it is a superb or lazy, written as follows:
1234 |
if (条件) 语句1; else 语句2; |
This lazy format, once compressed, will destroy the logic to judge the error! If the compression error, and found this lazy mode, as long as the full code can be written.
There are//comment statements in the 2.js code, such as:
1234567 |
<script type= "text/javascript" > function test(){ //定义一个变量: var string1 = ‘newstring‘ ; alert(string1); } </script> |
This code, once compressed, becomes like this:
1 |
<script type= "text/javascript" > function test(){ //定义一个变量:var string1 = ‘newstring‘;alert(string1);}</script> |
Since this note is semi-closed, it will hurt the innocent after compression, and the following statements are annotated! thus error!!
There are 2 ways to solve the problem:
I. Delete the semi-closed annotations;
II. Use/* */full closed annotation;
PS: At first I saw this function is very good, I also want to take this to install force, but later found this force can not install AH, although there are many sites use this function, but I think there will be a lot of errors, such as JS error, although you can use the above method to let some JS code is not compressed, But can not guarantee that all the JS code is not compressed, but also afraid of changes in error, such as you add a new plugin has its own JS file, then how can you ensure that all the JS file you can protect. I previously because compressed the page, and then my page above the carousel diagram effect is gone, I do not know what is the reason, so I later re-installed WordPress, later only to know that the function of the ghost.
So the conclusion is that this function is actually not recommended for everyone to use.
Reference URL: http://zhangge.net/4731.html
WordPress Source code Compression optimization and the solution of common problems