本文转自:http://www.neoease.com/minimize-javascript-files-using-ycombo/

前文已介绍过 YCombo 及相关的 CSS 和 JS 合并工具. 合并静态文件, 减少页面请求可以有效提升网页性能, 但手动处理的话工作繁杂易于出错, YCombo 就是为了解决这个问题而诞生的工具. 这不是最先进的解决方案, 但对小型网站来说已是游刃有余了.

少于 10 个经常改动的页面应该可以算是小型网站, 当然, 博客也算是, 这个博客现在就是使用这个工具来辅助开发的. 本文作为延伸, 说说平时我是怎样利用这个工具来完成网页开发的.

拆分 JS 模块

JavaScript 模块化和细分成文件是为了减少代码的复杂度和便于代码复用, 我将网站用到的 JavaScript 代码分类以下几类:

  • 第三方的框架和工具类, 沿用 YUI3 的命名定义, 我称之 Gallery 库, 比如: jQuery, Backbone
  • WordPress 插件中用到的 JS 文件, 有时我们想合并掉这些文件以减少页面请求数量.
  • 可以供第三方使用的组件和工具, 比如: go-top.js, sidebar-follow.js 和 view-history.js.
  • 自己网站上用到的一些共用代码, 比如: NeoEase 所有页面用到的二级菜单 categories.js.
  • 业务 / 页面初始化文件, 这里往往会调用其他一些组件, 还会有一些页面特有的代码. 我觉得 WordPress 这中小网站都不需要区分页面了, 作为一个入口即可.

准备配置文件

模块拆分完成后, 我们可以按照 YCombo 配置文件的方式创建一个后缀名为 .js.seed 的配置文件将 JS 文件组织起来. 我用相对路径的方式, 配置如下:

/* 第三方库 */
// #require "gallery/jquery/jquery.js"
// #require "gallery/jquery/jquery.scrollto.js"
// #require "gallery/jquery/jquery.lazyhover.js"
// #require "gallery/json/json2.js" /* 组件 */
// #require "moudle/scroll-trigger.js"
// #require "moudle/view-history.js"
// #require "moudle/article-history.js"
// #require "moudle/sidebar-follow-jquery.js"
// #require "moudle/go-top.js" /* 插件 */
// #require "plugin/wp-recentcomments/wp-recentcomments-jquery.dev.js" /* 共用代码 */
// #require "common/social.js"
// #require "common/comments.js"
// #require "common/categories.js" /* 页面初始化 */
// #require "biz/domready.js" /* Rating 初始化 */
// #require "common/ratings.js"

合并和调试代码

将配置文件 xxx.js.seed 拖放到 YComboGUI 或者 JCombo 工具内, 即可得到合并后文件 xxx.js. 调试代码的时候, 为了能定位代码出错位置我们只合并不压缩, 所以我会选中 nocompress.

每次修改代码后, 点击 Combo! 重新合并代码和进行调试, 直到开发完成.

压缩和混淆代码

一旦开发完成, 取消选中 nocompress 并再次进行压缩, YCombo 通过 YUI Compressor 对代码进行合并和压缩, 可以减去注释, 额外空格, 一些细微的优化和进行标识符替换.

如果还需要进一步压缩或者混淆代码, 可以使用 Pack 等一些工具再对代码进行处理, 而我会到在线 JavaScript 压缩和混淆工具上进行一次混淆.

后话

使用 YCombo 做 JS 开发, 可以做到将细分在多个文件中的 JavaScript 合并在一起, 从而减少页面请求数量. 开发者每次修改后需要多点一次合并按钮, 但是还算是方便的, 对小型网站来说应该足够了.

哦, 对. YCombo 还可以用来处理 CSS 文件.

[转]使用 YCombo 做 JS /CSS开发 合并 压缩的更多相关文章

  1. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  2. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  3. grunt 压缩js css html 合并等配置与操作详解

    module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...

  4. gulp打包js/css时合并成一个文件时的顺序解决

    1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...

  5. js css优化-- 合并和压缩

    在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...

  6. .Net MVC4笔记之js css引用与压缩

    1.引用时,可以用即可以直接使用“~”来表示根目录. 引入js 引入js 引入css <link href="~/Content/uploadify/uploadify.css&quo ...

  7. ASP.Net MVC(4) 之js css引用与压缩

    资源引用 可以用即可以直接使用“~”来表示根目录. 引入js <script src="~/Areas/OrderManage/JS/Form.js"></scr ...

  8. 使用grunt合并压缩js、css文件

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...

  9. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

随机推荐

  1. 关于Spring注解配置的步骤

    今天分享一下 关于Spring注解配置的流程 1 导包:如下图所示 2 书写User和Car类  代码如下 package cn.lijun.bean; public class Car { priv ...

  2. 【AutoResetEvent】

    AutoResetEvent用于线程间的同步 Test.cs代码: class Test { //构造函数,用一个指示是否将初始状态设置为终止的布尔值初始化该类的新实例. //false:无信号,子线 ...

  3. c#写对象来读取TXT文本文件

    本博文让你知道怎样写对象,怎样读取文本文件,怎样根据实际条件判断与获取需要的文本行.参考下面网友的问题,根据源文来看,有些行输出的格式,需要把“,”替换为空格. 第一行还附加入后面的子行每一行的后面, ...

  4. JavaScript 测试和捕捉(try与catch)

    JavaScript 测试和捕捉 try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try ...

  5. Python3 中类的反射

    1.针对类中方法的反射 # 反射的使用 class Dog(object): def __init__(self,name): self.name = name def eat(self): prin ...

  6. [SinGuLaRiTy] NOIP模拟赛(TSY)-Day 1

    [SinGuLaRiTy-1032] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved.                              ...

  7. [SinGuLaRiTy] 2017-04-08 综合性测试

    [SinGuLaRiTy-1016] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有的题目:Time Limit:1s  |  Me ...

  8. Python第一次写的代码

    #!/bin/bash/env python # -*- coding:utf-8 -*- #function:输出1-10每隔1秒 import time start = 1 flag = True ...

  9. 如何在cuda内核函数中产生随机数(host端调用,device端产生)

    最近,需要在kernel函数中调用浮点型的随机数.于是上网搜了下相关资料,一种方式是自己手动写一个随机数的__device__函数,然后在调用的时候调用这个函数.另一种,原来cuda在toolkit中 ...

  10. 图片压缩工具之grunt-contrib-imagemin

    对页面进行优化时~免不了对使用的图片进行压缩~以便减小我们使用的图片的大小~这样就可以减少用户下载的文件大小,加快页面访问速度.Google Pagespeed最佳实践建议我们用 jpegtran 或 ...