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コア読んでからプラグインとか)圧縮の設定もあり、サーバーによってはうまく動かない(ブラウザの解釈の違いとか)事もあったりするので、
そのあたりは事前に当たりをつけとくと良いかと思います。関連あるかもしれない記事