1.安装npm


可以直接通过pacman安装,当然了也可以选择下载压缩包(见GItHub)来安装

sudo pacman -S npm

2.安装UglifyJS


sudo npm install uglify-js -g 

可以看到

/usr/bin/uglifyjs -> /usr/lib/node_modules/uglify-js/bin/uglifyjs
+ uglify-js@3.2.2
added 3 packages in 3.096s

3.愉快地探索


首先随便拿了一个JS文件来做测试,文件如下(无需点开):

$(document).ready(function() {
            var TimeList = document.getElementsByClassName("cmt_time");
            for( var i=0;i<TimeList.length;i++)
                {
                    TimeList[i].innerText= moment(TimeList[i].innerText).utcOffset(-8).format('YYYY-M-D HH:mm')
                }


            var widthtemp = $("textarea#body").parents("div.commentbox-1").siblings("h3").width();
             widthtemp = widthtemp - 90;
               if($("textarea#body").parent().width() > widthtemp)
              {
                $("textarea#body")[0].style.width="100%";
              }
              else
              {
                $("textarea#body").width(widthtemp);
              }


              if($(window).width() > 700)
              {
                $("textarea#cmtb-2-content").width(widthtemp-65);
                $("textarea#cmtb-3-content").width(widthtemp-65-90-31);
              }
              else
              {
                $("textarea#cmtb-2-content")[0].style.width="100%";
                $("textarea#cmtb-3-content")[0].style.width="100%";
              }



             var bodylist = $('div.commentBody');
             for( var i = 0;i < bodylist.length;i++)
             {
                bodylist.find('p')[i].innerText = change_br(bodylist.find('p')[i].innerText);
             }

});

$("#commentbox-1-form").submit(function(){
           var body = $("#body").val();
           //body=body.replace(/\n/g,'<br>');
            //body=body.replace(/\s/g, '&nbsp;');

          $.ajax({
                    type: "post",
                    url: "/comment/1",
                    data: {
                    "cmtFormOwner":$("#owner").val(),
                    "cmtFormMail":$("#mail").val(),
                    "cmtFormWebsite":$("#website").val(),
                    "cmtFormBody":body.replace(/\n/g,'<br>'),
                    //"cmtFormBody":body,

                    "cmtFormFrom":'aboutme',
                    "cmtFormFromId":0
                    },
                    success: function (data, status) {
                        if (data != "error") {
                           var P1 =  $("<div class='comment_list1' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");
                            P1.find("img")[0].src=data.md5;
                            P1.attr("order_number",data.id);
                            if($("#website").val() == '')//如果没有网站
                                {
                                    //删掉cite中的a
                                    P1.find("cite").find("a")[0].remove();
                                    P1.find("cite")[0].innerText = ' '+$("#owner").val();

                                }
                            else
                                {
                                    P1.find("cite").find("a")[0].href= ("http://"+$("#website").val());
                                    P1.find("cite").find("a")[0].innerText = $("#owner").val();
                                }
                            //body = change_br(body);
                            //P1.find("div.commentBody").find("p")[0].innerText = $("#body").val();
                            P1.find("div.commentBody").find("p")[0].innerText = body;

                            var I1=$("div.comment_list").first();
                            I1.prepend(P1[0]);

                            $("input[name='rest']").click();
                        }
                    },
                    error: function () {
                        alert('编辑失败');
                    },
                    complete: function () {

                    }

                });



    return false;



});


//$("#cmtb-2-submit").click(function(){
//});

function hideme(obj)
{
    $(obj).parent().parent()[0].style.display="none";
    $("div.commentbox-1")[0].style.display='';
};






