用 Django 的 Pipeline 优化网站前端

红薯 发布于 2012/10/24 07:27
阅读 666
收藏 9

本文来自 @图拉鼎博客

今天开始一步步优化网站,尽可能的让其响应更快、更省流量。第一步就是优化前端。

以前在玩Rails的时候,很羡慕它全自动化的Assets Pipeline,完全不用人操心就可以基本达到前端优化效果——甚至你不知道怎么优化也在不知不觉中优化了。

Ubuntu Tweak的网站是我很久以前和朋友一块用Django做的,现在想重写没有那么多精力和时间,我相信适当优化也是可以的。于是就这样给我发现了django-pipeline。一用非常顺手,推荐之。

简单的描述我怎么用吧。

django-pipeline可以基于Django 1.4的staticfiles来使用,会结合的非常好,比如他可以hook进「collectstatic」这个命令中,直接合并且压缩CSS/JS。

同时它的可配置性也非常好,比如默认是YUI的CSS/JS的Compresser,可以改成其他任意自己想要的。

我是这样用的:

怎么安装就不说了,比如我要合并并压缩两个CSS文件,只要在项目的settings.py中加入

PIPELINE_CSS = {
    'utapps': {
        'source_filenames': (
          'css/app-style.css',
          'css/app-sidebar.css',
        ),
        'output_filename': 'css/utapps.css',
    },
}
然后就可以在模板中使用这个动态生成的CSS了,之前在模板引用的代码是:
<link rel="stylesheet" href="{% static "css/app-style.css" %}">
<link rel="stylesheet" href="{% static "css/app-sidebar.css" %}">
现在只需要一句:
{% compressed_css 'utapps' %}

但是在开发环境中,你仍然会看到引用了两个CSS文件,这是正常的,compressed_css这个tag会在是不是DEBUG的情况下判断用怎样静态文件引用。

当你把东西部署到生产环境中,并使用「collectstatic」命令产成新的静态文件后,你就会发现在生产环境中是想这样引用的:

<link href="/static/css/utapps.0e7a8a5ac64a.css" rel="stylesheet" type="text/css" />

这样,可以很明白的看到,django-pipeline不仅合并了CSS文件,进行了压缩(从文件内容可以看出),还进行了版本的控制,这样下次更新CSS/JS等前端静态文件后,不用担心会被缓存影响了。

据我个人的体验来说,它丝毫不比Rails的Assets Pipeline要差,当然设计哲学的不同,导致使用这个需要自已去配置,而不是像Rails一样可以全程自动且安静化。

总之,django-pipeline很不错,其他功能也有待以后去发掘。

PS:我也应用到了你正在访问的本站了,源码见此

加载中
0
qycms_cn
qycms_cn

,tenginx可以了。

为什么不手工合并css呢?

返回顶部
顶部