前端压缩神器

发布时间:

注:以下所有推荐的压缩工具均需使用npm,安装请见“[Node.js](https://nodejs.org/en/)”。 ## CSS与JS压缩 ### [PurifyCSS](https://github.com/purifycss/purifycss):支持压缩及提取只使用到的CSS样式。 根据官方的样例数据:Bootstrap库文件大约140k,页面只使用40%左右的样式,Bootstrap仅进行压缩之后大约117k,使用Purify并压缩之后只有35k。 安装: ```shell $ npm install -g purify-css ``` 使用: ```shell $ purifycss usage: purifycss [option ...] options: --min Minify CSS --out [filepath] Filepath to write purified CSS to --info Logs info on how much CSS was removed --rejected Logs the CSS rules that were removed -h, --help Prints help (this message) and exits ``` 例如: ```shell $ purifycss src/css/main.css src/css/bootstrap.css src/js/main.js --min --info --out src/dist/index.css ``` ### [minifier](https://github.com/fizker/minifier):支持CSS与JS的压缩,能识别各种引用关系。 安装: ```shell $ npm install -g minifier ``` 使用: ```shell $ minify [--output path/to/put/file] path/to/file ``` ## 字体压缩 ### [font-spider(字蛛)](http://font-spider.org/):一个非常好用的中文字体压缩器,可以让网页引入webfont的同时体积不至于太大。 最近的版本会把部分字体的空格映射到感叹号上…很奇怪。我的解决方案是使用[百度字体编辑器](http://font.baidu.com/editor/)把空格对应的字型删除之后覆盖原文件 安装: ```shell $ npm install font-spider -g ``` 使用(共两步): 第一步、在CSS中使用WebFont ```css /*声明 WebFont*/ @font-face { font-family: 'pinghei'; src: url('../font/pinghei.eot'); src: url('../font/pinghei.eot?#font-spider') format('embedded-opentype'), url('../font/pinghei.woff') format('woff'), url('../font/pinghei.ttf') format('truetype'), url('../font/pinghei.svg') format('svg'); font-weight: normal; font-style: normal; } /*使用选择器指定字体*/ .home h1, .demo > .test { font-family: 'pinghei'; } ``` 第二步、运行 ```shell $ font-spider ./demo/*.html ```