前端开发--优化工具

简介: 文章转自: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

目录
相关文章
|
8月前
|
运维 前端开发 JavaScript
前端埋点校验工具:数据驱动的最后一道防线
数据埋点是企业决策的关键基础,但常面临覆盖率低、数据不准和故障难排查三大难题。本文深入剖析了这些问题的成因与影响,并提出“三维校验矩阵”解决方案:提升覆盖率至99.8%、降低错误率至0.3%、提速故障定位5倍。同时对比Split.io、Tealium、Sentry、板栗看板等工具优劣,为企业选型提供参考。迈向高质量数据治理,从精准埋点开始。
|
9月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
1233 80
|
6月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
289 5
|
9月前
|
缓存 监控 前端开发
前端性能优化:现代框架的关键策略
前端性能优化:现代框架的关键策略
447 74
|
缓存 前端开发 UED
如何优化前端性能以提高加载速度
前端性能优化对提升网站加载速度至关重要,直接影响用户体验、SEO排名和转化率。本文介绍了优化前端加载速度的关键技巧,包括最小化HTTP请求、使用CDN、优化图片、利用浏览器缓存、压缩文件和实现懒加载。通过这些方法,可以显著减少页面加载时间,提高网站的整体性能和用户满意度。
|
9月前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅的用户体验
前端性能优化:打造流畅的用户体验
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
2609 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
423 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
12月前
|
JSON 人工智能 前端开发
前端开发中使用whistle代理工具
Whistle是一款强大的代理工具,相比Charles、Fiddler更轻量且功能丰富。它适用于前端开发中的多种场景,如接口数据Mock、接口代理、静态资源代理等。通过简单的规则配置,可将接口指向本地JSON文件,解决跨域问题,或代理静态资源以满足特定域名访问需求。此外,Whistle还支持本地端口间转发与移动端请求抓包,搭配SwitchyOmega插件使用效果更佳。需注意,使用前请确保已安装Node环境并参考官方文档完成基础配置。

热门文章

最新文章