翼支付门户架构之使用YUI Compressor优化你的网页

使用YUI Compressor优化你的网页

YUI Compressor是做什么的？

这个小工具主要是用来压缩CSS和JavaScript文件的，当然你觉得可以混淆这些文件里的代码也是可以的，不过我们使用它还是看中其压缩优化的功能。

为什么要优化？

因为这样可以减少网页传输中不必要的字节数，节省带宽，加快页面的访问速度。

使用YUI Compressor的好处？

方便快捷，压缩后的代码文件体积小，有效率高，当然市面上不乏有很多压缩工具，但是很多工具尤其在处理一些大型脚本后往往导致脚本出错失效，这点我对YUI Compressor很放心，毕竟有雅虎这个大公司的技术支持，至少我用到现在没有压坏一个脚本。

如何获取YUI Compressor？

下载地址：https://github.com/yui/yuicompressor/downloads

项目主页：http://yui.github.io/yuicompressor/

但是有些朋友下载下来可能会有些小小的失望，为什么呢？因为这个工具是用Java编写的，也就是说在使用这个工具生效前还必须安装Java的运行环境。

如何使用？

将下载到的YUI Compressor包中的yuicompressor.jar拷贝到指定的目录下。然后通过下面的命令行进行相关操作。

压缩优化JavaScript

java -jar yuicompressor.jar --charset utf-8 D:\myfile.js -o D:\myfile-min.js

压缩优化 CSS

java -jar yuicompressor.jar --charset utf-8 D:\myfile.css -o D:\myfile-min.css

--charset指定了压缩文件的编码。

如何使用DOS批处理脚本批量压缩JavaScript和CSS？

通常会把项目用到的js和css按照模块放到专门的目录下。

所以需要建立一个DOS批处理脚本来自动处理目录和子目录下的所有js和css文件。

新建一个批处理文件，例如myCompressor.bat，文件内容如下：

@echo off

::设置YUI Compressor启动目录

SET YUIFOLDER=E:\翼支付重构资料\JS、CSS压缩工具\yuicompressor

::设置你的JS和CSS根目录，脚本会自动按树层次查找和压缩所有的JS和CSS

SET JSFOLDER=E:\jsTest

SET CSSFOLDER=E:\jsTest

echo 正在查找 JavaScript ...

chdir /d %JSFOLDER%

for /r . %%a in (*.js) do (

@echo 正在压缩 %%~a ...

@java -jar %YUIFOLDER%\yuicompressor.jar --charset UTF-8 %%~fa -o %%~na.min.js

)

echo 正在查找 CSS ...

chdir /d %CSSFOLDER%

for /r . %%a in (*.css) do (

@echo 正在压缩 %%~a ...

@java -jar %YUIFOLDER%\yuicompressor.jar --charset UTF-8 %%~fa -o %%~na.min.css

)

echo 完成!

pause & exit

翼支付门户架构之使用YUI Compressor优化你的网页相关推荐

翼支付门户架构之Spring Security框架介绍
Spring Security3,其前身是"spring的acegi安全系统". 先来谈一谈Acegi的基础知识,Acegi的架构比较复杂.如果对Web资源进行保护,最好的办法莫过 ...
翼支付门户架构之redis安装
一.下载redis 本次部署测试采用的redis版本是redis-2.8.19.tar.gz; 二.安装redis 下载后解压 tar -zxvf redis-2.8.19.tar.gz到任意目录,例 ...
翼支付门户架构之redis之RDB和AOF
Redis 持久化: 提供了多种不同级别的持久化方式:一种是RDB,另一种是AOF. RDB 持久化可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AO ...
翼支付门户架构之搭建spring+springmvc+springsecurity框架
1.项目结构如下: 2.pom文件的依赖配置如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= ...
打造运维大脑：翼支付高速发展背后，甜橙金融的云化智能演进
本文是依据张小虎老师在"数据技术嘉年华"大会演讲整理而来. (本文 PPT下载,关注公众号回复:2018DTC ,张小虎老师的PPT位于分会场7模块下. 云计算如何改变金融行业? ...
解密支付系统，来看如何构建理想的支付系统架构
货币是人类发展史上一个极为重要的角色,它不仅是市场上物品交换的媒介,更是人类文明发展史上里程碑式的代表物. 几千年前人类在贸易市场上使用实物交换,可以想象一下我们的祖先进行市场贸易:一个人手上有羊奶, ...
启赟金融 CTO 马连浩：跨境支付系统架构
10年支付行业老兵 \\ 马连浩, EGO 上海分会会员.启赟金融的技术合伙人\u0026amp; CTO. \\ 我在 2017 年加入启赟金融(以下简称"iPayLinks") ...
又一数据挖掘赛事，在校生专属，翼支付杯来了（直通实习机会）
Datawhale 主办方:中国电信-翼支付,数据挖掘赛事为了积极研究探索"金融科技FinTech"技术并努力应用到实际业务中,挖掘更多金融科技在实际普惠金融业务的应用方案.由翼 ...
java js css 压缩工具_javascript和css文件的压缩(YUI Compressor)
为什么要压缩? 现在的Web项目总是离不开大量JavaScript和CSS,而文件的体积也越来越大,也越来越影响页面的感知性能(Perceived Performance). YUI Compress ...

翼支付门户架构之使用YUI Compressor优化你的网页

翼支付门户架构之使用YUI Compressor优化你的网页相关推荐

最新文章

热门文章