デザイナーができるWebサイト高速化!JavaScript/CSS圧縮ツール厳選10個

    
2013/07/22
    

アイキャッチ-01 Webサイトを……速くしたい……!
それは人類共通の願い。とりわけ自分のWebサイトが重いと気が気じゃありません。今回はデザイナーの方もブラウザで簡単に高速化できるJavaScript/CSSの圧縮ツールをご紹介します。

目次

1.JavaScript/CSS圧縮ツール × 4種
2.JavaScript圧縮ツール × 4種
3.CSS圧縮ツール × 2種

そもそも圧縮って何……?

JavaScript/CSSの圧縮とは、ファイルの容量を小さくすることを意味します。ためしにJavaScriptを圧縮してみましょう。

例として、backbone.jsを圧縮すると以下のように変わります(コメントや改行、余分なスペースが消えていることに注目してください)。


(function(){var root=this;var previousBackbone=root.Backbone;var array=[];var push=array.push;var slice=array.slice;var splice=array.splice;var Backbone;if(typeof exports!=='undefined'){Backbone=exports}else{Backbone=root.Backbone={}}Backbone.VERSION='1.0.0';var _=root._;if(!_&&(typeof require!=='undefined'))_=require('underscore');Backbone.$=root.jQuery||root.Zepto||root.ender||root.$;Backbone.noConflict=function(){root.Backbone=previousBackbone;return this};Backbone.emulateHTTP=false;Backbone.emulateJSON=false;var Events=Backbone.Events={on:function(name,callback,context){if(!eventsApi(this,'on',name,[callback,context])||!callback)return this;this._events||(this._events={});var events=this._events[name]||(this._events[name]=[]);events.push({callback:callback,context:context,ctx:context||this});return this},once:function(name,callback,context){if(!eventsApi(this,'once',name,[callback,context])||!callback)return this;var self=this;var once=_.once(function(){self.off(name,once);callback.apply(this,arguments)});once._callback=callback;return this.on(name,once,context)},off:function(name,callback,context){var retain,ev,events,names,i,l,j,k;if(!this._events||!eventsApi(this,'off',name,[callback,context]))return this;if(!name&&!callback&&!context){this._events={};return this}names=name?[name]:_.keys(this._events);for(i=0,l=names.length;i<l;i++){name=names[i];if(events=this._events[name]){this._events[name]=retain=[];if(callback||context){for(j=0,k=events.length;j<k;j++){ev=events[j];if((callback&&callback!==ev.callback&&callback!==ev.callback._callback)||(context&&context!==ev.context)){retain.push(ev)}}}if(!retain.length)delete this._events[name]}}return this},trigger:function(name){if(!this._events)return this;var args=slice.call(arguments,1);if(!eventsApi(this,'trigger',name,args))return this;var events=this._events[name];var allEvents=this._events.all;if(events)triggerEvents(events,args);if(allEvents)triggerEvents(allEvents,arguments);return this},stopListening:function(obj,name,callback){var listeners=this._listeners;if(!listeners)return this;var deleteListener=!name&&!callback;if(typeof name==='object')callback=this;if(obj)(listeners={})[obj._listenerId]=obj;for(var id in listeners){listeners[id].off(name,callback,this);if(deleteListener)delete this._listeners[id]}return this}};var eventSplitter=/\s+/;var eventsApi=function(obj,action,name,rest){if(!name)return true;if(typeof name==='object'){for(var key in name){obj[action].apply(obj,[key,name[key]].concat(rest))}return false}if(eventSplitter.test(name)){var names=name.split(eventSplitter);for(var i=0,l=names.length;i<l;i++){obj[action].apply(obj,[names[i]].concat(rest))}return false}return true};var triggerEvents=function(events,args){var ev,i=-1,l=events.length,a1=args[0],a2=args[1],a3=args[2];switch(args.length){case 0:while(++i<l)(ev=events[i]).callback.call(ev.ctx);return;case 1:while(++i<l)(ev=events[i]).callback.call(ev.ctx,a1);return;case 2:while(++i<l)(ev=events[i]).callback.call(ev.ctx,a1,a2);return;case 3:while(++i<l)(ev=events[i]).callback.call(ev.ctx,a1,a2,a3);return;default:while(++i<l)(ev=events[i]).callback.apply(ev.ctx,args)}};var listenMethods={listenTo:'on',listenToOnce:'once'};_.each(listenMethods,function(implementation,method){Events[method]=function(obj,name,callback){var listeners=this._listeners||(this._listeners={});var id=obj._listenerId||(obj._listenerId=_.uniqueId('l'));listeners[id]=obj;if(typeof name==='object')callback=this;obj[implementation](name,callback,this);return this}});Events.bind=Events.on;Events.unbind=Events.off;_.extend(Backbone,Events);var Model=Backbone.Model=function(attributes,options){var defaults;var attrs=attributes||{};options||(options={});this.cid=_.uniqueId('c');this.attributes={};_.extend(this,_.pick(options,modelOptions));if(options.parse)attrs=this.parse(attrs,options)||{};if(defaults=_.result(this,'defaults')){attrs=_.defaults({},attrs,defaults)}this.set(attrs,options);this.changed={};this.initialize.apply(this,arguments)};var modelOptions=['url','urlRoot','collection'];_.extend(Model.prototype,Events,{changed:null,validationError:null,idAttribute:'id',initialize:function(){},toJSON:function(options){return _.clone(this.attributes)},sync:function(){return Backbone.sync.apply(this,arguments)},get:function(attr){return this.attributes[attr]},escape:function(attr){return _.escape(this.get(attr))},has:function(attr){return this.get(attr)!=null},set:function(key,val,options){var attr,attrs,unset,changes,silent,changing,prev,current;if(key==null)return this;if(typeof key==='object'){attrs=key;options=val}else{(attrs={})[key]=val}options||(options={});if(!this._validate(attrs,options))return false;unset=options.unset;silent=options.silent;changes=[];changing=this._changing;this._changing=true;if(!changing){this._previousAttributes=_.clone(this.attributes);this.changed={}}current=this.attributes,prev=this._previousAttributes;if(this.idAttribute in attrs)this.id=attrs[this.idAttribute];for(attr in attrs){val=attrs[attr];if(!_.isEqual(current[attr],val))changes.push(attr);if(!_.isEqual(prev[attr],val)){this.changed[attr]=val}else{delete this.changed[attr]}unset?delete current[attr]:current[attr]=val}if(!silent){if(changes.length)this._pending=true;for(var i=0,l=changes.length;i<l;i++){this.trigger('change:'+changes[i],this,current[changes[i]],options)}}if(changing)return this;if(!silent){while(this._pending){this._pending=false;this.trigger('change',this,options)}}this._pending=false;this._changing=false;return this},unset:function(attr,options){return this.set(attr,void 0,_.extend({},options,{unset:true}))},clear:function(options){var attrs={};for(var key in this.attributes)attrs[key]=void 0;return this.set(attrs,_.extend({},options,{unset:true}))},hasChanged:function(attr){if(attr==null)return!_.isEmpty(this.changed);return _.has(this.changed,attr)},changedAttributes:function(diff){if(!diff)return this.hasChanged()?_.clone(this.changed):false;var val,changed=false;var old=this._changing?this._previousAttributes:this.attributes;for(var attr in diff){if(_.isEqual(old[attr],(val=diff[attr])))continue;(changed||(changed={}))[attr]=val}return changed},previous:function(attr){if(attr==null||!this._previousAttributes)return null;return this._previousAttributes[attr]},previousAttributes:function(){return _.clone(this._previousAttributes)},fetch:function(options){options=options?_.clone(options):{};if(options.parse===void 0)options.parse=true;var model=this;var success=options.success;options.success=function(resp){if(!model.set(model.parse(resp,options),options))return false;if(success)success(model,resp,options);model.trigger('sync',model,resp,options)};wrapError(this,options);return this.sync('read',this,options)},save:function(key,val,options){var attrs,method,xhr,attributes=this.attributes;if(key==null||typeof key==='object'){attrs=key;options=val}else{(attrs={})[key]=val}if(attrs&&(!options||!options.wait)&&!this.set(attrs,options))return false;options=_.extend({validate:true},options);if(!this._validate(attrs,options))return false;if(attrs&&options.wait){this.attributes=_.extend({},attributes,attrs)}if(options.parse===void 0)options.parse=true;var model=this;var success=options.success;options.success=function(resp){model.attributes=attributes;var serverAttrs=model.parse(resp,options);if(options.wait)serverAttrs=_.extend(attrs||{},serverAttrs);if(_.isObject(serverAttrs)&&!model.set(serverAttrs,options)){return false}if(success)success(model,resp,options);model.trigger('sync',model,resp,options)};wrapError(this,options);method=this.isNew()?'create':(options.patch?'patch':'update');if(method==='patch')options.attrs=attrs;xhr=this.sync(method,this,options);if(attrs&&options.wait)this.attributes=attributes;return xhr},destroy:function(options){options=options?_.clone(options):{};var model=this;var success=options.success;var destroy=function(){model.trigger('destroy',model,model.collection,options)};options.success=function(resp){if(options.wait||model.isNew())destroy();if(success)success(model,resp,options);if(!model.isNew())model.trigger('sync',model,resp,options)};if(this.isNew()){options.success();return false}wrapError(this,options);var xhr=this.sync('delete',this,options);if(!options.wait)destroy();return xhr},url:function(){var base=_.result(this,'urlRoot')||_.result(this.collection,'url')||urlError();if(this.isNew())return base;return base+(base.charAt(base.length-1)==='/'?'':'/')+encodeURIComponent(this.id)},parse:function(resp,options){return resp},clone:function(){return new this.constructor(this.attributes)},isNew:function(){return this.id==null},isValid:function(options){return this._validate({},_.extend(options||{},{validate:true}))},_validate:function(attrs,options){if(!options.validate||!this.validate)return true;attrs=_.extend({},this.attributes,attrs);var error=this.validationError=this.validate(attrs,options)||null;if(!error)return true;this.trigger('invalid',this,error,_.extend(options||{},{validationError:error}));return false}});var modelMethods=['keys','values','pairs','invert','pick','omit'];_.each(modelMethods,function(method){Model.prototype[method]=function(){var args=slice.call(arguments);args.unshift(this.attributes);return _[method].apply(_,args)}});var Collection=Backbone.Collection=function(models,options){options||(options={});if(options.url)this.url=options.url;if(options.model)this.model=options.model;if(options.comparator!==void 0)this.comparator=options.comparator;this._reset();this.initialize.apply(this,arguments);if(models)this.reset(models,_.extend({silent:true},options))};var setOptions={add:true,remove:true,merge:true};var addOptions={add:true,merge:false,remove:false};_.extend(Collection.prototype,Events,{model:Model,initialize:function(){},toJSON:function(options){return this.map(function(model){return model.toJSON(options)})},sync:function(){return Backbone.sync.apply(this,arguments)},add:function(models,options){return this.set(models,_.defaults(options||{},addOptions))},remove:function(models,options){models=_.isArray(models)?models.slice():[models];options||(options={});var i,l,index,model;for(i=0,l=models.length;i<l;i++){model=this.get(models[i]);if(!model)continue;delete this._byId[model.id];delete this._byId[model.cid];index=this.indexOf(model);this.models.splice(index,1);this.length--;if(!options.silent){options.index=index;model.trigger('remove',model,this,options)}this._removeReference(model)}return this},set:function(models,options){options=_.defaults(options||{},setOptions);if(options.parse)models=this.parse(models,options);if(!_.isArray(models))models=models?[models]:[];var i,l,model,attrs,existing,sort;var at=options.at;var sortable=this.comparator&&(at==null)&&options.sort!==false;var sortAttr=_.isString(this.comparator)?this.comparator:null;var toAdd=[],toRemove=[],modelMap={};for(i=0,l=models.length;i<l;i++){if(!(model=this._prepareModel(models[i],options)))continue;if(existing=this.get(model)){if(options.remove)modelMap[existing.cid]=true;if(options.merge){existing.set(model.attributes,options);if(sortable&&!sort&&existing.hasChanged(sortAttr))sort=true}}else if(options.add){toAdd.push(model);model.on('all',this._onModelEvent,this);this._byId[model.cid]=model;if(model.id!=null)this._byId[model.id]=model}}if(options.remove){for(i=0,l=this.length;i<l;++i){if(!modelMap[(model=this.models[i]).cid])toRemove.push(model)}if(toRemove.length)this.remove(toRemove,options)}if(toAdd.length){if(sortable)sort=true;this.length+=toAdd.length;if(at!=null){splice.apply(this.models,[at,0].concat(toAdd))}else{push.apply(this.models,toAdd)}}if(sort)this.sort({silent:true});if(options.silent)return this;for(i=0,l=toAdd.length;i<l;i++){(model=toAdd[i]).trigger('add',model,this,options)}if(sort)this.trigger('sort',this,options);return this},reset:function(models,options){options||(options={});for(var i=0,l=this.models.length;i<l;i++){this._removeReference(this.models[i])}options.previousModels=this.models;this._reset();this.add(models,_.extend({silent:true},options));if(!options.silent)this.trigger('reset',this,options);return this},push:function(model,options){model=this._prepareModel(model,options);this.add(model,_.extend({at:this.length},options));return model},pop:function(options){var model=this.at(this.length-1);this.remove(model,options);return model},unshift:function(model,options){model=this._prepareModel(model,options);this.add(model,_.extend({at:0},options));return model},shift:function(options){var model=this.at(0);this.remove(model,options);return model},slice:function(begin,end){return this.models.slice(begin,end)},get:function(obj){if(obj==null)return void 0;return this._byId[obj.id!=null?obj.id:obj.cid||obj]},at:function(index){return this.models[index]},where:function(attrs,first){if(_.isEmpty(attrs))return first?void 0:[];return this[first?'find':'filter'](function(model){for(var key in attrs){if(attrs[key]!==model.get(key))return false}return true})},findWhere:function(attrs){return this.where(attrs,true)},sort:function(options){if(!this.comparator)throw new Error('Cannot sort a set without a comparator');options||(options={});if(_.isString(this.comparator)||this.comparator.length===1){this.models=this.sortBy(this.comparator,this)}else{this.models.sort(_.bind(this.comparator,this))}if(!options.silent)this.trigger('sort',this,options);return this},sortedIndex:function(model,value,context){value||(value=this.comparator);var iterator=_.isFunction(value)?value:function(model){return model.get(value)};return _.sortedIndex(this.models,model,iterator,context)},pluck:function(attr){return _.invoke(this.models,'get',attr)},fetch:function(options){options=options?_.clone(options):{};if(options.parse===void 0)options.parse=true;var success=options.success;var collection=this;options.success=function(resp){var method=options.reset?'reset':'set';collection[method](resp,options);if(success)success(collection,resp,options);collection.trigger('sync',collection,resp,options)};wrapError(this,options);return this.sync('read',this,options)},create:function(model,options){options=options?_.clone(options):{};if(!(model=this._prepareModel(model,options)))return false;if(!options.wait)this.add(model,options);var collection=this;var success=options.success;options.success=function(resp){if(options.wait)collection.add(model,options);if(success)success(model,resp,options)};model.save(null,options);return model},parse:function(resp,options){return resp},clone:function(){return new this.constructor(this.models)},_reset:function(){this.length=0;this.models=[];this._byId={}},_prepareModel:function(attrs,options){if(attrs instanceof Model){if(!attrs.collection)attrs.collection=this;return attrs}options||(options={});options.collection=this;var model=new this.model(attrs,options);if(!model._validate(attrs,options)){this.trigger('invalid',this,attrs,options);return false}return model},_removeReference:function(model){if(this===model.collection)delete model.collection;model.off('all',this._onModelEvent,this)},_onModelEvent:function(event,model,collection,options){if((event==='add'||event==='remove')&&collection!==this)return;if(event==='destroy')this.remove(model,options);if(model&&event==='change:'+model.idAttribute){delete this._byId[model.previous(model.idAttribute)];if(model.id!=null)this._byId[model.id]=model}this.trigger.apply(this,arguments)}});var methods=['forEach','each','map','collect','reduce','foldl','inject','reduceRight','foldr','find','detect','filter','select','reject','every','all','some','any','include','contains','invoke','max','min','toArray','size','first','head','take','initial','rest','tail','drop','last','without','indexOf','shuffle','lastIndexOf','isEmpty','chain'];_.each(methods,function(method){Collection.prototype[method]=function(){var args=slice.call(arguments);args.unshift(this.models);return _[method].apply(_,args)}});var attributeMethods=['groupBy','countBy','sortBy'];_.each(attributeMethods,function(method){Collection.prototype[method]=function(value,context){var iterator=_.isFunction(value)?value:function(model){return model.get(value)};return _[method](this.models,iterator,context)}});var View=Backbone.View=function(options){this.cid=_.uniqueId('view');this._configure(options||{});this._ensureElement();this.initialize.apply(this,arguments);this.delegateEvents()};var delegateEventSplitter=/^(\S+)\s*(.*)$/;var viewOptions=['model','collection','el','id','attributes','className','tagName','events'];_.extend(View.prototype,Events,{tagName:'div',$:function(selector){return this.$el.find(selector)},initialize:function(){},render:function(){return this},remove:function(){this.$el.remove();this.stopListening();return this},setElement:function(element,delegate){if(this.$el)this.undelegateEvents();this.$el=element instanceof Backbone.$?element:Backbone.$(element);this.el=this.$el[0];if(delegate!==false)this.delegateEvents();return this},delegateEvents:function(events){if(!(events||(events=_.result(this,'events'))))return this;this.undelegateEvents();for(var key in events){var method=events[key];if(!_.isFunction(method))method=this[events[key]];if(!method)continue;var match=key.match(delegateEventSplitter);var eventName=match[1],selector=match[2];method=_.bind(method,this);eventName+='.delegateEvents'+this.cid;if(selector===''){this.$el.on(eventName,method)}else{this.$el.on(eventName,selector,method)}}return this},undelegateEvents:function(){this.$el.off('.delegateEvents'+this.cid);return this},_configure:function(options){if(this.options)options=_.extend({},_.result(this,'options'),options);_.extend(this,_.pick(options,viewOptions));this.options=options},_ensureElement:function(){if(!this.el){var attrs=_.extend({},_.result(this,'attributes'));if(this.id)attrs.id=_.result(this,'id');if(this.className)attrs['class']=_.result(this,'className');var $el=Backbone.$('<'+_.result(this,'tagName')+'>').attr(attrs);this.setElement($el,false)}else{this.setElement(_.result(this,'el'),false)}}});Backbone.sync=function(method,model,options){var type=methodMap[method];_.defaults(options||(options={}),{emulateHTTP:Backbone.emulateHTTP,emulateJSON:Backbone.emulateJSON});var params={type:type,dataType:'json'};if(!options.url){params.url=_.result(model,'url')||urlError()}if(options.data==null&&model&&(method==='create'||method==='update'||method==='patch')){params.contentType='application/json';params.data=JSON.stringify(options.attrs||model.toJSON(options))}if(options.emulateJSON){params.contentType='application/x-www-form-urlencoded';params.data=params.data?{model:params.data}:{}}if(options.emulateHTTP&&(type==='PUT'||type==='DELETE'||type==='PATCH')){params.type='POST';if(options.emulateJSON)params.data._method=type;var beforeSend=options.beforeSend;options.beforeSend=function(xhr){xhr.setRequestHeader('X-HTTP-Method-Override',type);if(beforeSend)return beforeSend.apply(this,arguments)}}if(params.type!=='GET'&&!options.emulateJSON){params.processData=false}if(params.type==='PATCH'&&window.ActiveXObject&&!(window.external&&window.external.msActiveXFilteringEnabled)){params.xhr=function(){return new ActiveXObject("Microsoft.XMLHTTP")}}var xhr=options.xhr=Backbone.ajax(_.extend(params,options));model.trigger('request',model,xhr,options);return xhr};var methodMap={'create':'POST','update':'PUT','patch':'PATCH','delete':'DELETE','read':'GET'};Backbone.ajax=function(){return Backbone.$.ajax.apply(Backbone.$,arguments)};var Router=Backbone.Router=function(options){options||(options={});if(options.routes)this.routes=options.routes;this._bindRoutes();this.initialize.apply(this,arguments)};var optionalParam=/\((.*?)\)/g;var namedParam=/(\(\?)?:\w+/g;var splatParam=/\*\w+/g;var escapeRegExp=/[\-{}\[\]+?.,\\\^$|#\s]/g;_.extend(Router.prototype,Events,{initialize:function(){},route:function(route,name,callback){if(!_.isRegExp(route))route=this._routeToRegExp(route);if(_.isFunction(name)){callback=name;name=''}if(!callback)callback=this[name];var router=this;Backbone.history.route(route,function(fragment){var args=router._extractParameters(route,fragment);callback&&callback.apply(router,args);router.trigger.apply(router,['route:'+name].concat(args));router.trigger('route',name,args);Backbone.history.trigger('route',router,name,args)});return this},navigate:function(fragment,options){Backbone.history.navigate(fragment,options);return this},_bindRoutes:function(){if(!this.routes)return;this.routes=_.result(this,'routes');var route,routes=_.keys(this.routes);while((route=routes.pop())!=null){this.route(route,this.routes[route])}},_routeToRegExp:function(route){route=route.replace(escapeRegExp,'\\$&').replace(optionalParam,'(?:$1)?').replace(namedParam,function(match,optional){return optional?match:'([^\/]+)'}).replace(splatParam,'(.*?)');return new RegExp('^'+route+'$')},_extractParameters:function(route,fragment){var params=route.exec(fragment).slice(1);return _.map(params,function(param){return param?decodeURIComponent(param):null})}});var History=Backbone.History=function(){this.handlers=[];_.bindAll(this,'checkUrl');if(typeof window!=='undefined'){this.location=window.location;this.history=window.history}};var routeStripper=/^[#\/]|\s+$/g;var rootStripper=/^\/+|\/+$/g;var isExplorer=/msie [\w.]+/;var trailingSlash=/\/$/;History.started=false;_.extend(History.prototype,Events,{interval:50,getHash:function(window){var match=(window||this).location.href.match(/#(.*)$/);return match?match[1]:''},getFragment:function(fragment,forcePushState){if(fragment==null){if(this._hasPushState||!this._wantsHashChange||forcePushState){fragment=this.location.pathname;var root=this.root.replace(trailingSlash,'');if(!fragment.indexOf(root))fragment=fragment.substr(root.length)}else{fragment=this.getHash()}}return fragment.replace(routeStripper,'')},start:function(options){if(History.started)throw new Error("Backbone.history has already been started");History.started=true;this.options=_.extend({},{root:'/'},this.options,options);this.root=this.options.root;this._wantsHashChange=this.options.hashChange!==false;this._wantsPushState=!!this.options.pushState;this._hasPushState=!!(this.options.pushState&&this.history&&this.history.pushState);var fragment=this.getFragment();var docMode=document.documentMode;var oldIE=(isExplorer.exec(navigator.userAgent.toLowerCase())&&(!docMode||docMode<=7));this.root=('/'+this.root+'/').replace(rootStripper,'/');if(oldIE&&this._wantsHashChange){this.iframe=Backbone.$('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;this.navigate(fragment)}if(this._hasPushState){Backbone.$(window).on('popstate',this.checkUrl)}else if(this._wantsHashChange&&('onhashchange'in window)&&!oldIE){Backbone.$(window).on('hashchange',this.checkUrl)}else if(this._wantsHashChange){this._checkUrlInterval=setInterval(this.checkUrl,this.interval)}this.fragment=fragment;var loc=this.location;var atRoot=loc.pathname.replace(/[^\/]$/,'$&/')===this.root;if(this._wantsHashChange&&this._wantsPushState&&!this._hasPushState&&!atRoot){this.fragment=this.getFragment(null,true);this.location.replace(this.root+this.location.search+'#'+this.fragment);return true}else if(this._wantsPushState&&this._hasPushState&&atRoot&&loc.hash){this.fragment=this.getHash().replace(routeStripper,'');this.history.replaceState({},document.title,this.root+this.fragment+loc.search)}if(!this.options.silent)return this.loadUrl()},stop:function(){Backbone.$(window).off('popstate',this.checkUrl).off('hashchange',this.checkUrl);clearInterval(this._checkUrlInterval);History.started=false},route:function(route,callback){this.handlers.unshift({route:route,callback:callback})},checkUrl:function(e){var current=this.getFragment();if(current===this.fragment&&this.iframe){current=this.getFragment(this.getHash(this.iframe))}if(current===this.fragment)return false;if(this.iframe)this.navigate(current);this.loadUrl()||this.loadUrl(this.getHash())},loadUrl:function(fragmentOverride){var fragment=this.fragment=this.getFragment(fragmentOverride);var matched=_.any(this.handlers,function(handler){if(handler.route.test(fragment)){handler.callback(fragment);return true}});return matched},navigate:function(fragment,options){if(!History.started)return false;if(!options||options===true)options={trigger:options};fragment=this.getFragment(fragment||'');if(this.fragment===fragment)return;this.fragment=fragment;var url=this.root+fragment;if(this._hasPushState){this.history[options.replace?'replaceState':'pushState']({},document.title,url)}else if(this._wantsHashChange){this._updateHash(this.location,fragment,options.replace);if(this.iframe&&(fragment!==this.getFragment(this.getHash(this.iframe)))){if(!options.replace)this.iframe.document.open().close();this._updateHash(this.iframe.location,fragment,options.replace)}}else{return this.location.assign(url)}if(options.trigger)this.loadUrl(fragment)},_updateHash:function(location,fragment,replace){if(replace){var href=location.href.replace(/(javascript:|#).*$/,'');location.replace(href+'#'+fragment)}else{location.hash='#'+fragment}}});Backbone.history=new History;var extend=function(protoProps,staticProps){var parent=this;var child;if(protoProps&&_.has(protoProps,'constructor')){child=protoProps.constructor}else{child=function(){return parent.apply(this,arguments)}}_.extend(child,parent,staticProps);var Surrogate=function(){this.constructor=child};Surrogate.prototype=parent.prototype;child.prototype=new Surrogate;if(protoProps)_.extend(child.prototype,protoProps);child.__super__=parent.prototype;return child};Model.extend=Collection.extend=Router.extend=View.extend=History.extend=extend;var urlError=function(){throw new Error('A "url" property or function must be specified');};var wrapError=function(model,options){var error=options.error;options.error=function(resp){if(error)error(model,resp,options);model.trigger('error',model,resp,options)}}}).call(this);


圧縮することで24%ものファイルサイズ削減に成功しました。実行される結果に変わりはありません。

難読化って何……?

難読化とは、人間にとって理解しにくいコードに変換してしまうことです。セキュリティを向上させる目的で使うことが多いのですが、高速化のメリットもあります。

先ほどのJavaScriptですと、たとえばこのようになります。簡単には読むことができません。


eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p}('(9(){8 m=4;8 n=m.2J;8 o=[];8 p=o.1Z;8 q=o.2i;8 r=o.47;8 s;5(1R 46!==\'2U\'){s=46}18{s=m.2J={}}s.5u=\'1.0.0\';8 Y=m.Y;5(!Y&&(1R 43!==\'2U\'))Y=43(\'5s\');s.$=m.5q||m.5o||m.5j||m.$;s.5i=9(){m.2J=n;6 4};s.2w=10;s.28=10;8 t=s.5e={1A:9(a,b,c){5(!v(4,\'1A\',a,[b,c])||!b)6 4;4.1h||(4.1h={});8 d=4.1h[a]||(4.1h[a]=[]);d.1Z({1C:b,3Z:c,25:c||4});6 4},2B:9(a,b,c){5(!v(4,\'2B\',a,[b,c])||!b)6 4;8 d=4;8 e=Y.2B(9(){d.1I(a,e);b.17(4,1c)});e.3Y=b;6 4.1A(a,e,c)},1I:9(a,b,c){8 d,24,23,2x,i,l,j,k;5(!4.1h||!v(4,\'1I\',a,[b,c]))6 4;5(!a&&!b&&!c){4.1h={};6 4}2x=a?[a]:Y.31(4.1h);1b(i=0,l=2x.13;i<l;i++){a=2x[i];5(23=4.1h[a]){4.1h[a]=d=[];5(b||c){1b(j=0,k=23.13;j<k;j++){24=23[j];5((b&&b!==24.1C&&b!==24.1C.3Y)||(c&&c!==24.3Z)){d.1Z(24)}}}5(!d.13)1x 4.1h[a]}}6 4},14:9(a){5(!4.1h)6 4;8 b=q.1P(1c,1);5(!v(4,\'14\',a,b))6 4;8 c=4.1h[a];8 d=4.1h.2E;5(c)w(c,b);5(d)w(d,1c);6 4},3U:9(a,b,c){8 d=4.2N;5(!d)6 4;8 e=!b&&!c;5(1R b===\'2h\')c=4;5(a)(d={})[a.35]=a;1b(8 f 1K d){d[f].1I(b,c,4);5(e)1x 4.2N[f]}6 4}};8 u=/\\s+/;8 v=9(a,b,c,d){5(!c)6 12;5(1R c===\'2h\'){1b(8 e 1K c){a[b].17(a,[e,c[e]].2z(d))}6 10}5(u.3H(c)){8 f=c.4l(u);1b(8 i=0,l=f.13;i<l;i++){a[b].17(a,[f[i]].2z(d))}6 10}6 12};8 w=9(a,b){8 c,i=-1,l=a.13,2D=b[0],3c=b[1],3C=b[2];4j(b.13){2K 0:1U(++i<l)(c=a[i]).1C.1P(c.25);6;2K 1:1U(++i<l)(c=a[i]).1C.1P(c.25,2D);6;2K 2:1U(++i<l)(c=a[i]).1C.1P(c.25,2D,3c);6;2K 3:1U(++i<l)(c=a[i]).1C.1P(c.25,2D,3c,3C);6;5T:1U(++i<l)(c=a[i]).1C.17(c.25,b)}};8 x={5Z:\'1A\',5t:\'2B\'};Y.2g(x,9(f,g){t[g]=9(a,b,c){8 d=4.2N||(4.2N={});8 e=a.35||(a.35=Y.3l(\'l\'));d[e]=a;5(1R b===\'2h\')c=4;a[f](b,c,4);6 4}});t.3k=t.1A;t.5D=t.1I;Y.Z(s,t);8 y=s.5W=9(a,b){8 c;8 d=a||{};b||(b={});4.1J=Y.3l(\'c\');4.16={};Y.Z(4,Y.3e(b,z));5(b.1e)d=4.1e(d,b)||{};5(c=Y.1m(4,\'2d\')){d=Y.2d({},d,c)}4.1o(d,b);4.1n={};4.1Q.17(4,1c)};8 z=[\'1w\',\'3D\',\'1L\'];Y.Z(y.1l,t,{1n:15,3a:15,2p:\'1d\',1Q:9(){},2L:9(a){6 Y.1G(4.16)},1k:9(){6 s.1k.17(4,1c)},1y:9(a){6 4.16[a]},3E:9(a){6 Y.3E(4.1y(a))},2t:9(a){6 4.1y(a)!=15},1o:9(a,b,c){8 d,1s,1X,1Y,1g,2y,33,26;5(a==15)6 4;5(1R a===\'2h\'){1s=a;c=b}18{(1s={})[a]=b}c||(c={});5(!4.2k(1s,c))6 10;1X=c.1X;1g=c.1g;1Y=[];2y=4.2C;4.2C=12;5(!2y){4.27=Y.1G(4.16);4.1n={}}26=4.16,33=4.27;5(4.2p 1K 1s)4.1d=1s[4.2p];1b(d 1K 1s){b=1s[d];5(!Y.32(26[d],b))1Y.1Z(d);5(!Y.32(33[d],b)){4.1n[d]=b}18{1x 4.1n[d]}1X?1x 26[d]:26[d]=b}5(!1g){5(1Y.13)4.2F=12;1b(8 i=0,l=1Y.13;i<l;i++){4.14(\'2Y:\'+1Y[i],4,26[1Y[i]],c)}}5(2y)6 4;5(!1g){1U(4.2F){4.2F=10;4.14(\'2Y\',4,c)}}4.2F=10;4.2C=10;6 4},1X:9(a,b){6 4.1o(a,1T 0,Y.Z({},b,{1X:12}))},57:9(a){8 b={};1b(8 c 1K 4.16)b=1T 0;6 4.1o(b,Y.Z({},a,{1X:12}))},2X:9(a){5(a==15)6!Y.2V(4.1n);6 Y.2t(4.1n,a)},5k:9(a){5(!a)6 4.2X()?Y.1G(4.1n):10;8 b,1n=10;8 c=4.2C?4.27:4.16;1b(8 d 1K a){5(Y.32(c[d],(b=a[d])))2M;(1n||(1n={}))[d]=b}6 1n},45:9(a){5(a==15||!4.27)6 15;6 4.27[a]},5C:9(){6 Y.1G(4.27)},4g:9(b){b=b?Y.1G(b):{};5(b.1e===1T 0)b.1e=12;8 c=4;8 d=b.1t;b.1t=9(a){5(!c.1o(c.1e(a,b),b))6 10;5(d)d(c,a,b);c.14(\'1k\',c,a,b)};W(4,b);6 4.1k(\'2R\',4,b)},3G:9(c,d,e){8 f,2O,2r,16=4.16;5(c==15||1R c===\'2h\'){f=c;e=d}18{(f={})=d}5(f&&(!e||!e.1O)&&!4.1o(f,e))6 10;e=Y.Z({2q:12},e);5(!4.2k(f,e))6 10;5(f&&e.1O){4.16=Y.Z({},16,f)}5(e.1e===1T 0)e.1e=12;8 g=4;8 h=e.1t;e.1t=9(a){g.16=16;8 b=g.1e(a,e);5(e.1O)b=Y.Z(f||{},b);5(Y.5g(b)&&!g.1o(b,e)){6 10}5(h)h(g,a,e);g.14(\'1k\',g,a,e)};W(4,e);2O=4.2a()?\'2I\':(e.2n?\'2n\':\'2Z\');5(2O===\'2n\')e.1s=f;2r=4.1k(2O,4,e);5(f&&e.1O)4.16=16;6 2r},30:9(b){b=b?Y.1G(b):{};8 c=4;8 d=b.1t;8 e=9(){c.14(\'30\',c,c.1L,b)};b.1t=9(a){5(b.1O||c.2a())e();5(d)d(c,a,b);5(!c.2a())c.14(\'1k\',c,a,b)};5(4.2a()){b.1t();6 10}W(4,b);8 f=4.1k(\'1x\',4,b);5(!b.1O)e();6 f},1w:9(){8 a=Y.1m(4,\'3D\')||Y.1m(4.1L,\'1w\')||V();5(4.2a())6 a;6 a+(a.54(a.13-1)===\'/\'?\'\':\'/\')+4V(4.1d)},1e:9(a,b){6 a},1G:9(){6 1D 4.2j(4.16)},2a:9(){6 4.1d==15},4T:9(a){6 4.2k({},Y.Z(a||{},{2q:12}))},2k:9(a,b){5(!b.2q||!4.2q)6 12;a=Y.Z({},4.16,a);8 c=4.3a=4.2q(a,b)||15;5(!c)6 12;4.14(\'4h\',4,c,Y.Z(b||{},{3a:c}));6 10}});8 A=[\'31\',\'4C\',\'4s\',\'4i\',\'3e\',\'67\'];Y.2g(A,9(b){y.1l[b]=9(){8 a=q.1P(1c);a.2P(4.16);6 Y[b].17(Y,a)}});8 B=s.5Y=9(a,b){b||(b={});5(b.1w)4.1w=b.1w;5(b.11)4.11=b.11;5(b.1i!==1T 0)4.1i=b.1i;4.3d();4.1Q.17(4,1c);5(a)4.2m(a,Y.Z({1g:12},b))};8 C={1r:12,1j:12,3g:12};8 D={1r:12,3g:10,1j:10};Y.Z(B.1l,t,{11:y,1Q:9(){},2L:9(b){6 4.3i(9(a){6 a.2L(b)})},1k:9(){6 s.1k.17(4,1c)},1r:9(a,b){6 4.1o(a,Y.2d(b||{},D))},1j:9(a,b){a=Y.3s(a)?a.2i():[a];b||(b={});8 i,l,2l,11;1b(i=0,l=a.13;i<l;i++){11=4.1y(a[i]);5(!11)2M;1x 4.1S[11.1d];1x 4.1S[11.1J];2l=4.3m(11);4.19.47(2l,1);4.13--;5(!b.1g){b.2l=2l;11.14(\'1j\',11,4,b)}4.3o(11)}6 4},1o:9(a,b){b=Y.2d(b||{},C);5(b.1e)a=4.1e(a,b);5(!Y.3s(a))a=a?[a]:[];8 i,l,11,1s,2e,1f;8 c=b.20;8 d=4.1i&&(c==15)&&b.1f!==10;8 e=Y.3P(4.1i)?4.1i:15;8 f=[],2v=[],3p={};1b(i=0,l=a.13;i<l;i++){5(!(11=4.2o(a[i],b)))2M;5(2e=4.1y(11)){5(b.1j)3p[2e.1J]=12;5(b.3g){2e.1o(11.16,b);5(d&&!1f&&2e.2X(e))1f=12}}18 5(b.1r){f.1Z(11);11.1A(\'2E\',4.3n,4);4.1S[11.1J]=11;5(11.1d!=15)4.1S[11.1d]=11}}5(b.1j){1b(i=0,l=4.13;i<l;++i){5(!3p[(11=4.19[i]).1J])2v.1Z(11)}5(2v.13)4.1j(2v,b)}5(f.13){5(d)1f=12;4.13+=f.13;5(c!=15){r.17(4.19,.2z(f))}18{p.17(4.19,f)}}5(1f)4.1f({1g:12});5(b.1g)6 4;1b(i=0,l=f.13;i<l;i++){(11=f[i]).14(\'1r\',11,4,b)}5(1f)4.14(\'1f\',4,b);6 4},2m:9(a,b){b||(b={});1b(8 i=0,l=4.19.13;i<l;i++){4.3o(4.19[i])}b.5R=4.19;4.3d();4.1r(a,Y.Z({1g:12},b));5(!b.1g)4.14(\'2m\',4,b);6 4},1Z:9(a,b){a=4.2o(a,b);4.1r(a,Y.Z({20:4.13},b));6 a},3R:9(a){8 b=4.20(4.13-1);4.1j(b,a);6 b},2P:9(a,b){a=4.2o(a,b);4.1r(a,Y.Z({20:0},b));6 a},5U:9(a){8 b=4.20(0);4.1j(b,a);6 b},2i:9(a,b){6 4.19.2i(a,b)},1y:9(a){5(a==15)6 1T 0;6 4.1S[a.1d!=15?a.1d:a.1J||a]},20:9(a){6 4.19[a]},3r:9(c,d){5(Y.2V(c))6 d?1T 0:[];6 4[d?\'3j\':\'3t\'](9(a){1b(8 b 1K c){5(c[b]!==a.1y(b))6 10}6 12})},4N:9(a){6 4.3r(a,12)},1f:9(a){5(!4.1i)3h 1D 3f(\'5L 1f a 1o 3u a 1i\');a||(a={});5(Y.3P(4.1i)||4.1i.13===1){4.19=4.3v(4.1i,4)}18{4.19.1f(Y.3k(4.1i,4))}5(!a.1g)4.14(\'1f\',4,a);6 4},3w:9(b,c,d){c||(c=4.1i);8 e=Y.2H(c)?c:9(a){6 a.1y(c)};6 Y.3w(4.19,b,e,d)},5X:9(a){6 Y.3x(4.19,\'1y\',a)},4g:9(c){c=c?Y.1G(c):{};5(c.1e===1T 0)c.1e=12;8 d=c.1t;8 e=4;c.1t=9(a){8 b=c.2m?\'2m\':\'1o\';e[b](a,c);5(d)d(e,a,c);e.14(\'1k\',e,a,c)};W(4,c);6 4.1k(\'2R\',4,c)},2I:9(b,c){c=c?Y.1G(c):{};5(!(b=4.2o(b,c)))6 10;5(!c.1O)4.1r(b,c);8 d=4;8 e=c.1t;c.1t=9(a){5(c.1O)d.1r(b,c);5(e)e(b,a,c)};b.3G(15,c);6 b},1e:9(a,b){6 a},1G:9(){6 1D 4.2j(4.19)},3d:9(){4.13=0;4.19=[];4.1S={}},2o:9(a,b){5(a 3y y){5(!a.1L)a.1L=4;6 a}b||(b={});b.1L=4;8 c=1D 4.11(a,b);5(!c.2k(a,b)){4.14(\'4h\',4,a,b);6 10}6 c},3o:9(a){5(4===a.1L)1x a.1L;a.1I(\'2E\',4.3n,4)},3n:9(a,b,c,d){5((a===\'1r\'||a===\'1j\')&&c!==4)6;5(a===\'30\')4.1j(b,d);5(b&&a===\'2Y:\'+b.2p){1x 4.1S[b.45(b.2p)];5(b.1d!=15)4.1S[b.1d]=b}4.14.17(4,1c)}});8 E=[\'4k\',\'2g\',\'3i\',\'4o\',\'4p\',\'4r\',\'4t\',\'4u\',\'4A\',\'3j\',\'4B\',\'3t\',\'4D\',\'4F\',\'4H\',\'2E\',\'4L\',\'3z\',\'4O\',\'4P\',\'3x\',\'4X\',\'4Y\',\'4Z\',\'51\',\'52\',\'53\',\'56\',\'58\',\'59\',\'5a\',\'5c\',\'5l\',\'3u\',\'3m\',\'5n\',\'5p\',\'2V\',\'5r\'];Y.2g(E,9(b){B.1l[b]=9(){8 a=q.1P(1c);a.2P(4.19);6 Y[b].17(Y,a)}});8 F=[\'5v\',\'5w\',\'3v\'];Y.2g(F,9(e){B.1l[e]=9(b,c){8 d=Y.2H(b)?b:9(a){6 a.1y(b)};6 Y[e](4.19,d,c)}});8 G=s.5E=9(a){4.1J=Y.3l(\'5J\');4.3A(a||{});4.3B();4.1Q.17(4,1c);4.2c()};8 H=/^(\\S+)\\s*(.*)$/;8 I=[\'11\',\'1L\',\'1p\',\'1d\',\'16\',\'3b\',\'39\',\'23\'];Y.Z(G.1l,t,{39:\'60\',$:9(a){6 4.$1p.3j(a)},1Q:9(){},63:9(){6 4},1j:9(){4.$1p.1j();4.3U();6 4},38:9(a,b){5(4.$1p)4.37();4.$1p=a 3y s.$?a:s.$(a);4.1p=4.$1p[0];5(b!==10)4.2c();6 4},2c:9(a){5(!(a||(a=Y.1m(4,\'23\'))))6 4;4.37();1b(8 b 1K a){8 c=a[b];5(!Y.2H(c))c=4[a[b]];5(!c)2M;8 d=b.3F(H);8 e=d[1],2Q=d[2];c=Y.3k(c,4);e+=\'.2c\'+4.1J;5(2Q===\'\'){4.$1p.1A(e,c)}18{4.$1p.1A(e,2Q,c)}}6 4},37:9(){4.$1p.1I(\'.2c\'+4.1J);6 4},3A:9(a){5(4.1z)a=Y.Z({},Y.1m(4,\'1z\'),a);Y.Z(4,Y.3e(a,I));4.1z=a},3B:9(){5(!4.1p){8 a=Y.Z({},Y.1m(4,\'16\'));5(4.1d)a.1d=Y.1m(4,\'1d\');5(4.3b)a[\'4m\']=Y.1m(4,\'3b\');8 b=s.$(\'<\'+Y.1m(4,\'39\')+\'>\').4n(a);4.38(b,10)}18{4.38(Y.1m(4,\'1p\'),10)}}});s.1k=9(b,c,d){8 e=J[b];Y.2d(d||(d={}),{2w:s.2w,28:s.28});8 f={2A:e,4q:\'3I\'};5(!d.1w){f.1w=Y.1m(c,\'1w\')||V()}5(d.29==15&&c&&(b===\'2I\'||b===\'2Z\'||b===\'2n\')){f.3J=\'3K/3I\';f.29=4v.4w(d.1s||c.2L(d))}5(d.28){f.3J=\'3K/x-4x-4y-4z\';f.29=f.29?{11:f.29}:{}}5(d.2w&&(e===\'3L\'||e===\'3M\'||e===\'36\')){f.2A=\'3N\';5(d.28)f.29.4E=e;8 g=d.3O;d.3O=9(a){a.4G(\'X-4I-4J-4K\',e);5(g)6 g.17(4,1c)}}5(f.2A!==\'3Q\'&&!d.28){f.4M=10}5(f.2A===\'36\'&&1v.3S&&!(1v.3T&&1v.3T.4Q)){f.2r=9(){6 1D 3S("4R.4S")}}8 h=d.2r=s.34(Y.Z(f,d));c.14(\'4U\',c,h,d);6 h};8 J={\'2I\':\'3N\',\'2Z\':\'3L\',\'2n\':\'36\',\'1x\':\'3M\',\'2R\':\'3Q\'};s.34=9(){6 s.$.34.17(s.$,1c)};8 K=s.4W=9(a){a||(a={});5(a.1u)4.1u=a.1u;4.3V();4.1Q.17(4,1c)};8 L=/\\((.*?)\\)/g;8 M=/(\\(\\?)?:\\w+/g;8 N=/\\*\\w+/g;8 O=/[\\-{}\\[\\]+?.,\\\\\\^$|#\\s]/g;Y.Z(K.1l,t,{1Q:9(){},1H:9(c,d,e){5(!Y.55(c))c=4.3W(c);5(Y.2H(d)){e=d;d=\'\'}5(!e)e=4[d];8 f=4;s.1q.1H(c,9(a){8 b=f.3X(c,a);e&&e.17(f,b);f.14.17(f,[\'1H:\'+d].2z(b));f.14(\'1H\',d,b);s.1q.14(\'1H\',f,d,b)});6 4},2f:9(a,b){s.1q.2f(a,b);6 4},3V:9(){5(!4.1u)6;4.1u=Y.1m(4,\'1u\');8 a,1u=Y.31(4.1u);1U((a=1u.3R())!=15){4.1H(a,4.1u[a])}},3W:9(c){c=c.1a(O,\'\\\\$&\').1a(L,\'(?:$1)?\').1a(M,9(a,b){6 b?a:\'([^\\/]+)\'}).1a(N,\'(.*?)\');6 1D 5b(\'^\'+c+\'$\')},3X:9(b,c){8 d=b.40(c).2i(1);6 Y.3i(d,9(a){6 a?5d(a):15})}});8 P=s.5f=9(){4.2W=[];Y.5h(4,\'1W\');5(1R 1v!==\'2U\'){4.1F=1v.1F;4.1q=1v.1q}};8 Q=/^[#\\/]|\\s+$/g;8 R=/^\\/+|\\/+$/g;8 S=/5m [\\w.]+/;8 T=/\\/$/;P.21=10;Y.Z(P.1l,t,{41:50,2b:9(a){8 b=(a||4).1F.42.3F(/#(.*)$/);6 b?b[1]:\'\'},1N:9(a,b){5(a==15){5(4.22||!4.1V||b){a=4.1F.44;8 c=4.1B.1a(T,\'\');5(!a.3m(c))a=a.5x(c.13)}18{a=4.2b()}}6 a.1a(Q,\'\')},5y:9(a){5(P.21)3h 1D 3f("2J.1q 2t 5z 5A 21");P.21=12;4.1z=Y.Z({},{1B:\'/\'},4.1z,a);4.1B=4.1z.1B;4.1V=4.1z.5B!==10;4.2T=!!4.1z.2u;4.22=!!(4.1z.2u&&4.1q&&4.1q.2u);8 b=4.1N();8 c=2G.5F;8 d=(S.40(5G.5H.5I())&&(!c||c<=7));4.1B=(\'/\'+4.1B+\'/\').1a(R,\'/\');5(d&&4.1V){4.1M=s.$(\'<1M 5K="48:0" 5M="-1" />\').5N().5O(\'5P\')[0].5Q;4.2f(b)}5(4.22){s.$(1v).1A(\'49\',4.1W)}18 5(4.1V&&(\'5S\'1K 1v)&&!d){s.$(1v).1A(\'4a\',4.1W)}18 5(4.1V){4.4b=5V(4.1W,4.41)}4.1E=b;8 e=4.1F;8 f=e.44.1a(/[^\\/]$/,\'$&/\')===4.1B;5(4.1V&&4.2T&&!4.22&&!f){4.1E=4.1N(15,12);4.1F.1a(4.1B+4.1F.4c+\'#\'+4.1E);6 12}18 5(4.2T&&4.22&&f&&e.4d){4.1E=4.2b().1a(Q,\'\');4.1q.4e({},2G.4f,4.1B+4.1E+e.4c)}5(!4.1z.1g)6 4.2s()},61:9(){s.$(1v).1I(\'49\',4.1W).1I(\'4a\',4.1W);62(4.4b);P.21=10},1H:9(a,b){4.2W.2P({1H:a,1C:b})},1W:9(e){8 a=4.1N();5(a===4.1E&&4.1M){a=4.1N(4.2b(4.1M))}5(a===4.1E)6 10;5(4.1M)4.2f(a);4.2s()||4.2s(4.2b())},2s:9(b){8 c=4.1E=4.1N(b);8 d=Y.3z(4.2W,9(a){5(a.1H.3H(c)){a.1C(c);6 12}});6 d},2f:9(a,b){5(!P.21)6 10;5(!b||b===12)b={14:b};a=4.1N(a||\'\');5(4.1E===a)6;4.1E=a;8 c=4.1B+a;5(4.22){4.1q[b.1a?\'4e\':\'2u\']({},2G.4f,c)}18 5(4.1V){4.2S(4.1F,a,b.1a);5(4.1M&&(a!==4.1N(4.2b(4.1M)))){5(!b.1a)4.1M.2G.64().65();4.2S(4.1M.1F,a,b.1a)}}18{6 4.1F.66(c)}5(b.14)4.2s(a)},2S:9(a,b,c){5(c){8 d=a.42.1a(/(48:|#).*$/,\'\');a.1a(d+\'#\'+b)}18{a.4d=\'#\'+b}}});s.1q=1D P;8 U=9(a,b){8 c=4;8 d;5(a&&Y.2t(a,\'2j\')){d=a.2j}18{d=9(){6 c.17(4,1c)}}Y.Z(d,c,b);8 e=9(){4.2j=d};e.1l=c.1l;d.1l=1D e;5(a)Y.Z(d.1l,a);d.68=c.1l;6 d};y.Z=B.Z=K.Z=G.Z=P.Z=U;8 V=9(){3h 1D 3f(\'A "1w" 69 6a 9 6b 6c 6d\');};8 W=9(b,c){8 d=c.3q;c.3q=9(a){5(d)d(b,a,c);b.14(\'3q\',b,a,c)}}}).1P(4);',62,386,'||||this|if|return||var|function|||||||||||||||||||||||||||||||||||||||||||||||||||_|extend|false|model|true|length|trigger|null|attributes|apply|else|models|replace|for|arguments|id|parse|sort|silent|_events|comparator|remove|sync|prototype|result|changed|set|el|history|add|attrs|success|routes|window|url|delete|get|options|on|root|callback|new|fragment|location|clone|route|off|cid|in|collection|iframe|getFragment|wait|call|initialize|typeof|_byId|void|while|_wantsHashChange|checkUrl|unset|changes|push|at|started|_hasPushState|events|ev|ctx|current|_previousAttributes|emulateJSON|data|isNew|getHash|delegateEvents|defaults|existing|navigate|each|object|slice|constructor|_validate|index|reset|patch|_prepareModel|idAttribute|validate|xhr|loadUrl|has|pushState|toRemove|emulateHTTP|names|changing|concat|type|once|_changing|a1|all|_pending|document|isFunction|create|Backbone|case|toJSON|continue|_listeners|method|unshift|selector|read|_updateHash|_wantsPushState|undefined|isEmpty|handlers|hasChanged|change|update|destroy|keys|isEqual|prev|ajax|_listenerId|PATCH|undelegateEvents|setElement|tagName|validationError|className|a2|_reset|pick|Error|merge|throw|map|find|bind|uniqueId|indexOf|_onModelEvent|_removeReference|modelMap|error|where|isArray|filter|without|sortBy|sortedIndex|invoke|instanceof|any|_configure|_ensureElement|a3|urlRoot|escape|match|save|test|json|contentType|application|PUT|DELETE|POST|beforeSend|isString|GET|pop|ActiveXObject|external|stopListening|_bindRoutes|_routeToRegExp|_extractParameters|_callback|context|exec|interval|href|require|pathname|previous|exports|splice|javascript|popstate|hashchange|_checkUrlInterval|search|hash|replaceState|title|fetch|invalid|invert|switch|forEach|split|class|attr|collect|reduce|dataType|foldl|pairs|inject|reduceRight|JSON|stringify|www|form|urlencoded|foldr|detect|values|select|_method|reject|setRequestHeader|every|HTTP|Method|Override|some|processData|findWhere|include|contains|msActiveXFilteringEnabled|Microsoft|XMLHTTP|isValid|request|encodeURIComponent|Router|max|min|toArray||size|first|head|charAt|isRegExp|take|clear|initial|rest|tail|RegExp|drop|decodeURIComponent|Events|History|isObject|bindAll|noConflict|ender|changedAttributes|last|msie|shuffle|Zepto|lastIndexOf|jQuery|chain|underscore|listenToOnce|VERSION|groupBy|countBy|substr|start|already|been|hashChange|previousAttributes|unbind|View|documentMode|navigator|userAgent|toLowerCase|view|src|Cannot|tabindex|hide|appendTo|body|contentWindow|previousModels|onhashchange|default|shift|setInterval|Model|pluck|Collection|listenTo|div|stop|clearInterval|render|open|close|assign|omit|__super__|property|or|must|be|specified'.split('|'),0,{}))


ここから紹介するものの中には、圧縮だけでなく難読化できるものもあります。

JavaScript/CSS圧縮ツール

1.Online YUI Compressor

Online YUI Compressor

2.CSS & JavaScript Compressor

何%圧縮できたか表示してくれるのが嬉しい圧縮ツールです。
スクリーンショット 2013 07 22 6 22 53

3.Compressor

圧縮を2段階から選べるJavaScript/CSS圧縮ツールです。「basic compress」はコメント削除と空行削除の処理のみ施します。
スクリーンショット 2013 07 22 6 22 19

4.Script-Compression for JavaScript and CSS

セキュリティに配慮した圧縮が選べるオプション付き。
スクリーンショット 2013 07 22 6 22 32

JavaScript圧縮ツール

5.packer

有名な圧縮ツール。オプションで難読化することもできます。
Packer

6.Closure Tools

Google製のJavaScript圧縮ツールです。
Closure Tools  Google Developers

7.JS Minifier

シンプルなJavaScript圧縮ツールです。
JS Minifier

8.LZ77 JavaScript Compressor

難読化できるJavaScript圧縮ツールです。
LZ77 JavaScript Compressor 1

CSS圧縮ツール

9.Clean CSS

こちらはCSS圧縮ツール。手軽にCSSを圧縮するのにオススメです。
Clean CSS  A Resource for Web Designers  Optmize and Format your CSS CSS Formatter and Optimiser Optimizer  based on CSSTidy 1 3

10.Format CSS Online

見た目にも美しいCSS圧縮ツールです。
Format CSS Online

まとめ

難読化にはデメリットもあります

ここまで圧縮/難読化ツールを見てきましたが、難読化にはデメリットもあります。
難読化すると保守性に問題が出てしまうのです。デバッグが複雑になり、修正コストも上がりがちです。

このデメリットを解消するために、プレビューで管理する時は難読化せず、テストから本番に上げるタイミングで関数の中だけを難読化するのがおすすめです。JavaScript全体を難読化してしまうとバージョン管理が難しくなってしまいます。この点だけしっかり守ればメリットが多いので、ぜひとも検討したいところです。

高速化はむずかしい

非エンジニアであるデザイナーの方にとって、Webサイトの高速化は並大抵のことではありません。サーバに原因があるのか、ブラウザ側の問題なのか、JavaScript?CSS?問題は山積みです。
それでも今回ご紹介したワザで高速化に貢献できるはずです。ぜひともお気に入りのツールを見つけてみてください。

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.