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

ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。

サイトのキャプチャ

[ad#ad-2]

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

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

サイトのキャプチャ

BoxJS

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" />

BoxCSSの対応ブラウザ

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

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

[ad#ad-2]

sponsors

top of page

©2018 coliss