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

前文列表

扩展阅读

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 提升网页加载速度

目录

前文列表

扩展阅读

Flask-Assets

将 Flask-Assets 应用到项目中

相关文章