网站优化更小的静态资源-爱开源

更小的静态资源(js、css、png、gif)，意味着更少的网络传送时间。构建的时候，可以把这些静态资源进行压缩优化(不像gzip/deflate压缩)，使之更小化。有很多相应的开源工具帮助你完成这项工作。

javascript

Google Closure Compiler
UglifyJS
YUI Compressor
ShrinkSafe
其它,比如JSMIN

Node.js、jQuery1.5开始使用UglifyJS，UglifyJS压缩比YUI Compressor更小、比Google Closure Compiler更安全。尽管如此，但UglifyJS需要部署NodeJS环境，所以我们还是选择使用Google Closure Compiler

style(css)

CSSTidy
YUI Compressor
Yslow/Google Page Speed

CSSTidy和YUI Compressor都很棒，我们还是选择老牌的YUI Compressor，因为我们更熟悉它，它也能够满足我们的需求。

png8/gif图片

Optipng
AdvanceCOMP(advpng、advdef)
ImageMagic(mogrify、identify、convert)
Pngcrush
Pngout
gifsicle
jpegtran

任何大一点的网站页面都会使用到不少图片，压缩优化图片很有必要。选择什么样的图片格式，决定了怎么去压缩图片。一般而言，只要是非动画图片，我们推荐png8，即便是颜色很少的小图片(尽管这样的图片gif有更高压缩性，但应该使用css sprites)。Pngout没有开放源码，仅能在Window NT平台使用，所以我们并不考滤使它。Pngcrush虽然很好用，但是optipng、advpng以及advdef结合使用能把图片压缩得更小，所以我们选择optipng、advpng以及advdef压缩优化PNG图片。 Optipng压缩优化图片、而advdef则优化压缩算法。

构建脚本

发布产品的时候，我们希望构建前端资源，包括压缩优化、合并等等。构建应该尽量满足:
1.整个过程是自动的，不需要人工介入
2.所有的操作都是安全的
3.免费的命令行工具

我们这里应用bash写了一个简版的部署脚本，能够简单地应付中小型网站静态资源发布。

#!/bin/sh
#filename:build.sh
IN_FILE="/var/www.imgwell.com/themes/ocean/misc"
OUT_FILE="/var/www.imgwell.com/misc"
EXCLUDE_FILES="jquery.min.js LAB.min.js"
GOOGLE_COMPILER="/opt/build/bin/compiler.jar"
YUI_COMPRESSOR="/opt/build/bin/yuicompressor-2.4.6.jar"
OPTIPNG="/usr/local/bin/optipng -quiet -o3 "
ADVPNG="/usr/local/bin/advpng -q -z -4 "
ADVDEF="/usr/local/bin/advdef -q -z -4 "


function mt_ver_code() {
    local MATRIX="23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz"
    local LENGTH=12
    while [ "${n:=1}" -le "$LENGTH" ]; do
        local PASS="$PASS${MATRIX:$(($RANDOM%${#MATRIX})):1}"
        let n+=1
    done
    echo -n ${PASS}
}

function mt_file_ext() {
    local FILE=`basename -- "$1"`
    echo -n "${FILE##*.}"
}

function mt_file_size() {
    if [ -f "$1" ]; then
        echo -n `ls -l -- "$1" |awk '{print $5}'`
    else
        echo -n 0
    fi
}

function mt_has_exclude() {
    if [ -z "$EXCLUDE_FILES" ]; then
        echo -n 0
        return 0
    fi
    echo "$EXCLUDE_FILES" |grep -q -w -- "${1}"
    if [ $? -eq 0 ]; then
        echo -n "1"
    else
        echo -n "0"
    fi
}

function mt_google_compile() {
    java -jar "$GOOGLE_COMPILER" --js $1 --js_output_file $2
}

function mt_yui_compressor() {
    java -jar "$YUI_COMPRESSOR" $1 -o $2 --charset utf-8
}

function mt_png_opti() {
    [ -f "`echo ${OPTIPNG} |awk '{print $1}'`" ] && ${OPTIPNG} "${1}"
    [ -f "`echo ${ADVPNG} |awk '{print $1}'`" ] && ${ADVPNG} "${1}"
    [ -f "`echo ${ADVDEF} |awk '{print $1}'`" ] && ${ADVDEF} "${1}"
}