//function comment_respond2(obj)
$("#commentbox-2-form").submit(function(){
{
    //通过jquery获取该“回复”所回复的评论id
    var order_number = $(this).parents("div.comment_list1").attr("order_number");
    var body = $("#cmtb-2-content").val();
    //body=body.replace(/\n/g,'<br/>');
    $.ajax({

                        type: "post",
                        url: "/comment/2",
                        data: {
                        "cmtFormOwner":$("#cmtb-2-username_input").val(),
                        "cmtFormMail":$("#cmtb-2-usermail_input").val(),
                        "cmtFormWebsite":$("#cmtb-2-userweb_input").val(),
                        "cmtFormBody":body.replace(/\n/g,'<br>'),

                        "cmtFormFrom":'aboutme',
                        "cmtFormFromId":0,
                        "cmtFormMaster": order_number
                        },
                        success: function (data, status) {
                            if(data != 'error'){

                                var P2 = $("<div class='comment_list2' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");
                                   //var P2 = $("<div class='comment_list2'></div>")
                                P2.find("img")[0].src=data.md5;
                                P2.attr("order_number",data.id);
                                if($("#cmtb-2-userweb_input").val() == '')//如果没有网站
                                {
                                    //删掉cite中的a
                                    P2.find("cite").find("a")[0].remove();
                                    P2.find("cite")[0].innerText = ' '+$("#cmtb-2-username_input").val();

                                }
                                else
                                {
                                    P2.find("cite").find("a")[0].href= ("http://"+$("#cmtb-2-userweb_input").val());
                                    P2.find("cite").find("a")[0].innerText = $("#cmtb-2-username_input").val();
                                }
                                P2.find("div.commentBody").find("p")[0].innerText = body;

                                var I2=$("div.commentbox-2");
                                I2.after(P2[0]);



                                $("input[id='rest2']").click();
                            }
                            else
                            {
                                alert('评论失败,请再试一次吧~');
                            }
                        },
                        error: function () {
                        alert('编辑失败');}





    });
       return false;


}});


function respond_fun(obj)
{
    if($(obj).parent().parent().attr("class") == 'comment_list1')
    {

        //将2级评论框显现出来并插入
        var inset_footer = $(obj).parent();
        var ctmbox2 = $("div.commentbox-2");
        //把1 3 级评论框隐藏
        $("div.commentbox-1")[0].style.display='none';
        $("div.commentbox-3")[0].style.display='none';
        ctmbox2[0].style.display = '';
        inset_footer.after(ctmbox2[0]);
    }
    else if ($(obj).parent().parent().attr("class") != 'comment_list1')
    {
        //将2级评论框显现出来并插入
        var inset_footer = $(obj).parent();
        var ctmbox3 = $("div.commentbox-3");
        //把1 3 级评论框隐藏
        $("div.commentbox-1")[0].style.display='none';
        $("div.commentbox-2")[0].style.display='none';
        ctmbox3[0].style.display = '';
        inset_footer.after(ctmbox3[0]);
    }


};


//function comment_respond3(obj)
$("#commentbox-3-form").submit(function(){
{
    //通过jquery获取该“回复”所回复的评论id
    if ($(this).parents("div.comment_list3").length == 1)
    {
        var order_number = $(this).parents("div.comment_list3").attr("order_number");
    }
    else if ($(this).parents("div.comment_list2").length == 1)
    {
        var order_number = $(this).parents("div.comment_list2").attr("order_number");
    }


    var body = $("#cmtb-3-content").val();
    //body=body.replace(/\n/g,'<br/>');
    $.ajax({

                        type: "post",
                        url: "/comment/3",
                        data: {
                        "cmtFormOwner":$("#cmtb-3-username_input").val(),
                        "cmtFormMail":$("#cmtb-3-usermail_input").val(),
                        "cmtFormWebsite":$("#cmtb-3-userweb_input").val(),
                        "cmtFormBody":body.replace(/\n/g,'<br>'),

                        "cmtFormFrom":'aboutme',
                        "cmtFormFromId":0,
                        "cmtFormMaster": order_number
                        },
                        success: function (data, status) {
                            if(data != 'error'){

                                var P3 = $("<div class='comment_list3' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");
                                   //var P2 = $("<div class='comment_list2'></div>")
                                P3.find("img")[0].src=data.md5;
                                P3.attr("order_number",data.id);
                                if($("#cmtb-3-userweb_input").val() == '')//如果没有网站
                                {
                                    //删掉cite中的a
                                    P3.find("cite").find("a")[0].remove();
                                    P3.find("cite")[0].innerText = ' '+$("#cmtb-3-username_input").val();

                                }
                                else
                                {
                                    P3.find("cite").find("a")[0].href= ("http://"+$("#cmtb-3-userweb_input").val());
                                    P3.find("cite").find("a")[0].innerText = $("#cmtb-3-username_input").val();
                                }
                                P3.find("div.commentBody").find("p")[0].innerText = body;

                                var I3=$("div.commentbox-3");
                                if ($(this).parents("div.comment_list3").length == 1)
                                {
                                    I3 = I3.parent();
                                }
                                I3.after(P3[0]);



                                $("input[id='rest3']").click();
                            }
                            else
                            {
                                alert('评论失败,请再试一次吧~');
                            }
                        },
                        error: function () {
                        alert('编辑失败');}





    });
return false;

}});



















