前端代码优化: 使用YUI Compressor
通过压缩组件,可以显著减少HTTP请求和响应事件。这也是减小页面大小最简单的技术,但也是效果最明显的。
压缩JS,CSS代码有几种常用插件,YUI Compressor是个不错的选择。通过maven的YUI Compressor plugin可以方便的压缩项目中的前端代码。最简单便是将所有的文件一一压缩,看下pom.xml的配置:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>KUI_demo</groupId> <artifactId>KUI_demo</artifactId> <version>1.0</version> <packaging>jar</packaging> <build> <plugins> <plugin> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId> <version>1.3.0</version> <executions> <execution> <!-- YUI Compressor has two goals: compress and jslint --> <goals> <goal>compress</goal> </goals> </execution> </executions> <configuration> <failOnWarning>false</failOnWarning> <!-- Break contiguous output at this column number. --> <!-- If this is zero, you will get line breaks after every line in the aggregated file. --> <linebreakpos>-1</linebreakpos> <!-- Set your own suffix. [default: "-min"]--> <nosuffix>true</nosuffix> </configuration> </plugin> </plugins> <resources> <resource> <directory>${basedir}/webapp</directory> <includes> <include>**/*.js</include> <include>**/*.css</include> </includes> </resource> </resources> </build> </project>
更进一步,将所有文件合并到同一个文件,可以减少HTTP请求。由于项目开发阶段并不会压缩所有代码,因此,可以采取通过一个JS引进所有其他文件。后期压缩的时候,将所有代码压缩进该文件。
看看复杂一点的需求:
- 先压缩文件,并排除部分已压缩的文件。
- 合并已压缩文件,并排除部分不需要合并的文件。
- 将压缩好的文件放到指定文件夹。
先看看合并的基本配置:
<project> ... <build> <plugins> ... <plugin> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId> <executions> <execution> <goals> <goal>compress</goal> </goals> </execution> </executions> <configuration> <nosuffix>true</nosuffix> <aggregations> <aggregation> <!-- remove files after aggregation (default: false) <removeIncluded>true</removeIncluded> --> <!-- insert new line after each concatenation (default: false) --> <insertNewLine>true</insertNewLine> <output>${project.build.directory}/${project.build.finalName}/static/all.js</output> <!-- files to include, path relative to output's directory or absolute path--> <!--inputDir>base directory for non absolute includes, default to parent dir of output</inputDir--> <includes> <include>${basedir}/src/licenses/license.js</include> <include>**/*.js</include> </includes> <!-- files to exclude, path relative to output's directory <excludes> <exclude>**/*.pack.js</exclude> <exclude>**/compressed.css</exclude> </excludes> --> </aggregation> </aggregations> </configuration> </plugin> ... </plugins> </build> ... </project>
注意aggregation的inputDir非常重要,它默认为outputDir的上一层。并且aggregation的动作是在yuicompression之后的。因此,上面的配置实际上是先将代码压缩到${project.build.directory}/${project.build.finalName}目录下再进行aggregation。
<configuration> <!-- exclude file witch not need to compress --> <excludes> <exclude>**/*.min.js</exclude> <exclude>**/KUI.js</exclude> </excludes> <includes> <include>**/*.js</include> <include>**/*.css</include> </includes> <linebreakpos>-1</linebreakpos> <nosuffix>false</nosuffix> <suffix>.min</suffix> <preProcessAggregates>false</preProcessAggregates> <preserveAllSemicolons>true</preserveAllSemicolons> <failOnWarning>false</failOnWarning> <aggregations> <!-- JS concatenation --> <aggregation> <inputDir>${project.build.directory}</inputDir> <!-- Insert a new line after each concatenation. --> <insertNewLine>true</insertNewLine> <removeIncluded>false</removeIncluded> <!-- Pathname of final output. --> <output>${basedir}/webapp/KUI.min.js</output> <!-- Files to include, path relative to output directory OR absolute path --> <includes> <inlcude>**/*.min.js</inlcude> </includes> <excludes> <exclude>**/KUI.js</exclude> <exclude>**/KUI.min.js</exclude> </excludes> </aggregation> <!-- CSS concatenation --> <aggregation> <inputDir>${project.build.directory}</inputDir> <!-- Pathname of final output. --> <output>${basedir}/webapp/content.min.css</output> <!-- Files to include, path relative to output directory OR absolute path --> <includes> <include>**/*.min.css</include> </includes> </aggregation> <excludes> <exclude>**/content.min.css</exclude> </excludes> </aggregations> </configuration>
还有一点要注意,如果对象的属性名为Javascript的保留字,并且没有用引号引住属性名,那么在压缩的时候会抛出错误。
var test = { long : “test” // throw error when compress } var test = { “long” : “test” // correct. }
前端代码优化: 使用YUI Compressor的更多相关文章
- YUI Compressor for Sublime text2
YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发. 最近压缩文件,常使用在线压缩的方式来压缩文件,一来多有不便,二来如果没有网络,只能搁置了.本文来描述如何 ...
- GitHub 上一份很受欢迎的前端代码优化指南
http://segmentfault.com/a/1190000002587334?utm_source=weekly&utm_medium=email&utm_campaign=e ...
- C#Css/Js静态文件压缩--Yui.Compressor.Net
一.Asp.Net 自带静态文件压缩工具包 Microsoft.AspNet.Web.Optimization http://www.nuget.org/packages/Microsoft.AspN ...
- YUI Compressor压缩失效的场景-eval和with
一.官方文档的说明 in the face of evil features such as eval or with, the YUI Compressor takes a defensive ap ...
- YUI Compressor
简介 根据雅虎卓越性能团队的说法,40%到60%的雅虎用户拥有空闲缓存体验,所有页面浏览量中约有20%是使用空缓存完成的(请参阅Tenni Theurer在YUIBlog上的这篇文章)有关浏览器缓存使 ...
- YUI Compressor JS和CSS压缩工具使用方式(使用前安装JDK)
压缩测试: 选中 test.js, 执行右键菜单“Process with &YUICompressor”,会生成 test-min.js. 注意事项: 1. 需要安装 JDK >= 1 ...
- 【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS
在开发中编写的js.css发布的时候,往往需要进行压缩,以减少文件大小,减轻服务器的负担.这就得每次发版本的时候,对js.js进行压缩,然后再发布.有没有什么办法,让代码到了服务器上边,它自己进行压缩 ...
- YUI Compressor 压缩 JavaScript 原理-《转载》
YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移除额外的空格 细微优化 标识符替换(Identifier Replacement) YUI Compressor包括 ...
- YUI Compressor是如何压缩JS代码的?
YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移除额外的空格 细微优化 标识符替换(Identifier Replacement) YUI Compressor 包 ...
随机推荐
- Airbnb面试的27个奇葩问题,你 hold 住吗?
Airbnb 目前估值 255 亿美金,排名世界科技公司第三.但如果你想去他家工作,可能首先需要回答一些很棘手的问题. 以下,是 BI 通过 Glassdoor 信息收集到的:曾经历 Airbnb 面 ...
- mac打开.caj格式文件
以为用mac后使用会变得更方便些,写毕设时终于派上用场,可惜啊,mac竟然打不开.caj文件,这意味着什么?相信所有在做毕设的小伙伴们都能懂其中的凄凉.特别是硕士或博士的论文,你得从知网上下上百篇的文 ...
- asp.net读取txt并导入数据库
源地址:http://www.cnblogs.com/hfzsjz/p/3214649.html
- 使用spool导出数据
源地址:http://wallimn.iteye.com/blog/472182 set trimspool on set echo off set feedback off set pagesize ...
- Haproxy安装及配置(转)
1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.t ...
- delphi TServerSocket阻塞线程单元 实例
TServerSocket阻塞线程单元,希望对你有所帮助.需要注意的是:1.如果你使用TServerSocket的stNonBlocking模式,重写TServerClientThread线程时要重载 ...
- [SQL]断开并更改数据库名
EXEC sp_dboption 'my', 'Single User', 'TRUE' EXEC sp_renamedb 'my', 'mycrjtest' EXEC sp_dboption 'my ...
- linux 多网卡 跃点数
centos6.4 配置两块网卡,eth0设置静态IP,8网段,eth1无线配置dhcp,都是开机启动. 但是eth1无线网卡一旦连接至开放网络(需要web登陆),就替换了之前eth0配置的默认网关, ...
- 页面设计--Grid列表
Grid列表控件 功能:主要实现Html Table功能,支持多表头.固定表头.固定列.输出.组合查询.编辑功能 优点:可以快速的通过数据集合生成多表头.多样式的列表.通过简单的拖拉实现多层表头. G ...
- 使用Semaphore控制并发访问
Semaphore,信号量. 用在多线程环境下对共享资源访问的一种协调机制. 当一个线程想要访问共享的资源时,这个线程需要获取Semaphore,如果Semaphore内部计数器的值大于0,Semap ...