Django Compressor 實現 JS/CSS 自動壓縮合併：配置與進階用法

核心優勢

• 開發模式（DEBUG=True）不處理，直接引用原始檔
• 生產模式自動壓縮、合併、輸出至 STATIC_ROOT
• 支援 CoffeeScript、Less、Sass/SCSS 預編譯

基本使用

{% load compress %}

{% compress css %}


{% endcompress %}

{% compress js %}


{% endcompress %}

關鍵設定

# settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')  # 必須正確設定
COMPRESS_ENABLED = not DEBUG  # 生產環境啟用

# 預編譯器對應
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}'),
)

進階技巧

1. Inline 模式（內聯輸出）

{% compress js inline %}
console.log('inline script');
{% endcompress %}

2. 指定輸出檔名

{% compress css file "theme" %}


{% endcompress %}

3. 離線壓縮（部署時預生成）

python manage.py compress --force

常見坑點

• STATIC_ROOT 未執行 collectstatic 導致 404
• 預編譯器路徑不在 PATH 中
• 模板中路徑必須使用 {% static %} 或絕對路徑