Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog

目录

前文列表

用 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

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

  1. 用 Flask 来写个轻博客 (37) — 在 Github 上为第一阶段的版本打 Tag

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 第一阶段结语 打 Tag 前文列表 用 Flask 来写个轻博客 (1 ...

  2. 用 Flask 来写个轻博客 (29) — 使用 Flask-Admin 实现后台管理 SQLAlchemy

    目录 目录 前文列表 扩展阅读 Flask-Admin BaseView 基础管理页面 ModelView 实现效果 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask 来写 ...

  3. 用 Flask 来写个轻博客

    用 Flask 来写个轻博客 用 Flask 来写个轻博客 (1) — 创建项目 用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写个轻博客 (3) — (M)V ...

  4. 用 Flask 来写个轻博客 (36) — 使用 Flask-RESTful 来构建 RESTful API 之五

    目录 目录 前文列表 PUT 请求 DELETE 请求 测试 对一条已经存在的 posts 记录进行 update 操作 删除一条记录 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 ...

  5. 用 Flask 来写个轻博客 (35) — 使用 Flask-RESTful 来构建 RESTful API 之四

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 POST 请求 身份认证 测试 前文列表 用 Flask 来写个轻博客 ...

  6. 用 Flask 来写个轻博客 (34) — 使用 Flask-RESTful 来构建 RESTful API 之三

    目录 目录 前文列表 应用请求中的参数实现 API 分页 测试 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask 来写个轻博客 (2) - Hello World! 用 F ...

  7. 用 Flask 来写个轻博客 (33) — 使用 Flask-RESTful 来构建 RESTful API 之二

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 构建 RESTful Flask API 定义资源路由 格式 ...

  8. 用 Flask 来写个轻博客 (32) — 使用 Flask-RESTful 来构建 RESTful API 之一

    目录 目录 前文列表 扩展阅读 RESTful API REST 原则 无状态原则 面向资源 RESTful API 的优势 REST 约束 前文列表 用 Flask 来写个轻博客 (1) - 创建项 ...

  9. 用 Flask 来写个轻博客 (31) — 使用 Flask-Admin 实现 FileSystem 管理

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 编写 FileSystem Admin 页面 Flask-A ...

随机推荐

  1. Test Case Design Method - OATS

    [转载] OATS:即Orthogonal Array Testing Strategy,正交表测试策略. 1      OATS的概念: 次数(Runs):简单的说,就是次数是多少,就有多少个用例. ...

  2. Java双链表

    一.概述 二.英雄类 class HeroNode { //值域 public int id; public String name; public String nickName; //指针域 pu ...

  3. 8、numpy——数组的迭代

    1.单数组的迭代 NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 1.1 默认迭代顺序 import ...

  4. StackExchange.Redis 使用LuaScript脚本模糊查询hash

    原文:StackExchange.Redis 使用LuaScript脚本模糊查询hash 获取redis连接 public class RedisHelper { private static rea ...

  5. 攻防世界--re1

    练习文件下载:https://www.lanzous.com/i5lufub 1.使用IDA打开,进入main函数. 2.转为C代码 可以看到,输入v9之后,与v5比较,判断我们输入的flag是否正确 ...

  6. React Native实践总结一

    一.React的世界观1.通过改变state来改变视图视图不用考虑如何改变自己,把state画出来即可.2.变量不可变通过创建一个新的state来更改state,使得变更可追踪,不容易因为其他部分修改 ...

  7. eclipse不小心删除文件如何恢复

    转自:https://blog.csdn.net/u012129031/article/details/78791277 1.右键点击java项目工程名,选择restort from history, ...

  8. vue开发 - 根据vue-router的meta动态设置html里title标签内容

    1.路由文件 :router/index.js 添加 meta属性配置: import Vue from 'vue' import Router from 'vue-router' import in ...

  9. android5.1修改系统默认音量

    在做定制需求的时候,需要修改系统通知的声音,将其禁用掉,避免第三方应用发送通知时,声音很大,吓着用户.索性就把通知声音关掉.下面就说说关闭声音的几种方法,以及修改系统默认声音的方法. 1. 直接修改系 ...

  10. 二、jquery Try{}catch(e){}

    一.Try{}catch(e){} try{ $.each($("div"),function(i,item){ if(...){ throw("异常信息"); ...