var resizeTimer = null;

 window.onresize=function(){
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout("cmt_resize()", 500);

 };

 function cmt_resize(){
     var widthtemp = $("textarea#body").parents("div.commentbox-1").siblings("h3").width();
      widthtemp = widthtemp - 90;
      if($("textarea#body").parent().width() > widthtemp)
      {
        $("textarea#body")[0].style.width="100%";
      }
      else
      {
        $("textarea#body").width(widthtemp);
      }


      if($(window).width() > 700)
        {
                if($("textarea#cmtb-2-content").parent().width() > widthtemp-65){
                    $("textarea#cmtb-2-content")[0].style.width="100%";}
                else{
                $("textarea#cmtb-2-content").width(widthtemp-65);}


                if($("textarea#cmtb-3-content").parent().width() > widthtemp-65-90-31){
                    $("textarea#cmtb-3-content")[0].style.width="100%";}
                else{
                $("textarea#cmtb-3-content").width(widthtemp-65-90-31);}


              }
              else
              {

                if($("textarea#cmtb-2-content").parent().width() > widthtemp-65+31){
                    $("textarea#cmtb-2-content")[0].style.width="100%";}
                else{
                $("textarea#cmtb-2-content").width(widthtemp-65+31);}


                if($("textarea#cmtb-3-content").parent().width() > widthtemp-90-90+31){
                    $("textarea#cmtb-3-content")[0].style.width="100%";}
                else{
                $("textarea#cmtb-3-content").width(widthtemp-90-90+31);}


              }
 };




function change_br(bodyTemp){
    //bodyTemp = bodyTemp.replace(/&lt;br&gt;/g,'<br/>');
    bodyTemp = bodyTemp.replace(/<br>/g,'\n');
    //bodyTemp = bodyTemp.replace(/\n/g,'<br>');&lt;br&gt;
    return bodyTemp
};

文件大小为13.4KB。输入

uglifyjs ./about_page.js -o 1.js

生成1.js,大小为7.2KB,这个命令是去除空格、回车和注释等每必要的字符,可以见到压缩还是比较多的(因为源文件很多空格、回车以及注释)。压缩后如下(无需点开):

