Flask-Assets 使用autoprefixer并压缩css/JS文件提高访问速度
扩展阅读
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 方式是不会有的.
而Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。
- 安装 Flask-Assets和Autoprefixer
pip install Flask Flask-Assets cssmin jsmin
pip freeze > requirements.txt
将 Flask-Assets 应用到项目中
- 初始化 assets 对象, 并创建打包对象
vim assets.py
from flask import Flask
from flask_assets import Environment, Bundleapp = Flask(__name__)# Flask-Assets's config
# Can not compress the CSS/JS on Dev environment.
app.config['ASSETS_DEBUG'] = True#### Create the Flask-Assets's instance
assets_env = Environment(app)# Define the set for js and css file.
css = Bundle('css/test.css','css/test1.css',filters='cssmin',output='assets/css/common.css')js = Bundle('js/test.js',filters='jsmin',output='assets/js/common.js')# register
assets_env.register('js', js)
assets_env.register('css', css)if __name__ == '__main__':app.run()
NOTE 5: ProdConfig 不需要修改, 默认是自动打包压缩的
- NOTE 1:
Bundel()
的构造器能够接受无限个文件名作为非关键字参数, 定义那些文件需要被打包, 这里主要打包本地 static 下的 CSS 和 JS 两种类型文件.
NOTE 2: 关键字参数filters
定义了这些需要被打包的文件通过那些过滤器(可以为若干个)进行预处理, 这里使用了 cssmin/jsmin 会将 CSS/JS 文件中的空白符和换行符去除.
NOTE 3: 关键字参数output
定义了打包后的包文件的存放路径
NOTE 4: 上述的所有路径的前缀都会默认为./static/
注意: 在开发环境下不应该将 CSS/JS 文件打包, 因为我们可能会经常对这些文件进行修改, 所以需要设定在开发环境中不打包, 但生产环境中会自动进行打包.
使用特殊的 Jinja 控制代码来修改 templates 中的 CSS/JS 引用标签 <link>
或 <script>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Flask Assets GAE Example</title><!-- assets应用 -->{% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}<!-- 常规引用 --><link href="{{ url_for('static', filename='css/test.css') }}" rel="stylesheet"><link href="{{ url_for('static', filename='css/test1.css') }}" rel="stylesheet">
</head>
<body><p id="main-text" class="center">beautiful</p><!-- assets应用 -->{% assets "js" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}<!-- 常规引用 --><script type="text/javascript" src="{{ url_for('static', filename='js/test.js') }}"></script>
</body>
</html>
经过这些处理之后, 如果 templates 文件的 link 或 script 使用的 css/js 文件路径已经被包含在了 Bunble 中, 那么这些原来会被加载到浏览器中 CSS/JS 文件, 将不会再被加载, 取而代之的是被压缩过的 Size 更小的文件.
FLASK_DEBUG=1 python app.py
现在将app.config['ASSETS_DEBUG'] = False,将会直接打包
这里可以看到打包的效果,速度和容量都有优化,特别是多个文件的情况。
将 autoprefixer应用到Flask-Assets中
由于需要使用postcss,用npm或者yarn下载一个
# 由于pip库里没有postcss,自己下一个吧
npm install postcss-cli autoprefixer --save-dev
配置autoprefixer, Flask-assets中已有相关类,直接配置参数就行
AUTOPREFIXER_BIN 是指向postcss运行绝对路径下的bin
AUTOPREFIXER_BROWSERS 是配置浏览器版本的
import os
# get work root
basedir = os.path.abspath(os.path.dirname(__file__))# Flask-Assets's config
# Can not compress the CSS/JS on Dev environment.
app.config['ASSETS_DEBUG'] = True
app.config['AUTOPREFIXER_BIN'] = basedir + '/node_modules/postcss-cli/bin/postcss'
app.config['AUTOPREFIXER_BROWSERS'] = ['> 1%', 'last 2 versions', 'firefox 24', 'opera 12.1']
最后加到flask-assets 就行了
# Define the set for js and css file.
css = Bundle('css/test.css','css/test1.css',filters='autoprefixer6, cssmin',output='assets/css/common.css')
注:autoprefixer >=6 时需要使用autoprefixer6,不然会失败的。
我们可以使用 flask 指令的方式来打包 CSS/JS 文件
(venv) ➜ flask assets clean
Cleaning generated assets...
Deleted asset: assets/js/common.js
Deleted asset: assets/css/common.css(venv) ➜ flask assets build
Building bundle: assets/js/common.js
Building bundle: assets/css/common.css
来查看一下
<!-- 编译前 -->
a {
background : linear-gradient(to top, black, white);
display : flex
}
::placeholder {
color : #ccc
}<!-- 编译后 -->
:-ms-input-placeholder {
color : #ccc
}
::-ms-input-placeholder {
color : #ccc
}
::placeholder {
color : #ccc
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0ZGluIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQTtBQUNBLG1EQUFtRDtBQUNuRCxjQUFjO0NBQ2I7QUFDRDtBQUNBLFlBQVk7Q0FDWDtBQUZEO0FBQ0EsWUFBWTtDQUNYO0FBRkQ7QUFDQSxZQUFZO0NBQ1g7QUFGRDtBQUNBLFlBQVk7Q0FDWCIsImZpbGUiOiJzdGRpbiIsInNvdXJjZXNDb250ZW50IjpbIlxuYSB7XG5iYWNrZ3JvdW5kIDogbGluZWFyLWdyYWRpZW50KHRvIHRvcCwgYmxhY2ssIHdoaXRlKTtcbmRpc3BsYXkgOiBmbGV4XG59XG46OnBsYWNlaG9sZGVyIHtcbmNvbG9yIDogI2NjY1xufSJdfQ== */
- 这样就完成了
- 这样我们就能够通过指令 flask assets --help 来查看其使用方法了:
- 项目地址: https://github.com/Steinkuo/flask-autoprefixer.git
(venv) ➜ flask assets --help
Usage: flask assets [OPTIONS] COMMAND [ARGS]...Web assets commands.Options:--help Show this message and exit.Commands:build Build bundles.clean Clean bundles.watch Watch bundles for file changes.
Flask-Assets 使用autoprefixer并压缩css/JS文件提高访问速度相关推荐
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- 利用html-minifier和uglify-js对前端HTML/CSS/JS文件进行压缩
利用html-minifier和uglify-js对前端HTML/CSS/JS文件进行压缩 前言:最近项目组项目接近完工,因为是个网站改造项目,大多数页面都是静态页面,前端开发并没有使用框架或工程化的 ...
- 在线压缩html/css/js文件成一行
在线压缩html/css/js文件成一行: 压缩网站为:http://tool.oschina.net/jscompress/ 将源码压缩成一行,去掉文中的一些注释和空格以及空行,好处是: 1.减小文 ...
- 怎压缩html文件夹,如何利用koala压缩合并js文件?
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 苏南大叔在很久之前的文章中,曾经向大家介绍过一款很好用的js和css处理工具,叫做koala.据说是国人基于n ...
- 压缩/批量压缩/合并js文件
写在前面 如果文件少的话,直接去网站转化一下就行. http://tool.oschina.net/jscompress?type=3 1.压缩单个js文件 cnpm install uglify-j ...
- js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
- php压缩多个CSS/JS文件
1. 压缩css compress.php <?php header('Content-type: text/css'); ob_start("compress"); fun ...
- Yii --EClientScript 扩展,css,js文件代码压缩合并加载
扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,c ...
- WebStorm学习笔记002---grunt-watch插件的使用-修改html,css,js文件实现自动编译更新
配置css和js文件发生变化就重新合并压缩css和js文件 package.json { "name": "AngularAndRequire", &q ...
最新文章
- 九州云陈沙克:OpenStack的成功源于自身的开放
- linux - python - 异常:error while loading shared libraries
- win11 WSL Ubuntu更换为清华源
- linux 网络命令
- java泛型 算法_非常具体的Java泛型问题 – 如何返回传递给方法的相同类型?
- Java 字符编码与解码
- Python 爬虫---(4) 正则的基本使用
- java递归遍历文件夹_java递归遍历获取目录下所有文件
- php 检查txt中全角大写字母的个数
- linux切换声卡,Ubuntu中双声卡使用实例
- 计算机专业毕业论文写作指导(案例超详解)
- python04-集合与字典
- python- ASCII字符串转为16进制格式
- 管程法解决生产者消费者问题
- 基因芯片与NGS区别[转载]
- 导致堆栈溢出的原因什么?
- Hebutgo 7.21 git使用(alicode)
- kaggle泰坦尼克号_Kaggle基础知识:泰坦尼克号比赛
- 基于Hadoop的高校大数据治理融合系统设计与实现
- autoconf介绍1
热门文章
- VC雕虫小技集(四)
- 浙江大学 工程伦理 第十一章单元测试答案
- lzma java sdk,如何使用LZMA SDK在Java中压缩/解压缩
- 《与大象共舞》读书笔记
- 栈应用 括弧匹配问题 题解(C++)
- 毕业设计实用模型(四)——回归模型的实现(R语言)
- 相片尺寸规格像素一览
- 奇瑞汽车用鸿蒙,奇瑞正式确认:将搭载“华为鸿蒙车机系统”,鸿蒙系统真的要来了...
- springMVC+阿里云API = 实现发送手机验证码短信
- 3、Java 的变量和数据类型