Django Compressor压缩静态文件(js/css)

227次阅读

共计 3903 个字符，预计需要花费 10 分钟才能阅读完成。

网站开发阶段的静态资源文件一般都是未经过压缩合并处理的，这对于访问量巨大的网站来说不仅浪费带宽，而且也会影响网站的访问速度。django-compressor 的作用就是在项目部署的时候对静态文件压缩合并成一个文件。下面先对 settings 配置文件的相关参数简要介绍再讨论 Compressor 的如何使用。如果你对 setting 文件非常了解不妨直接从第二部分开始阅读。

早期的 django 处理静态资源要比较啰嗦，还要配置 urlpatterns，不过自从 django1.6 开始加入了 django.contrib.staticfiles 这个内置 app 后，开发环境下处理静态资源就方便很多。
1. django.contrib.staticfiles是 django 的内置 (build-in)app，用于处理 js，css，images 等静态资源。首先确保这个 app 已经包含在INSTALLED_APPS 中，django1.6 默认是包含在其中的。
2. 指定STATIC_URL，比如：

STATIC_URL = '/static/'

STATIC_URL 是客户端访问静态资源的根路径，比如：模版中定义的资源路径是：

{% load staticfiles %}
<script src="https://www.linuxidc.com/Linux/2015-08/{% static"js/blog.js"%}"></script>

渲染后的效果是：

<script src="https://www.linuxidc.com/static/js/blog.js"></script>

3 默认 django 会从 app 下的 static 子目录下查找静态文件，因此通常情况下你都是将相关静态文件独自放在各自的 app/static 目录下。为什么是这样的呢？django 有个默认的配置项STATICFILES_FINDERS，他的默认值是：

    ("django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder")

从上面我们看到有个叫 AppDirectoriesFinder 的模块，就是负责在 app/static 目录下找静态文件的。至于 FileSystemFinder 我们稍后介绍。
4. 像 jquery，bootstrap 等这样公用的资源文件都是在多个不同的 app 中共用的，如果是放在某个 app 中显得不符 Python 哲学，因此 django 希望提供了公有的目录来放这些文件，需要用的一个配置参数是：STATICFILES_DIRS，比如：

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),
    '/var/www/static/',
)

也就是静态文件可以放在磁盘的任何一个位置都可以(只要有权限访问)，现在应该明白 FileSystemFinder 的作用了吧。就是用来查找定义在 STATICFILES_DIRS 中的静态文件的。

以上是我们在开发环境下对静态资源的处理过程，那么在生产环境下是怎么处理的呢？如果还是这样由 django 自己来处理，那么累死 django 了，对于静态资源直接由 Nginx 这样的代理去处理好了。django.contrib.staticfiles提供非常方便的管理命令用来收集不同目录下的静态资源到一个统一的目录中去。
1. 设置STATIC_ROOT，这个目录就是存放所有静态资源的地方.

    STATIC_ROOT="/var/www/foofish.net/static/"

2 运行 collectstatic 管理命令

    python manage.py collectstatic

这个命令会拷贝所有静态资源到 STATICROOT 目录。
3. 配置一下 nginx，让访问 /static/ 路径的请求直接访问 STATICROOT 就可以了。

     location /static {alias /var/www/foofish.net/static/; # your Django project's static files -       amend as required}

小结
django.contrib.staticfiles 是 django 处理静态文件的内置 app，开发阶段无需对静态资源配置繁琐的 urlpatterns。STATICURL 是客户端访问静态资源的根路径。STATICFILESDIRS 告诉 django 静态资源存放的位置，它由 FileSystemFinder 解析。STATICROOT 是项目部署时所有不同地方的静态资源文件汇总的地方，供 nginx 直接使用。python manage.py collecstatic 命令是收集不同地方的资源文件到 STRTICROOT 下去。

django compressor 的安装配置非常简单，主要步骤：

安装:

pip install django_compressor

配置:

COMPRESS_ENABLED = True

INSTALLED_APPS = (
    # other apps
    "compressor",
)

STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'django.contrib.staticfiles.finders.FileSystemFinder',
'compressor.finders.CompressorFinder',)

默认 Compress 开启与否取决对于 DEBUG，默认是 COMPRESSENABLED 与 DEBUG 的值相反。因为 compress 的功能本身是用在生产环境下项目发布前对静态文件压缩处理的。因此想在开发阶段 (DEBUG=True) 的时候做测试使用，需要手动设置 COMPRESSENABLED=True

使用:

{% load compress %}
#处理 css
{% compress css %}
<link href="https://www.linuxidc.com/Linux/2015-08/{% static"css/bootstrap.min.css"%}" rel="stylesheet">
<link href="https://www.linuxidc.com/Linux/2015-08/{% static"css/blog-home.css"%}" rel="stylesheet">
<link href="https://www.linuxidc.com/Linux/2015-08/{% static"css/github.css"%}" rel="stylesheet">
{% endcompress %}

#处理 js
{% compress js %}
<script src="https://www.linuxidc.com/Linux/2015-08/{% static"js/jquery-1.10.2.js"%}"></script>
<script src="https://www.linuxidc.com/Linux/2015-08/{% static"js/bootstrap.js"%}"></script>
<script src="https://www.linuxidc.com/Linux/2015-08/{% static"js/blog.js"%}"></script>
{% endcompress %}

执行命令：python manage.py compress , 最终文件将合并成:

<link rel="stylesheet" href="https://www.linuxidc.com/static/CACHE/css/f18b10165eed.css" type="text/css">
<script type="text/Javascript" src="https://www.linuxidc.com/static/CACHE/js/9d1f64ba50fc.js"></script>

这两文件在 STATIC_ROOT 目录下面。

Django1.8 返回 json 字符串和接收 post 的 json 字符串内容 http://www.linuxidc.com/Linux/2015-07/120226.htm

如何使用 Docker 组件开发 Django 项目？http://www.linuxidc.com/Linux/2015-07/119961.htm

Ubuntu Server 12.04 安装 Nginx+uWSGI+Django 环境 http://www.linuxidc.com/Linux/2012-05/60639.htm

Django+Nginx+uWSGI 部署 http://www.linuxidc.com/Linux/2013-02/79862.htm

Django 实战教程 http://www.linuxidc.com/Linux/2013-09/90277.htm

Django Python MySQL Linux 开发环境搭建 http://www.linuxidc.com/Linux/2013-09/90638.htm

Django 的详细介绍：请点这里
Django 的下载地址：请点这里

本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-08/121366.htm

正文完

星哥玩云-微信公众号