Django Compressor 實戰指南：JS/CSS 自動壓縮、CoffeeScript/Less 預編譯、生產環境部署

為什麼選 Django Compressor？

• **零侵入模板**：僅用 {% compress %} 標籤包裹現有 <link>/<script>。
• **開發/生產自動切換**：DEBUG=True 時原樣輸出，False 時自動合併、壓縮、指紋化、寫入 STATIC_ROOT。
• **預編譯支援**：CoffeeScript、Less、Sass/SCSS 一鍵編譯為 JS/CSS。

快速上手

1. 安裝與配置

pip install django-compressor

# settings.py
INSTALLED_APPS += ['compressor']
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
COMPRESS_ENABLED = not DEBUG  # 生產環境自動啟用
COMPRESS_OFFLINE = True       # 收集靜態文件時預編譯，避免首請求延遲

2. 模板用法

{% load compress %}

{% compress css %}


{% endcompress %}

{% compress js %}


{% endcompress %}

生產環境輸出：

3. 離線壓縮（部署流程必做）

python manage.py collectstatic --noinput
python manage.py compress --force

生成 CACHE 目錄下的壓縮文件與 manifest，Nginx/CDN 直接服務靜態資源，**無需運行時壓縮**。

進階：預編譯器配置

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}'),
)

模板中指定類型：

{% compress css %}

{% endcompress %}

生產環境部署清單

1. DEBUG = False
2. ALLOWED_HOSTS 配置正確
3. 運行 collectstatic + compress
4. Nginx 配置 location /static/ { expires 1y; add_header Cache-Control "public"; }
5. CDN 回源 STATIC_URL，啟用 Gzip/Brotli。

常見坑點