function __main__() {
    [ -d "$IN_FILE" ] || exit 1
    local VER_CODE=`mt_ver_code`
    local FILE_STATUS="!"
    mkdir -p "${OUT_FILE}/${VER_CODE}"

    for f in `ls -1 "$IN_FILE"`; do
        if [ -d "${IN_FILE}/${f}" ] ; then
            continue
        fi

        local HAS_EXCLUDE=`mt_has_exclude "${f}"`
        local FILE_SRC_SIZE=`mt_file_size "${IN_FILE}/${f}"`

        if [ "`mt_file_ext "${f}"`" = "js" -a "$HAS_EXCLUDE" = "0" ]; then
            mt_google_compile "${IN_FILE}/${f}" "${OUT_FILE}/${VER_CODE}/${f}"
            FILE_STATUS="G"
        elif [ "`mt_file_ext "${f}"`" = "css" -a "$HAS_EXCLUDE" = "0"  ]; then
            mt_yui_compressor "${IN_FILE}/${f}" "${OUT_FILE}/${VER_CODE}/${f}"
            FILE_STATUS="Y"
        elif [ "`mt_file_ext "${f}"`" = "png" -a "$HAS_EXCLUDE" = "0" ]; then
            cp "${IN_FILE}/${f}" "${OUT_FILE}/${VER_CODE}"
            [ -f "${OUT_FILE}/${VER_CODE}/${f}" ] && {
                mt_png_opti "${OUT_FILE}/${VER_CODE}/${f}"
                FILE_STATUS='O'
            }
        else
            cp "${IN_FILE}/${f}" "${OUT_FILE}/${VER_CODE}"
            if [ $? -eq 0 ]; then
                FILE_STATUS="-"
            else
                FILE_STATUS="D"
            fi
        fi

        local FILE_DST_SIZE=`mt_file_size "${OUT_FILE}/${VER_CODE}/${f}"`
        echo "${FILE_STATUS} ${HAS_EXCLUDE} ${f} ${FILE_SRC_SIZE}/${FILE_DST_SIZE}"
    done
    echo "===========/" $VER_CODE "=========="
}

__main__

执行结果如下

[root@www-avatar misc]# ./build.sh
O 0 6N9FQPpTHCy.png 820/258
Y 0 base.css 40171/35530
O 0 FSEB6oLTK3I.png 10362/10362
– 0 GsNJNwuI-UM.gif 522/522
O 0 heart.png 921/807
O 0 IJYgcESal33.png 5771/5771
O 0 _IKHHfAgFQe.png 2635/2302
G 0 jquery.elastic.js 4988/1665
– 1 jquery.min.js 85260/85260
G 0 jquery.ui.dialog.js 10074/5274
G 0 jquery.ui.pview.js 4565/2878
– 1 LAB.min.js 5537/5537
O 0 lFahQXTaTNO.png 90/90
G 0 mutfa.js 36958/21777
O 0 nCItFQafRu8.png 452/288
O 0 p13yZ069LVL.png 792/219
– 0 plupload.flash.swf 18537/18537
G 0 plupload.full.js 48277/46682
Y 0 position.css 7737/7440
O 0 star.png 3292/283
G 0 stars.js 6333/2622
Y 0 ui_plugin.css 12794/12079
G 0 up.js 6230/3991
– 0 uVR6w3wRHEJ.gif 54/54
O 0 WSQ2wnhSG-F.png 245/229
– 0 _ZWZupdaAgS.gif 827/827
===========/ LruQcmx4Zi84 ==========

总结

1.UglifyJS压缩比YUI Compressor更小，比Google Closure Compiler更安全。不想冒险，还是应该选择UglifyJS。若想最小化，可以选择Google Closure Compiler
2.YUI Compressor压缩css文件。但CSSTidy也很不错
3.optipng -o3 *.png |advpng -z -4 *.png |advdef -z -4 *.png 将最大化压缩优化png图片
4.网页尽量使用png格式图片，并且压缩优化它，使之最优

转载请注明：爱开源 » 网站优化更小的静态资源

网站优化更小的静态资源

javascript

style(css)

png8/gif图片

构建脚本

总结

与本文相关的文章

您必须登录才能发表评论！

javascript

style(css)

png8/gif图片

构建脚本

总结

与本文相关的文章

您必须 登录 才能发表评论！

您必须登录才能发表评论！