Django Compressor 静态文件加速
2017-11-01 本文已影响48人
Medivh_
更多关注：http://www.mknight.cn/
为了加快网站的加载速度，我们通常要多js和css进行压缩处理。这些js和css的压缩工作如果都手动处理，比如压缩一下。虽然可以用nginx开启压缩，但毕竟合并文件后效果会更好一些。
Django Compressor 可以实现js/css的自动压缩。Django Compressor在易用性方面做的非常好，按照 文档 做简单的设置后就可以正常工作。
安装:
- Install Django Compressor with your favorite Python package manager:
pip install django_compressor
- Add 'compressor' to your INSTALLED_APPS setting:
INSTALLED_APPS = (
# other apps
"compressor",
)
- 如果配置了django的 staticfiles，那就需要添加相应的目录
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'django.contrib.staticfiles.finders.FileSystemFinder',
'compressor.finders.CompressorFinder',)
Django-Compressor开启与否取决于DEBUG参数，默认是COMPRESS_ENABLED与DEBUG的值相反。因为Django-Compressor的功能本身是用在生产环境下项目发布前对静态文件压缩处理的。
因此想在开发阶段(DEBUG=True)的时候做测试使用，需要手动设置COMPRESS_ENABLED=True。但是最新版本要更改为COMPRESS_OFFLINE = True才可以。
使用
{% load compress %}
{% compress <js/css> [<file/inline> [block_name]] %}
<html of inline or linked JS/CSS>
{% endcompress %}
示例：
首先需要在模板文件中添加模板标签 {% load compress %}
处理css
{% load compress %}
{% compress css %}
<link rel="stylesheet" href="/static/css/one.css" type="text/css" charset="utf-8">
<style type="text/css">p { border:5px solid green;}</style>
<link rel="stylesheet" href="/static/css/two.css" type="text/css" charset="utf-8">
{% endcompress %}
返回结果
<link rel="stylesheet" href="/static/CACHE/css/output.f7c661b7a124.css" type="text/css" charset="utf-8">
处理js
{% compress js %}
<script src="{% static "js/jquery-1.10.2.js" %}"></script>
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/blog.js" %}"></script>
{% endcompress %}
执行命令：python manage.py compress ,最终文件将合并成:
<link rel="stylesheet" href="/static/CACHE/css/f18b10165eed.css" type="text/css">
<script type="text/javascript" src="/static/CACHE/js/9d1f64ba50fc.js"></script>
添加inline参数将直接将内容放在呈现的页面上，而不是文件中：
{% compress js inline %}<script src="/static/js/one.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">obj.value = "value";</script>{% endcompress %}
返回结果:
<script type="text/javascript" charset="utf-8">obj = {};obj.value = "value";</script>
使用 block_name 可以改变合并后的文件名
{% compress js file base %}<script src="/static/js/one.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">obj.value = "value";</script>{% endcompress %}
返回结果:
<script type="text/javascript" src="/static/CACHE/js/base.3f33b9146e12.js" charset="utf-8"></script>
每次修改了js、css文件后，都需要重新加载最新的文件到STATIC_ROOT目录下去，因此需要重新运行命令：
python manage.py collectstatic
python manage.py compress
官方文档 http://django-compressor.readthedocs.io/en/latest
更多关注：http://www.mknight.cn/
