複数のjsとかcssをまとめるだよ-【phpflair】

    jsやcssをPC用・スマホ用と分けたり、複数のプラグイン使ってると読込数が半端なくなってくる。
    PCで高速回線だと気にならんけど、MVNOの3G回線スマホとかだと・・・

    じゃーまとめて読みこめばいんじゃね?
    って思ってたら、やはりそういうツールが有りました。

    複数やり方・ツールあったけど、簡単そうなphpflairを入れることにしたのでメモ。

    日本語解説が少ないけど、まー感覚でわかるってか簡単。
    自分で使ってみて、

    • 読み込めるのはローカルファイルのみ
      最初CDNとか読み込もうとして上手く行かんかった
    • 読み込むファイルはphpflair置き場からの相対パス
      なんかごっちゃになって読み込み元htmlとか考えてたけど、このツールが読み込んでくっつけるんだから当たり前っちゃー当たり前なのか・・・
    • cssは画像絡むから限定的かもね
      cssは、background-urlとかが基本相対パスだから、こいつ通すといろいろ厄介になる
    • キャッシュ(使うなら)はphpflairの直下
      フォルダ作って、パーミッション書き込みできるように変更しとく

    とかとか。

    ちょっとだけいじって以下みたいな

    	// start
    	if ($_REQUEST['js'] == 'page_index') {//index用
    		$config['sources'] = array(
    			'jquery.lazyloadとか.js'
    		);
    	} else if ($_REQUEST['js'] == 'page_contents') {//内部用
    		$config['sources'] = array(
    			'jquery.なんかA.js',
    			'../path/to/なんかB.min.js',
    			'../path/to/なんかC.min.js',
    			'../path/to/なんかD.pack.js'
    		);
    if (!is_mobile()) {//pcならば
    	array_unshift($config['sources'], 'jqueryなんかE.min.js');
    }
    	} else if ($_REQUEST['js'] == 'area') {//ウェブコンテンツ別にとか
    		$config['sources'] = array(
    			'なんかF.js',
    			'なんかG.js',
    		);
    if (is_mobile()) {//mobileならば
    	array_splice($config['sources'], 2, 0, array('ほかにも.js','さらに.js','jquery.もっと.min.js'));//配列に追加ー
    }

    is_mobile()は、別ファイルのUA判定関数書いてあるファイルをincludeとかしといて、
    環境ごとに読み込むファイル振り分けさせてます。
    また、ページによって必要となるファイルが違うだろうから、何個か引数作っとけば多い日も安心

    あ、htmlのほうは、
    <script src=”path/to/phpflair.php?js=area”></script>
    とかで読み込まれます。

    設定した配列の順にソースも書き出されるので、読み込み順とかお気をつけを
    (jQueryコア読んでからプラグインとか)

    圧縮の設定もあり、サーバーによってはうまく動かない(ブラウザの解釈の違いとか)事もあったりするので、
    そのあたりは事前に当たりをつけとくと良いかと思います。