FISを構成してgo revelフレームワークを最適化し、フロントエンドキャッシュポリシーを最適化

フロントエンドエンジニアにとって、ブラウザキャッシュの最適化は永遠の話題です.先日、「大手企業ではどのようにフロントエンドコードを開発し、導入しますか?」という知乎上の質問を見たので、FISを使って自分のフロントエンドファイルを最適化しようと決心しました.
私たちのプロジェクトはgo言語のrevelを使ってwebフレームワークを作りました.このフレームワークのディレクトリ構造は前後のファイルを混合しており,前後の開発を完全に分離することはできない.最初のステップは、前後のファイルを分離することです.
前後端の分離
FISを用いてフロントエンドを最適化することが決定したので,FISのコンパイルファイルという機能を特に利用した.完全な前後の分離ができない以上、少なくとも一部は分離しなければならないだろう.
まずapp/views/とpublic/の2つのフォルダをrevelディレクトリの外に移動し、私たちのエンジニアリングファイルがserver/の下に保存されていると仮定し、server/の同級で別のディレクトリweb/を作成するので、プロジェクトファイルの構造は大体次のようになります.

	├─┬ server
	│ ├── app
	│ ├── ...
	│ └── tests
	└─┬ web
		├─┬ app
		| └── views
		└── public

次に、Web/下にfis-conf.jsファイルを新規作成します.内容は次のとおりです.

	fis.config.merge({
		deploy : {
			local : {
				to : '../server'
			}
		}
	});
	

このとき、コマンドfis release -md localを実行すると、Web/下のファイルがディレクトリ構造に従ってserver/下に保存されていることがわかります.これにより、server/下のバックエンドコードを気にすることなく、Web/下でフロントエンドコードを書くことができます.fis -wを使えばさらに全自動です.
リソースの再配置
HTMLファイル
以前はサーバ環境とローカル開発環境を区別していたため、htmlでは.RunModeを多く使用して導入環境を判断していました.

	<img src="{{if eq .RunMode "prod"}}http://cdn.example.com{{end}}/img/image.png">

現在FISを使用して以降、このような書き方はサポートされておらず、そのように書く必要もありません.FISは自動的にパッケージ化時にcdnドメイン名を挿入するので、開発時には全く考慮する必要はありません.まず、このようなリソースの位置をすべてローカルリソースに変更します.
CSSファイル
もう一つ静的リソースを参照するのはcssです.cssには条件判断などがないので、これまではアップロード時にリソースファイルの参照先を手動で変更していましたが、ファイルが多くてかなり苦しかったです.FISを使って、この部分の仕事は完全に全自動に変えて修正することができて、お母さんは二度と私がいくつかの書類を漏らして変更していないことを心配する必要はありません.すべてのリソースの位置付けをローカルリソースに変更すればよい.
JavaScriptファイル
同様に、jsファイル内のリソースの位置付けも変更する必要があります.以前はrunModeで判断していましたが、今は必要ありません.しかしhtmlやcssとは異なり、jsには特別なプロンプトが必要です.
以前のリファレンスリソースは次のようになりました.

	var img = "/path/to/image.png";
	

次のように変更します.

	var img = __uri("/path/to/image.png");
	

そうでなければFISも認識されず、自動的に置き換えられません.
プリコンパイル言語のサポート
プロジェクト開発の際,LESSとCoffeeScriptの2つのプリコンパイル言語を用いて開発を加速させた.以前はsublime textのプラグインでファイルを保存するときに指定したディレクトリに自動的にコンパイルされていました.FISを使うと、この仕事もFISに任せることができます.特にCoffeeScriptのように,プラグインがコンパイルをサポートしていない場合はディレクトリ構造を維持することは,かなり苦痛である.
まず、いくつかのコンパイラをインストールします.

	npm install -g fis-parser-less fis-parser-coffee-script
	

次に、プロジェクトルートディレクトリのfis-conf.jsにコードを追加し、次のように表示します.

	fis.config.merge({
		modules : {
			parser : {
				coffee : 'coffee-script',
				less : ['less']
			}
		},
		roadmap : {
			ext : {
				less : 'css',
				coffee : 'js'
			}
		},
		deploy : {
			local : {
				to : '../server'
			}
		}
	});
	

これにより、コンパイルなどにかかわらず、エディタに縛る必要もなく、coffee-scriptとlessを書くことに集中できます.
これで,今回FISを用いてフロントエンドコードを最適化することは一段落した.