$(document).ready(function(){var TimeList=document.getElementsByClassName("cmt_time");for(var i=0;i<TimeList.length;i++){TimeList[i].innerText=moment(TimeList[i].innerText).utcOffset(-8).format("YYYY-M-D HH:mm")}var widthtemp=$("textarea#body").parents("div.commentbox-1").siblings("h3").width();widthtemp=widthtemp-90;if($("textarea#body").parent().width()>widthtemp){$("textarea#body")[0].style.width="100%"}else{$("textarea#body").width(widthtemp)}if($(window).width()>700){$("textarea#cmtb-2-content").width(widthtemp-65);$("textarea#cmtb-3-content").width(widthtemp-65-90-31)}else{$("textarea#cmtb-2-content")[0].style.width="100%";$("textarea#cmtb-3-content")[0].style.width="100%"}var bodylist=$("div.commentBody");for(var i=0;i<bodylist.length;i++){bodylist.find("p")[i].innerText=change_br(bodylist.find("p")[i].innerText)}});$("#commentbox-1-form").submit(function(){var body=$("#body").val();$.ajax({type:"post",url:"/comment/1",data:{cmtFormOwner:$("#owner").val(),cmtFormMail:$("#mail").val(),cmtFormWebsite:$("#website").val(),cmtFormBody:body.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0},success:function(data,status){if(data!="error"){var P1=$("<div class='comment_list1' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");P1.find("img")[0].src=data.md5;P1.attr("order_number",data.id);if($("#website").val()==""){P1.find("cite").find("a")[0].remove();P1.find("cite")[0].innerText=" "+$("#owner").val()}else{P1.find("cite").find("a")[0].href="http://"+$("#website").val();P1.find("cite").find("a")[0].innerText=$("#owner").val()}P1.find("div.commentBody").find("p")[0].innerText=body;var I1=$("div.comment_list").first();I1.prepend(P1[0]);$("input[name='rest']").click()}},error:function(){alert("编辑失败")},complete:function(){}});return false});function hideme(obj){$(obj).parent().parent()[0].style.display="none";$("div.commentbox-1")[0].style.display=""}$("#commentbox-2-form").submit(function(){{var order_number=$(this).parents("div.comment_list1").attr("order_number");var body=$("#cmtb-2-content").val();$.ajax({type:"post",url:"/comment/2",data:{cmtFormOwner:$("#cmtb-2-username_input").val(),cmtFormMail:$("#cmtb-2-usermail_input").val(),cmtFormWebsite:$("#cmtb-2-userweb_input").val(),cmtFormBody:body.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0,cmtFormMaster:order_number},success:function(data,status){if(data!="error"){var P2=$("<div class='comment_list2' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");P2.find("img")[0].src=data.md5;P2.attr("order_number",data.id);if($("#cmtb-2-userweb_input").val()==""){P2.find("cite").find("a")[0].remove();P2.find("cite")[0].innerText=" "+$("#cmtb-2-username_input").val()}else{P2.find("cite").find("a")[0].href="http://"+$("#cmtb-2-userweb_input").val();P2.find("cite").find("a")[0].innerText=$("#cmtb-2-username_input").val()}P2.find("div.commentBody").find("p")[0].innerText=body;var I2=$("div.commentbox-2");I2.after(P2[0]);$("input[id='rest2']").click()}else{alert("评论失败,请再试一次吧~")}},error:function(){alert("编辑失败")}});return false}});function respond_fun(obj){if($(obj).parent().parent().attr("class")=="comment_list1"){var inset_footer=$(obj).parent();var ctmbox2=$("div.commentbox-2");$("div.commentbox-1")[0].style.display="none";$("div.commentbox-3")[0].style.display="none";ctmbox2[0].style.display="";inset_footer.after(ctmbox2[0])}else if($(obj).parent().parent().attr("class")!="comment_list1"){var inset_footer=$(obj).parent();var ctmbox3=$("div.commentbox-3");$("div.commentbox-1")[0].style.display="none";$("div.commentbox-2")[0].style.display="none";ctmbox3[0].style.display="";inset_footer.after(ctmbox3[0])}}$("#commentbox-3-form").submit(function(){{if($(this).parents("div.comment_list3").length==1){var order_number=$(this).parents("div.comment_list3").attr("order_number")}else if($(this).parents("div.comment_list2").length==1){var order_number=$(this).parents("div.comment_list2").attr("order_number")}var body=$("#cmtb-3-content").val();$.ajax({type:"post",url:"/comment/3",data:{cmtFormOwner:$("#cmtb-3-username_input").val(),cmtFormMail:$("#cmtb-3-usermail_input").val(),cmtFormWebsite:$("#cmtb-3-userweb_input").val(),cmtFormBody:body.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0,cmtFormMaster:order_number},success:function(data,status){if(data!="error"){var P3=$("<div class='comment_list3' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");P3.find("img")[0].src=data.md5;P3.attr("order_number",data.id);if($("#cmtb-3-userweb_input").val()==""){P3.find("cite").find("a")[0].remove();P3.find("cite")[0].innerText=" "+$("#cmtb-3-username_input").val()}else{P3.find("cite").find("a")[0].href="http://"+$("#cmtb-3-userweb_input").val();P3.find("cite").find("a")[0].innerText=$("#cmtb-3-username_input").val()}P3.find("div.commentBody").find("p")[0].innerText=body;var I3=$("div.commentbox-3");if($(this).parents("div.comment_list3").length==1){I3=I3.parent()}I3.after(P3[0]);$("input[id='rest3']").click()}else{alert("评论失败,请再试一次吧~")}},error:function(){alert("编辑失败")}});return false}});var resizeTimer=null;window.onresize=function(){if(resizeTimer)clearTimeout(resizeTimer);resizeTimer=setTimeout("cmt_resize()",500)};function cmt_resize(){var widthtemp=$("textarea#body").parents("div.commentbox-1").siblings("h3").width();widthtemp=widthtemp-90;if($("textarea#body").parent().width()>widthtemp){$("textarea#body")[0].style.width="100%"}else{$("textarea#body").width(widthtemp)}if($(window).width()>700){if($("textarea#cmtb-2-content").parent().width()>widthtemp-65){$("textarea#cmtb-2-content")[0].style.width="100%"}else{$("textarea#cmtb-2-content").width(widthtemp-65)}if($("textarea#cmtb-3-content").parent().width()>widthtemp-65-90-31){$("textarea#cmtb-3-content")[0].style.width="100%"}else{$("textarea#cmtb-3-content").width(widthtemp-65-90-31)}}else{if($("textarea#cmtb-2-content").parent().width()>widthtemp-65+31){$("textarea#cmtb-2-content")[0].style.width="100%"}else{$("textarea#cmtb-2-content").width(widthtemp-65+31)}if($("textarea#cmtb-3-content").parent().width()>widthtemp-90-90+31){$("textarea#cmtb-3-content")[0].style.width="100%"}else{$("textarea#cmtb-3-content").width(widthtemp-90-90+31)}}}function change_br(bodyTemp){bodyTemp=bodyTemp.replace(/<br>/g,"\n");return bodyTemp}

