`

最小化(minify)js文件

阅读更多

http://developer.yahoo.com/performance/rules.html#minify

中介绍了有两种最小化js文件的工具。

一种是JSMin http://crockford.com/javascript/jsmin
另一种是 YUI Compressor http://developer.yahoo.com/yui/compressor/

1.JSMin使用很简单 它提供一个在MS-Dos下能直接运行的.exe程序 jsmin.exe
 直接运行命令即可:

jsmin jsmin <Ajax.js> ajaxmin.js
  Ajax.js是没有最小化的js文件,当中包含很多空格与换行符
  ajaxmin.js是被jsmin最小化过的文件
2.首先下载最新版的YUI Compressor

我下载的是2.3.6版
 它提供的是Jar架包。
 我们也有两种方法使用它。
 1)如其\doc\README所说的直接用:
  java -jar yuicompressor-x.y.z.jar [options] [input file]
  java -jar yuicom*.jar --type js -o ajaxmin.js Ajax.js
 2)用ant来操作:
  新建一个Java Project :YUI_Compressor
  新建一个build.xml

 

<project name="YUI_Compressor" default="css.minify" basedir="./..">
		<property name="project.dir" value="${basedir}">
		</property>
		<property name="project.src.dir" value="${project.dir}\src">
		</property>
		<!-- 最小化css文件 -->
		<target name="css.minify">
			<java jar="${project.dir}/lib/yuicompressor-2.3.6.jar" fork="true" failonerror="true">
				<arg line="${project.src.dir}/index.css" />
				<arg line="-o ${project.src.dir}/indexmin.css" />
			</java>
		</target>
		
		<!-- 最小化js文件 -->
		<target name="js.minify">
			<java jar="${project.dir}/lib/yuicompressor-2.3.6.jar" fork="true" failonerror="true">
				<arg line="${project.src.dir}/Ajax.js" />
				<arg line="-o ${project.src.dir}/ajaxmin.js" />
			</java>
		</target>
		<target name="css.concat">
			<concat destfile="${war.dir}/css/my-concat.css">
				<filelist dir="${war.dir}/css/" files="screen.css, specialA.css, spcialB.css" />
			</concat>
		</target>
		<target name="js.concat">
			<concat destfile="${war.dir}/script/my-concat.js">
				<filelist dir="${war.dir}/script/jquery" files="jquery.js, jqueryPlugins.js" />
				<filelist dir="${war.dir}/script/" files="remote.js, ..., my.js" />
			</concat>
		</target>
	</project>

 运行相应的target即可

 

最后创建出来的文件目录为:
    │  .classpath
    │  .project
    │  list.txt
    │ 
    ├─bin
    │      Ajax.js
    │      ajaxmin.js
    │      build.xml
    │      index.css
    │      indexmin.css
    │      yuicompressor-2.3.6.jar
    │     
    ├─lib
    │      yuicompressor-2.3.6.jar
    │     
    └─src
            Ajax.js
            ajaxmin.js
            build.xml
            index.css
            indexmin.css

 

参考文档:

http://developer.yahoo.com/yui/compressor/

http://www.seamframework.org/Community/SeamPerformanceSomeIdeas

分享到:
评论

相关推荐

    css-minify:vscode扩展以最小化CSS文件

    获取您的css文件并将其最小化。 它不需要任何特殊的配置,也不会弄乱您的css文件。 此测试基于Mocha框架。如何只需按Ctrl|Cmd + F1|F2并输入css minify特征从0值中删除单位。 从0px到0 从任何浮点值中删除0 。 从...

    前端开源库-brunch-js-minify-js-files

    在这个主题中,我们将深入探讨 `brunch-js-minify-js-files`,它是 `brunch` 用于压缩 JavaScript 文件的一个特性。 `brunch` 是一个基于 Node.js 的静态文件构建工具,它支持 CoffeeScript、SASS、LESS 等预处理器...

    前端开源库-lasso-minify-js

    Lasso.js是一个JavaScript模块打包器,而lasso-minify-js是其一个插件,专门用于使用uglifyjs来对JavaScript代码进行最小化(minification)处理。 UglifyJS是一款广泛使用的JavaScript压缩工具,它通过删除不必要的...

    前端开源库-rollup-plugin-minify

    `rollup-plugin-minify` 是一个专门用于这个目的的开源库,它是一个Rollup插件,旨在利用Uglify JS来压缩和最小化由Rollup构建生成的JavaScript代码。Rollup是一款模块打包工具,它以其对ES6模块的高效处理而著名,...

    builder-minify-html:使用最小化来最小化HTML文件

    minify-html Exhibit.js构建器插件使用MinimalHTML文件。 $ npm install -D exhibit-builder-minify-html用法 . use ( 'minify-html' , options )选项所有正常运行。其他选项include (string / array / function)-...

    前端开源库-bundl-minify

    3. 执行:运行打包命令,"bundl-minify"会处理所有的JavaScript文件,并生成一个或多个最小化后的捆绑文件。 4. 部署:将生成的捆绑文件上传至服务器,供浏览器加载。 "bundl-minify-master" 这个文件夹很可能包含...

    css-minify-unminify:用于最小化和最小化给定CSS代码JavaScript项目

    用于最小化和最小化给定CSS代码JavaScript项目。 _我仍在更新此项目,到目前为止可能尚未完成。 ## CSS Unminify ###用法: 从缩小的文件中复制CSS。 将其粘贴到textarea中 点击取消缩小按钮

    前端开源库-cachify-minify

    `cachify-minify` 是一个专门针对前端开发的开源库,其主要功能是实现服务器端的JavaScript文件最小化(minification)和cachify处理。这个模块旨在提高前端应用的性能,通过减少文件大小来加快页面加载速度,并通过...

    前端开源库-brunch-js-minify-js-files.zip

    "brunch-js-minify-js-files.zip"这个压缩包文件涉及的知识点主要集中在前端构建工具Brunch以及JavaScript文件的压缩上。 Brunch是一款高效的前端构建工具,它自动化了许多开发流程,包括源代码编译、模块打包、...

    开源项目-tdewolff-minify.zip

    在HTML方面,Tdewolff-Minify可以去除不必要的空白、换行符和注释,同时优化标签顺序,以达到最小化文件大小的目的。这对于提升网页的首字节时间(Time to First Byte, TTFB)和首屏加载速度至关重要。此外,它还...

    前端开源库-rehype-minify-javascript-script

    它采用了诸如删除不必要的空白、注释、以及对变量和函数名进行混淆等常见压缩策略,以实现代码的最小化。这不仅有助于提升网站性能,也有利于节省用户的流量。 在使用rehype-minify-javascript-script时,首先需要...

    mkdocs-minify-plugin:一个mkdocs插件,可在将页面HTML写入磁盘之前使其最小化

    mkdocs-minify-plugin 一个MkDocs插件,用于在将HTML和/或JS文件写入磁盘之前将其最小化。 HTML缩小是使用完成的。 JS缩小是使用完成的。设置使用pip安装插件: pip install mkdocs-minify-plugin 在mkdocs.yml激活...

    Laravel开发-minify

    在Laravel框架中,"Laravel开发-minify"是一个用于优化前端资源的工具,它主要功能是合并和压缩CSS及JavaScript文件,以提高网站的加载速度和性能。这个工具特别适用于Laravel 4版本,虽然可能不兼容更新的Laravel...

    Go-Minify用Go编写的一个HTML资源缩小器包

    Go-Minify是一个由Go语言编写的高效工具包,专门用于优化和缩小HTML、CSS、...在实际使用中,可以结合其他构建工具如Gulp或Webpack,将Go-Minify集成到自动化构建流程中,确保每次发布都能得到最小化的资源文件。

    express-minify:自动缩小并缓存您的javascript和css文件

    表达缩小自动最小化(和缓存)您JavaScript,CSS和JSON响应。 它还支持LESS / SASS / Stylus / CoffeeScript编译和最小化。安装npm install express-minify基本用法express-minify负责所有响应。 您甚至不需要像其他...

    PHP实例开发源码—JavaScript Minifier(Minify).zip

    JavaScript Minifier的工作原理是通过删除不必要的字符,如空格、换行符和注释,以及对变量名进行混淆,从而实现代码的最小化,降低网络传输的数据量。 这个名为"PHP实例开发源码—JavaScript Minifier(Minify)"的...

    minify:已弃用一个简单的插件,可让您最小化Craft CMS模板中HTML,CSS和JS内联块

    缩小Craft CMS的插件一个简单的插件,可让您最小化Craft CMS模板中HTML,CSS和JS内联块相关: 安装下载并解压缩文件,然后将minify目录放入您的craft/plugins目录中-或-直接在您的craft/plugins文件夹中进行git ...

    javascript-minify-compress:缩小和 gzip Javascript

    “Javascript Minify & Compress (jsmc)” 实时最小化创建和修改的 Javascript 并将其压缩为 gzip 格式。例如,Javascript 编译器。 网页 使用示例 java -jar jsmc.jar –watch js-src:js将“js-src”目录下的“.js...

Global site tag (gtag.js) - Google Analytics