JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS

Post on:2011年7月12日

複数のJSファイルをまとめる -BoxJS

BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。

BoxJSの使い方

最初に、box.js(1.4kb)を外部ファイルとして指定します。

<script src="http://www.boxjs.com/box.js"></script>

ロードするJSファイルを指定します。

Box('http://mywebsite.com/scripts/', [
        'plugins/jquery.js',
        'plugins/json2.js',
        'plugins/jquery-class.js'
]);

指定されたJSファイルは、ページに圧縮・キャッシュして届けられます。

BoxJSは、CoffeeScriptもサポートしています。

Box('http://mywebsite.com/scripts/', [
        'plugins/jquery.js',
        'plugins/json2.js',
        'plugins/mycoffeescriptfile.coffee',
        'plugins/mycoffeescriptfile2.coffee'
]);

BoxJSの対応ブラウザ

BoxJSの対応ブラウザは、下記の通りです。

Chrome4.0+
Firefox2.0+
Safari3.0+
IE6.0+
Opera9+

複数のCSSファイルをまとめる -BoxCSS

BoxCSSはウェブサイトで利用するすべてのCSSファイルを一つのリクエストでロードさせることができます。

BoxCSS

BoxCSSの使い方

使用するCSSファイルをBoxCSSが提供するURLのパラメータに記述します。

<link rel="stylesheet" href="http://www.boxcss.com/boxme?host=http://www.yoursite.com/assets/css&include=style1.css,style2.css,style3.css,style4.css" />

指定されたCSSファイルは、ページに圧縮・キャッシュして届けられます。
※BoxCSSでは@importはサポートしていないため、パラメータに加えるようにします。

BoxCSSは、LESSもサポートしています。

<link rel="stylesheet" href="http://www.boxcss.com/boxme?host=http://www.yoursite.com/assets/css&include=style1.less,style2.css,style3.css,style4.less" />