输入

uglifyjs ./about_page.js -o 2.js -c

进行压缩代码,这里使用的是默认的压缩选项。生成2.js后看到大小为7.0KB。文件如下(无需点开):

function hideme(obj){$(obj).parent().parent()[0].style.display="none",$("div.commentbox-1")[0].style.display=""}function respond_fun(obj){if("comment_list1"==$(obj).parent().parent().attr("class")){var inset_footer=$(obj).parent(),ctmbox2=$("div.commentbox-2");$("div.commentbox-1")[0].style.display="none",$("div.commentbox-3")[0].style.display="none",ctmbox2[0].style.display="",inset_footer.after(ctmbox2[0])}else if("comment_list1"!=$(obj).parent().parent().attr("class")){inset_footer=$(obj).parent();var ctmbox3=$("div.commentbox-3");$("div.commentbox-1")[0].style.display="none",$("div.commentbox-2")[0].style.display="none",ctmbox3[0].style.display="",inset_footer.after(ctmbox3[0])}}function cmt_resize(){var widthtemp=$("textarea#body").parents("div.commentbox-1").siblings("h3").width();widthtemp-=90,$("textarea#body").parent().width()>widthtemp?$("textarea#body")[0].style.width="100%":$("textarea#body").width(widthtemp),$(window).width()>700?($("textarea#cmtb-2-content").parent().width()>widthtemp-65?$("textarea#cmtb-2-content")[0].style.width="100%":$("textarea#cmtb-2-content").width(widthtemp-65),$("textarea#cmtb-3-content").parent().width()>widthtemp-65-90-31?$("textarea#cmtb-3-content")[0].style.width="100%":$("textarea#cmtb-3-content").width(widthtemp-65-90-31)):($("textarea#cmtb-2-content").parent().width()>widthtemp-65+31?$("textarea#cmtb-2-content")[0].style.width="100%":$("textarea#cmtb-2-content").width(widthtemp-65+31),$("textarea#cmtb-3-content").parent().width()>widthtemp-90-90+31?$("textarea#cmtb-3-content")[0].style.width="100%":$("textarea#cmtb-3-content").width(widthtemp-90-90+31))}function change_br(bodyTemp){return bodyTemp=bodyTemp.replace(/<br>/g,"\n")}$(document).ready(function(){for(var TimeList=document.getElementsByClassName("cmt_time"),i=0;i<TimeList.length;i++)TimeList[i].innerText=moment(TimeList[i].innerText).utcOffset(-8).format("YYYY-M-D HH:mm");var widthtemp=$("textarea#body").parents("div.commentbox-1").siblings("h3").width();widthtemp-=90,$("textarea#body").parent().width()>widthtemp?$("textarea#body")[0].style.width="100%":$("textarea#body").width(widthtemp),$(window).width()>700?($("textarea#cmtb-2-content").width(widthtemp-65),$("textarea#cmtb-3-content").width(widthtemp-65-90-31)):($("textarea#cmtb-2-content")[0].style.width="100%",$("textarea#cmtb-3-content")[0].style.width="100%");var bodylist=$("div.commentBody");for(i=0;i<bodylist.length;i++)bodylist.find("p")[i].innerText=change_br(bodylist.find("p")[i].innerText)}),$("#commentbox-1-form").submit(function(){var body=$("#body").val();return $.ajax({type:"post",url:"/comment/1",data:{cmtFormOwner:$("#owner").val(),cmtFormMail:$("#mail").val(),cmtFormWebsite:$("#website").val(),cmtFormBody:body.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0},success:function(data,status){if("error"!=data){var P1=$("<div class='comment_list1' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");P1.find("img")[0].src=data.md5,P1.attr("order_number",data.id),""==$("#website").val()?(P1.find("cite").find("a")[0].remove(),P1.find("cite")[0].innerText=" "+$("#owner").val()):(P1.find("cite").find("a")[0].href="http://"+$("#website").val(),P1.find("cite").find("a")[0].innerText=$("#owner").val()),P1.find("div.commentBody").find("p")[0].innerText=body;$("div.comment_list").first().prepend(P1[0]),$("input[name='rest']").click()}},error:function(){alert("编辑失败")},complete:function(){}}),!1}),$("#commentbox-2-form").submit(function(){var order_number=$(this).parents("div.comment_list1").attr("order_number"),body=$("#cmtb-2-content").val();return $.ajax({type:"post",url:"/comment/2",data:{cmtFormOwner:$("#cmtb-2-username_input").val(),cmtFormMail:$("#cmtb-2-usermail_input").val(),cmtFormWebsite:$("#cmtb-2-userweb_input").val(),cmtFormBody:body.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0,cmtFormMaster:order_number},success:function(data,status){if("error"!=data){var P2=$("<div class='comment_list2' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");P2.find("img")[0].src=data.md5,P2.attr("order_number",data.id),""==$("#cmtb-2-userweb_input").val()?(P2.find("cite").find("a")[0].remove(),P2.find("cite")[0].innerText=" "+$("#cmtb-2-username_input").val()):(P2.find("cite").find("a")[0].href="http://"+$("#cmtb-2-userweb_input").val(),P2.find("cite").find("a")[0].innerText=$("#cmtb-2-username_input").val()),P2.find("div.commentBody").find("p")[0].innerText=body;$("div.commentbox-2").after(P2[0]),$("input[id='rest2']").click()}else alert("评论失败,请再试一次吧~")},error:function(){alert("编辑失败")}}),!1}),$("#commentbox-3-form").submit(function(){if(1==$(this).parents("div.comment_list3").length)var order_number=$(this).parents("div.comment_list3").attr("order_number");else if(1==$(this).parents("div.comment_list2").length)order_number=$(this).parents("div.comment_list2").attr("order_number");var body=$("#cmtb-3-content").val();return $.ajax({type:"post",url:"/comment/3",data:{cmtFormOwner:$("#cmtb-3-username_input").val(),cmtFormMail:$("#cmtb-3-usermail_input").val(),cmtFormWebsite:$("#cmtb-3-userweb_input").val(),cmtFormBody:body.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0,cmtFormMaster:order_number},success:function(data,status){if("error"!=data){var P3=$("<div class='comment_list3' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");P3.find("img")[0].src=data.md5,P3.attr("order_number",data.id),""==$("#cmtb-3-userweb_input").val()?(P3.find("cite").find("a")[0].remove(),P3.find("cite")[0].innerText=" "+$("#cmtb-3-username_input").val()):(P3.find("cite").find("a")[0].href="http://"+$("#cmtb-3-userweb_input").val(),P3.find("cite").find("a")[0].innerText=$("#cmtb-3-username_input").val()),P3.find("div.commentBody").find("p")[0].innerText=body;var I3=$("div.commentbox-3");1==$(this).parents("div.comment_list3").length&&(I3=I3.parent()),I3.after(P3[0]),$("input[id='rest3']").click()}else alert("评论失败,请再试一次吧~")},error:function(){alert("编辑失败")}}),!1});var resizeTimer=null;window.onresize=function(){resizeTimer&&clearTimeout(resizeTimer),resizeTimer=setTimeout("cmt_resize()",500)};

