当前位置: 首页 > news >正文

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

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

网站开发阶段静态资源文件一般都是未经过压缩合并处理的,这对于访问量巨大的网站来说不仅浪费带宽,而且也会影响网站的访问速度。django-compressor的作用就是在项目部署的时候对静态文件压缩合并成一个文件。

下面先对settings配置文件的相关参数简要介绍再讨论Compressor的如何使用。如果你对setting文件非常了解不妨直接从第二部分开始阅读。

###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="{% static "js/blog.js" %}"></script>
    

    渲染后的效果是:

     <script src="/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
    

    这个命令会拷贝所有静态资源到STATIC_ROOT目录。

  3. 配置一下nginx,让访问/static/路径的请求直接访问STATIC_ROOT就可以了。

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

###第二部分:compressor
django compressor 的安装配置非常简单,主要步骤:

安装:

pip install django_compressor

配置:

COMPRESS_ENABLED = TrueINSTALLED_APPS = (# other apps"compressor",
)STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'django.contrib.staticfiles.finders.FileSystemFinder',
'compressor.finders.CompressorFinder',)

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

使用:

{% load compress %}
#处理css
{% compress css %}
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/blog-home.css" %}" rel="stylesheet">
<link href="{% static "css/github.css" %}" rel="stylesheet">
{% endcompress %}#处理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>

这两文件在STATIC_ROOT目录下面。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 一文打通前端环境搭建
  • 零基础Opencv学习(一)
  • 自主导航的视觉导航机器人:解析ROS、OpenCV、Qt及路径规划算法的创新应用与实践(代码示例)
  • SpringBoot 2 最常用的配置汇总
  • SpringBoot + Vue实现websocket
  • Javascript归纳与总结——this指向及其改变、new关键字与原型链、异步、闭包和函数防抖与节流
  • Python 全栈系列265 使用ORM、Kafka、Apscheduler实现任务的并发处理
  • 基于django的失物招领系统的设计与实现/ 基于Python的失物招领系统的设计与实现/失物招领管理系统
  • Linux随记(十一)
  • Android13系统源码内置App并通过AIDL调用获取内置存储卡的真实大小
  • EmbeddedGUI简介
  • 语音控制开关的语音识别ic芯片方案
  • Linux信号处理机制基础
  • 创新之光闪耀,点赋科技在第十三届创新创业大赛中绽放光彩
  • BaseCTF Week2
  • “大数据应用场景”之隔壁老王(连载四)
  • avalon2.2的VM生成过程
  • django开发-定时任务的使用
  • flutter的key在widget list的作用以及必要性
  • Java教程_软件开发基础
  • leetcode讲解--894. All Possible Full Binary Trees
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • React as a UI Runtime(五、列表)
  • spring boot下thymeleaf全局静态变量配置
  • Vue--数据传输
  • yii2权限控制rbac之rule详细讲解
  • 百度贴吧爬虫node+vue baidu_tieba_crawler
  • 飞驰在Mesos的涡轮引擎上
  • 机器学习中为什么要做归一化normalization
  • 基于HAProxy的高性能缓存服务器nuster
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 区块链共识机制优缺点对比都是什么
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • 找一份好的前端工作,起点很重要
  • AI算硅基生命吗,为什么?
  • 阿里云IoT边缘计算助力企业零改造实现远程运维 ...
  • 数据可视化之下发图实践
  • ​【已解决】npm install​卡主不动的情况
  • ​软考-高级-系统架构设计师教程(清华第2版)【第12章 信息系统架构设计理论与实践(P420~465)-思维导图】​
  • ###C语言程序设计-----C语言学习(6)#
  • #pragma pack(1)
  • #QT(QCharts绘制曲线)
  • (9)STL算法之逆转旋转
  • (C语言)fread与fwrite详解
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (六)Flink 窗口计算
  • (一)VirtualBox安装增强功能
  • (一)WLAN定义和基本架构转
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .NET/C# 编译期间能确定的相同字符串,在运行期间是相同的实例
  • .net6Api后台+uniapp导出Excel
  • .net开发日常笔记(持续更新)