在django中处理和压缩静态文件

最新推荐文章于 2024-02-27 08:24:00 发布

枫华0925

最新推荐文章于 2024-02-27 08:24:00 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： python学习文章标签： django 静态文件优化

本文链接：https://blog.youkuaiyun.com/lizhihua0925/article/details/53897567

python学习专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何通过哈希、缓存及压缩等手段优化Django项目的静态资源，提高网站加载速度与性能。涵盖Hash和Cache静态文件的方法、安装与配置django_compressor插件，以及部署流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常，对于一个页面请求来说，要经过很多步骤，每个步骤都会增加页面加载的负担，为了减少加载的时间和提高性能，通常要对静态文件进行必要的优化。
本文主要以django为基础，介绍django下的基本静态优化和部署方法，包括以下内容
1. Hash静态文件
2. Cache静态文件
3. 压缩静态文件

Hash和Cache静态文件

Django其实自带了Hash和Cache静态文件的功能，在默认情况下没有启动而已，我们对django设置一些参数来实现创建CSS和JS文件的哈希值，这个技术可以在文件发生变化时计算新的Hash值，并更新HTML中的引用，实现用户浏览器自动更新到新的静态文件。
设置方法很简单：

#在设置文件setting.py中加入以下配置

STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.CachedStaticFilesStorage'

当进行部署时，Debug=True，执行python manage.py collectstatic 就会自动在生成hash命名的静态文件在STATIC_ROOT/CACHE/下面

压缩静态文件

# 第一步:安装
pip install django_compressor

# 第二步:设置（setting.py）
# 增加到INSTALLED_APPS 
INSTALLED_APPS = (
    # other apps
    "compressor",
)
# 增加Finders
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # other finders..
    'compressor.finders.CompressorFinder',
)

# 设置默认参数
COMPRESS_ENABLED = True
COMPRESS_OFFLINE = True

# 在模板中使用
{% load staticfiles 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 %}

{% compress js %}
<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 %}

遇到的问题

在使用virtualenv中执行时会报Import compressor模块错误，可能兼容性还有点问题
在实际环境中没有问题

部署

首先，确认在setting.py中加入了STATIC_ROOT并修改DEGUB=False
然后，执行以下命令：

python manage.py collectstatic 
python manage.py compressor

最后使用gunicorn+nginx部署参考：django + gunicorn + nginx 部署