输入

uglifyjs ./about_page.js -o 3.js -c -m

进行压缩代码并使用Mangler(有看到一种翻译是“混淆”。其实就是将部分变量用a、b、c等代替)。生成3.js后看到大小为6.5KB。文件如下(无需点开):

function hideme(t){$(t).parent().parent()[0].style.display="none",$("div.commentbox-1")[0].style.display=""}function respond_fun(t){if("comment_list1"==$(t).parent().parent().attr("class")){var e=$(t).parent(),n=$("div.commentbox-2");$("div.commentbox-1")[0].style.display="none",$("div.commentbox-3")[0].style.display="none",n[0].style.display="",e.after(n[0])}else if("comment_list1"!=$(t).parent().parent().attr("class")){e=$(t).parent();var i=$("div.commentbox-3");$("div.commentbox-1")[0].style.display="none",$("div.commentbox-2")[0].style.display="none",i[0].style.display="",e.after(i[0])}}function cmt_resize(){var t=$("textarea#body").parents("div.commentbox-1").siblings("h3").width();t-=90,$("textarea#body").parent().width()>t?$("textarea#body")[0].style.width="100%":$("textarea#body").width(t),$(window).width()>700?($("textarea#cmtb-2-content").parent().width()>t-65?$("textarea#cmtb-2-content")[0].style.width="100%":$("textarea#cmtb-2-content").width(t-65),$("textarea#cmtb-3-content").parent().width()>t-65-90-31?$("textarea#cmtb-3-content")[0].style.width="100%":$("textarea#cmtb-3-content").width(t-65-90-31)):($("textarea#cmtb-2-content").parent().width()>t-65+31?$("textarea#cmtb-2-content")[0].style.width="100%":$("textarea#cmtb-2-content").width(t-65+31),$("textarea#cmtb-3-content").parent().width()>t-90-90+31?$("textarea#cmtb-3-content")[0].style.width="100%":$("textarea#cmtb-3-content").width(t-90-90+31))}function change_br(t){return t=t.replace(/<br>/g,"\n")}$(document).ready(function(){for(var t=document.getElementsByClassName("cmt_time"),e=0;e<t.length;e++)t[e].innerText=moment(t[e].innerText).utcOffset(-8).format("YYYY-M-D HH:mm");var n=$("textarea#body").parents("div.commentbox-1").siblings("h3").width();n-=90,$("textarea#body").parent().width()>n?$("textarea#body")[0].style.width="100%":$("textarea#body").width(n),$(window).width()>700?($("textarea#cmtb-2-content").width(n-65),$("textarea#cmtb-3-content").width(n-65-90-31)):($("textarea#cmtb-2-content")[0].style.width="100%",$("textarea#cmtb-3-content")[0].style.width="100%");var i=$("div.commentBody");for(e=0;e<i.length;e++)i.find("p")[e].innerText=change_br(i.find("p")[e].innerText)}),$("#commentbox-1-form").submit(function(){var t=$("#body").val();return $.ajax({type:"post",url:"/comment/1",data:{cmtFormOwner:$("#owner").val(),cmtFormMail:$("#mail").val(),cmtFormWebsite:$("#website").val(),cmtFormBody:t.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0},success:function(e,n){if("error"!=e){var i=$("<div class='comment_list1' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");i.find("img")[0].src=e.md5,i.attr("order_number",e.id),""==$("#website").val()?(i.find("cite").find("a")[0].remove(),i.find("cite")[0].innerText=" "+$("#owner").val()):(i.find("cite").find("a")[0].href="http://"+$("#website").val(),i.find("cite").find("a")[0].innerText=$("#owner").val()),i.find("div.commentBody").find("p")[0].innerText=t;$("div.comment_list").first().prepend(i[0]),$("input[name='rest']").click()}},error:function(){alert("编辑失败")},complete:function(){}}),!1}),$("#commentbox-2-form").submit(function(){var t=$(this).parents("div.comment_list1").attr("order_number"),e=$("#cmtb-2-content").val();return $.ajax({type:"post",url:"/comment/2",data:{cmtFormOwner:$("#cmtb-2-username_input").val(),cmtFormMail:$("#cmtb-2-usermail_input").val(),cmtFormWebsite:$("#cmtb-2-userweb_input").val(),cmtFormBody:e.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0,cmtFormMaster:t},success:function(t,n){if("error"!=t){var i=$("<div class='comment_list2' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");i.find("img")[0].src=t.md5,i.attr("order_number",t.id),""==$("#cmtb-2-userweb_input").val()?(i.find("cite").find("a")[0].remove(),i.find("cite")[0].innerText=" "+$("#cmtb-2-username_input").val()):(i.find("cite").find("a")[0].href="http://"+$("#cmtb-2-userweb_input").val(),i.find("cite").find("a")[0].innerText=$("#cmtb-2-username_input").val()),i.find("div.commentBody").find("p")[0].innerText=e;$("div.commentbox-2").after(i[0]),$("input[id='rest2']").click()}else alert("评论失败,请再试一次吧~")},error:function(){alert("编辑失败")}}),!1}),$("#commentbox-3-form").submit(function(){if(1==$(this).parents("div.comment_list3").length)var t=$(this).parents("div.comment_list3").attr("order_number");else if(1==$(this).parents("div.comment_list2").length)t=$(this).parents("div.comment_list2").attr("order_number");var e=$("#cmtb-3-content").val();return $.ajax({type:"post",url:"/comment/3",data:{cmtFormOwner:$("#cmtb-3-username_input").val(),cmtFormMail:$("#cmtb-3-usermail_input").val(),cmtFormWebsite:$("#cmtb-3-userweb_input").val(),cmtFormBody:e.replace(/\n/g,"<br>"),cmtFormFrom:"aboutme",cmtFormFromId:0,cmtFormMaster:t},success:function(t,n){if("error"!=t){var i=$("<div class='comment_list3' order_number='0' style='clear: both;'><div class='commnetListInfo'><img src='0'><cite class='cmt_websitehref'> <a href='0' target='_blank'>0</a></cite><time class='cmt_time'>刚刚</time></div><div class='commentBody'><p>0</p></div><div class='comment-footer''><a href='javascript:void(0)' onclick='respond_fun(this)'>回复</a></div></div>");i.find("img")[0].src=t.md5,i.attr("order_number",t.id),""==$("#cmtb-3-userweb_input").val()?(i.find("cite").find("a")[0].remove(),i.find("cite")[0].innerText=" "+$("#cmtb-3-username_input").val()):(i.find("cite").find("a")[0].href="http://"+$("#cmtb-3-userweb_input").val(),i.find("cite").find("a")[0].innerText=$("#cmtb-3-username_input").val()),i.find("div.commentBody").find("p")[0].innerText=e;var r=$("div.commentbox-3");1==$(this).parents("div.comment_list3").length&&(r=r.parent()),r.after(i[0]),$("input[id='rest3']").click()}else alert("评论失败,请再试一次吧~")},error:function(){alert("编辑失败")}}),!1});var resizeTimer=null;window.onresize=function(){resizeTimer&&clearTimeout(resizeTimer),resizeTimer=setTimeout("cmt_resize()",500)};

在对1.js、2.js、3.js三种不同程度的压缩之后的js对正常功能的影响上做了一下对比,对上述这个简单的js而言,这三个js对正常功能均无影响,放心使用啦。


4.补充


对css file可以采用cssnano

npm install cssnano --save-dev
sudo npm install postcss-cli --global
nano postcss.config.js
    module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
            }),
        ],
    };
postcss input.css > output.css

进行压缩。