Django 的 js/css 壓縮組件 Django Compressor

為瞭加快網站的加載速度,我們通常要多js和css進行壓縮處理。這些js和css的壓縮工作如果都手動處理,費時費力。

Django Compressor 可以實現js/css的自動壓縮。Django Compressor在易用性方面做的非常好,按照 文檔 做簡單的設置後就可以正常工作。強烈建議大傢去將文檔完整的看一遍(文檔很短)。

使用的時候,隻需要將css/js放到 compress 標簽中 Django Compressor 即可自動進行處理。在debug模式時, Django Compressor 不會對做任何處理。在非debug模式時,Django Compressor會自動對js/css進行壓縮,並將壓縮後的問題輸出到django的 STATIC_ROOT 目錄。所以請務必保證 STATIC_ROOT 目錄進行瞭正確的設置。

{% load compress %}
{% compress <js/css> [<file/inline> [block_name]] %}
<html of inline or linked JS/CSS>
{% endcompress %}

{% compress css %}
<link rel="stylesheet" href="/static/css/one.css" type="text/css" charset="utf-8">
{% endcompress %}

coffeescript、less 支持

在開發階段coffeescript和less可以直接使用js來處理,在正式發佈時處於加載速度的考慮需要預先編譯成js和css。 Django Compressor 提供 COMPRESS_PRECOMPILERS 設置,根據type類型進行預處理。

COMPRESS_PRECOMPILERS = (
    ('text/coffeescript', 'coffee –compile –stdio'),
    ('text/less', 'lessc {infile} {outfile}'),
    ('text/x-sass', 'sass {infile} {outfile}'),
    ('text/x-scss', 'sass –scss {infile} {outfile}'),
)

為可以在開發階段正常使用coffeescript和less,在開發階段需要引入對應的js文件,同時需要在非開發環境自動關閉。遺憾的是Django Compressor並沒有提供相關的設置。為此我寫瞭個在模板中獲取django settings設置的tagget_setting。該tag包含在我的另一個項目 django-helper 中。

 {% get_setting "COMPRESS_ENABLED" "" "COMPRESS_ENABLED" %}
    {% if not COMPRESS_ENABLED %}
    <script src="{{STATIC_URL}}js/coffee-script.js"></script>
    {% endif %}

 

作者:天地一沙鷗

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *