用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

简介: 目录目录前文列表扩展阅读Flask-Assets将 Flask-Assets 应用到项目中前文列表用 Flask 来写个轻博客 (1) — 创建项目 用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写...

目录

前文列表

用 Flask 来写个轻博客 (1) — 创建项目
用 Flask 来写个轻博客 (2) — Hello World!
用 Flask 来写个轻博客 (3) — (M)VC_连接 MySQL 和 SQLAlchemy
用 Flask 来写个轻博客 (4) — (M)VC_创建数据模型和表
用 Flask 来写个轻博客 (5) — (M)VC_SQLAlchemy 的 CRUD 详解
用 Flask 来写个轻博客 (6) — (M)VC_models 的关系(one to many)
用 Flask 来写个轻博客 (7) — (M)VC_models 的关系(many to many)
用 Flask 来写个轻博客 (8) — (M)VC_Alembic 管理数据库结构的升级和降级
用 Flask 来写个轻博客 (9) — M(V)C_Jinja 语法基础快速概览
用 Flask 来写个轻博客 (10) — M(V)C_Jinja 常用过滤器与 Flask 特殊变量及方法
用 Flask 来写个轻博客 (11) — M(V)C_创建视图函数
用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板
用 Flask 来写个轻博客 (13) — M(V)C_WTForms 服务端表单检验
用 Flask 来写个轻博客 (14) — M(V)C_实现项目首页的模板
用 Flask 来写个轻博客 (15) — M(V)C_实现博文页面评论表单
用 Flask 来写个轻博客 (16) — MV(C)_Flask Blueprint 蓝图
用 Flask 来写个轻博客 (17) — MV(C)_应用蓝图来重构项目
用 Flask 来写个轻博客 (18) — 使用工厂模式来生成应用对象
用 Flask 来写个轻博客 (19) — 以 Bcrypt 密文存储账户信息与实现用户登陆表单
用 Flask 来写个轻博客 (20) — 实现注册表单与应用 reCAPTCHA 来实现验证码
用 Flask 来写个轻博客 (21) — 结合 reCAPTCHA 验证码实现用户注册与登录
用 Flask 来写个轻博客 (22) — 实现博客文章的添加和编辑页面
用 Flask 来写个轻博客 (23) — 应用 OAuth 来实现 Facebook 第三方登录
用 Flask 来写个轻博客 (24) — 使用 Flask-Login 来保护应用安全
用 Flask 来写个轻博客 (25) — 使用 Flask-Principal 实现角色权限功能
用 Flask 来写个轻博客 (26) — 使用 Flask-Celery-Helper 实现异步任务
用 Flask 来写个轻博客 (27) — 使用 Flask-Cache 实现网页缓存加速

扩展阅读

http://flask-assets.readthedocs.io/en/latest/
Flask-Assets实例学习
Flask-Assets中文参考

Flask-Assets

在访问 Web 应用的时候浏览器会在加载和解析为 HTML 文件之后, 再下载大量的 CSS/JS 文件, 发送了大量的 HTTP 请求. 虽然现在很多浏览器能够支持并行下载, 但也是由限制的, 所以这就成为了网页加载速度的另外一个瓶颈.

Flask-Assets 能够帮助我们将多个 CSS 或 JS 文件合并成为一个大的文件, 并且将这个文件中的空白符和换行符去除, 这样能够让文件的 Size 减少近 30%. 而且 Flask-Assets 还会使用特定的 HTTP Response Header, 让浏览器缓存这些文件, 只有在这些文件的内容被修改时, 才会再次下载, 这个功能一般的 HTTP 方式是不会有的.

  • 安装 Flask-Assets
pip install Flask-Assets, cssmin, jsmin
pip freeze > requirements.txt

将 Flask-Assets 应用到项目中

  • 初始化 assets 对象, 并创建打包对象
    vim jmilkfansblog/extensions.py
from flask_assets import Environment, Bundle


#### Create the Flask-Assets's instance
assets_env = Environment()
# Define the set for js and css file.
main_css = Bundle(
    'css/bootstrap.css',
    'css/bootstrap-theme.css',
    filters='cssmin',
    output='assets/css/common.css')

main_js = Bundle(
    'js/bootstrap.js',
    filters='jsmin',
    output='assets/js/common.js')

NOTE 1: Bundel() 的构造器能够接受无限个文件名作为非关键字参数, 定义那些文件需要被打包, 这里主要打包本地 static 下的 CSS 和 JS 两种类型文件.
NOTE 2: 关键字参数 filters 定义了这些需要被打包的文件通过那些过滤器(可以为若干个)进行预处理, 这里使用了 cssmin/jsmin 会将 CSS/JS 文件中的空白符和换行符去除.
NOTE 3: 关键字参数 output 定义了打包后的包文件的存放路径
NOTE 4: 上述的所有路径的前缀都会默认为 ./static/

  • 将 assets 和包对象注册到 app 对象中
from jmilkfansblog.extensions import assets_env, main_js, main_css

...

def create_app(object_name):
    """Create the app instance via `Factory Method`"""

...

    #### Init the Flask-Assets via app object
    assets_env.init_app(app)
    assets_env.register('main_js', main_js)
    assets_env.register('main_css', main_css)

注意: 在开发环境下不应该将 CSS/JS 文件打包, 因为我们可能会经常对这些文件进行修改, 所以需要设定在开发环境中不打包, 但生产环境中会自动进行打包.

vim jmilkfansblog/config.py

class DevConfig(Config):
    """Development config class."""

    #### Flask-Assets's config
    # Can not compress the CSS/JS on Dev environment.
    ASSETS_DEBUG = True

NOTE 1: ProdConfig 不需要修改, 默认是自动打包压缩的.

  • 使用特殊的 Jinja 控制代码来修改 templates 中的 CSS/JS 引用标签 <link><script>

link Old:

  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">

link New:

  {% assets "main_css" %}
  <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
  {% endassets %}

script Old:

<script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>

script New:

  {% assets "main_js" %}
  <script src="{{ ASSET_URL }}"></script>
  {% endassets %}

经过这些处理之后, 如果 templates 文件的 link 或 script 使用的 css/js 文件路径已经被包含在了 Bunble 中, 那么这些原来会被加载到浏览器中 CSS/JS 文件, 将不会再被加载, 取而代之的是被压缩过的 Size 更小的文件.

  • 我们也可以使用 manager shell 指令的方式来打包 CSS/JS 文件
from flask_assets import ManageAssets
from jmilkfansblog.extensions import assets_env

...

# Pack the static file
manager.add_command('assets', ManageAssets(assets_env))

这样我们就能够通过指令 python manage.py assets -h 来查看其使用方法了:

usage: manage.py assets [-h] [-v] [-q] [--jinja-extension JINJA_EXTENSION]
                        [--parse-templates]
                        {watch,build,clean,check} ...

Manage assets.

positional arguments:
  {watch,build,clean,check}

optional arguments:
  -h, --help            show this help message and exit
  -v                    be verbose
  -q                    be quiet
  --jinja-extension JINJA_EXTENSION
                        specify the glob pattern for Jinja extensions
                        (default: *.html)
  --parse-templates     search project templates to find bundles
相关文章
|
28天前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
28天前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
28天前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
28天前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
28天前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
28天前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
28天前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
28天前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
28天前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习

热门文章

最新文章