前端开发--优化工具

简介: 文章转自:hikejun.com/blog/?p=478   一般来讲优化前端,涉及到文件优化的有合并、压缩JS和CSS,以及对图片的优化处理,这篇文章的工具很不错,强烈推荐一下。   整理一下我现在用的命令行工具。

文章转自:hikejun.com/blog/?p=478

 

一般来讲优化前端,涉及到文件优化的有合并、压缩JS和CSS,以及对图片的优化处理,这篇文章的工具很不错,强烈推荐一下。

 

整理一下我现在用的命令行工具。各有优缺点,混搭着用。同时,也可以编进Ant里。

压缩:

YUICompressor
支持JS和CSS
下载:http://yuilibrary.com/downloads/#yuicompressor
文档:http://developer.yahoo.com/yui/compressor/
快速上手:
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

Closure  Compiler
不支持CSS文件压缩
下载:compiler.jar
文档:http://code.google.com/closure/compiler/docs/overview.html
要求:JRE 1.6
快速上手:
java -jar compiler.jar --js myfile.js --js_output_file myfile-min.js
相关介绍:http://hikejun.com/blog/?p=476
支持多个文件合并:
java -jar compiler.jar --js myfile-1.js --js myfile-2.js --js_output_file myfile-min.js

合并:

Combiner
下载:http://github.com/nzakas/combiner/downloads
文档:http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/
快速上手:
java -jar combiner-0.0.1.jar -v -o myfile.js *.js
java -jar combiner-0.0.1.jar -v -o myfile.js myfile-1.js myfile-2.js

图片无损优化:

Smusher
调用smush.it 或 punypng 接口。
文档:http://github.com/grosser/smusher
要求:ruby + rubygems
快速上手:
smusher imgs/*.*
smusher imgs/*.* --service PunyPng

Mac下安装:
第一次安装smusher失败,缺东西需要先装xcode(OS安装盘2上有),再装行了。
另注意punypng区分大小写 smusher macosxlogo.png --service PunyPng

dataURI:

CSSEmbed
CSS中的图片转成dataURI。(我不建议所有图片全部dataURI转换)
下载:http://github.com/nzakas/cssembed/downloads/
文档:http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/
快速上手:
java -jar cssembed-x.y.z.jar -o styles_new.css styles.css

dataURI
本地或远程的图片转成dataURI。
下载:http://github.com/nzakas/datauri/downloads/
快速上手:
java -jar datauri-x.y.z.jar -o output.txt image.png

检查工具:

WARI
扫描js/css文件中的冗余,和没用的图片。试了一下没用的css和图片找的比较准,javascript绑定的方法都算没用不准。这东西最大的好处是整站的找 RT @umutm: Web Application Resource Inspector - WARI - http://wari.konem.net/
下载/文档:http://wari.konem.net/
要求:JRE 1.6
快速上手:java -jar ~/Library/wari/wari.jar 弹出一个图形化界面。其实这不算命令行工具,这工具还是有点用的

Rhino +  JSLint
Javascript/html代码品质检查工具。
介绍:http://www.JSLint.com/rhino/index.html
用法:java -jar rhino/js.jar rhino/fulljslint.js my_js_file.js

JRE 1.6 (Soylatte16-1.0.2 ) :  http://hikejun.com/download/soylatte16-i386-1.0.2.tar.bz2

目录
相关文章
|
1月前
|
前端开发 JavaScript UED
优化前端性能的关键技巧
在当今数字化时代,网站和应用程序的性能对用户体验至关重要。本文将介绍一些优化前端性能的关键技巧,包括减少HTTP请求、使用CDN加速、精简代码等方面的实用建议,帮助开发者提升前端性能,提供更流畅的用户体验。
|
1月前
|
缓存 前端开发 JavaScript
揭秘前端性能优化:从代码到用户体验的全面升级
揭秘前端性能优化:从代码到用户体验的全面升级
19 0
|
1月前
|
Web App开发 缓存 前端开发
前端性能优化方案有哪些?
前端性能优化方案有哪些?
69 1
|
1月前
|
前端开发 JavaScript UED
使用React Hooks优化前端应用性能
本文将深入探讨如何使用React Hooks来优化前端应用的性能,重点介绍Hooks在状态管理、副作用处理和组件逻辑复用方面的应用。通过本文的指导,读者将了解到如何利用React Hooks提升前端应用的响应速度和用户体验。
|
2月前
|
人工智能 JSON 前端开发
有关D2C工具的思考和分享, 提升前端研发效率
有关D2C工具的思考和分享, 提升前端研发效率
46 1
|
2月前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
2月前
|
缓存 前端开发 JavaScript
如何优化前端性能提升用户体验
在Web应用中,前端性能是影响用户体验和转化率的关键因素之一。本文将介绍一些优化前端性能的方法,包括减少HTTP请求、使用缓存、压缩代码等。
|
1天前
|
缓存 前端开发 UED
优化前端性能的六大技巧
在当今互联网高速发展的时代,优化前端性能是每个开发者都必须重视的任务。本文将介绍六大实用的技巧,帮助开发者提升前端应用的性能,提升用户体验。
|
2天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
5天前
|
机器学习/深度学习 前端开发 算法
使用机器学习优化前端用户体验
在当今高度竞争的互联网市场中,用户体验是至关重要的。本文将探讨如何利用机器学习技术来优化前端用户体验,从而提高用户满意度和留存率。我们将介绍如何利用机器学习算法分析用户行为数据,优化网站性能和内容推荐,以及如何实时调整界面设计和交互方式,从而实现个性化、智能化的用户体验。