F.I.S(フロントエンドエンジニアリング)の事前検討_html/css_WEB-ITnose

1. FIS の最初の紹介

プロジェクト中に静的リソース ブラウザのキャッシュ更新の問題に遭遇したため、インターネットで解決策を探しました。この問題はこれまで解決されていませんでしたが、その方法は新しい URI を設定してブラウザを強制的に更新するだけです。このプロセスはまだ非常に単純に思えます。

私も誤って Zhihu の投稿を検索してしまいました。大企業ではフロントエンド コードをどのように開発してデプロイしていますか?

この記事で FIS についての言及を見て、少し興奮して学び始めましたが、すぐにさらに問題が見つかりました。

2. 試してみる

もともと私は、ブラウザの静的キャッシュ更新の問題を簡単に解決できるように、フロントエンド リソースをマークできるツールを考えていたところです。 FIS の説明は確かに真実なので、それに取り組み始めましょう。

インストール

FIS は Nodejs に基づいて開発されているため、nodejs は必須です。インストール。 。

次に、npm コマンド npm install -g fis を使用してインストールします。結果は行き詰まりでした。

これが初めての連絡だったので、Baidu で長い間検索しましたが、解決策が見つかりませんでした。あきらめる。 。 。

公式ビデオチュートリアルを発見したので、時間をかけていくつかのエピソードを視聴し、FIS ツールが非常にシンプルであることを大まかに理解しました。そして、それはフロントエンド開発の問題を解決します:

1. リソース圧縮

2. md5 スタンプ

3. リソースのマージ

これらは、より便利だと思われる機能です。私が最も懸念しているのはmd5スタンプです。 。

d dMD5

いわゆる MD5 スタンプは次のとおりです:

& & lt; script src = "/script/planholder.js" & gt;

もちろん、ファイル自体の名前も変更されています: script/placeholder_88025f0.js

これにより、2 つの問題が解決されます。

1.静的リソースを参照する URI が変更されると、ブラウザーは自然に新しいリソースを取得するため、キャッシュの更新の問題が解決されます

2. md5 はファイルから計算されるため、ファイルが変更された場合にのみ新しいリソースが取得されますそれ以外の場合は変更する必要はありません。これにより、増分更新の問題が解決され、トラフィックへの影響が考慮されます

もちろん、私のような小規模なプロジェクトの場合、ポイント 2 はほとんど役に立ちません。

もう一度インストールしてみます

メリットが分かったので、インストールを続けて fis 公式 Web サイトを開いてみましょう: http://fis.baidu.com ここに入門チュートリアルがあります。これは Baidu チームによって公開されており、非常に優れています。しかも中国語なので、とても身近に感じます。 。原因としては、npm Web サイトが頻繁にブロックされることが考えられます。 。まあ、公式でもミラーリングを使用する計画があります:

npm install some-npm-module -g --registry=国内镜像 --disturl=https://npm.taobao.org/dist

これらのことについては、公式 Web サイトに記載されているため、詳細は説明しません。外出するときは左に曲がってここに行ってください: https://github.com/fex-team/fis/issues/65

今度は OK、インストールされています、fis -v

3.質問に遭遇します

インストールしたら、プロジェクトで使い始めましょう。そのとき初めて、私は若すぎることに気づきました。 。 。 。 。 。

1. 設定

fis release -md ../output を直接使用し、生成と公開を開始します。結果は、猫や犬を含むすべての js/css/imgs に md5 スタンプが追加されてしまいました。これは面倒ですし、まったく望んでいません。つまり、MD5 スタンプをワンクリックで追加するという問題をツールで直接解決できれば理想的です。

次に、具体的な設定方法を理解するために公式ドキュメントを勉強する必要があります。 FIS では、構成は fis-conf.js ファイルを通じて行われます。公式例:

// 画像結合の最小間隔を設定します

fis.config.set('settings.spriter.csssprites.margin', 20);

// 単純なプラグインを有効にするには、最初にプラグインをインストールする必要があることに注意してください。 -g fis-postpackager-simple

fis.config.set('modules.postpackager', 'simple');

// パッケージ化ルールを設定するには次のコメントを解除します

fis.config.set('pack' , {

'/pkg/ lib.js': [

'js/lib/jquery.js',

'js/lib/backbone .localStorage.js',

],

// をキャンセルします注釈設定の CSS パッケージ化ルールに従います。 });

// simple による分散リソースの自動マージを有効にするため、次のコメントを解除します

fis.config.set('settings.postpackager.simple.autoCombine', true);

fis.config.merge（{

s s s s ’s’ t - - ‐ ‐ '、lib。必要なもの: [ ' lib.js' ]、

/xxx ディレクトリ下位

リリース: '/Static $ &'

},

// すべての js ファイル

reg: '**. '、

//公開された/static/js/xxxディレクトリダウンロード

re reg： '**。ico'、

----、in、reg： '**。ico'、

md5パラメーターもmd5 スタンプ付きのファイルは生成されません

useHash: false,

through through through's'' through through through out through through through through over's''‐to‐‐‐‐MD5 を使用します、

すべての iMage ディレクトリ内の .png、.gif ファイル

reg:/^/images/ (.*. (?:png| gif))/i,

// アクセス先の URLこれらの写真は「/m/xxxxx？log_id = 123」です。L Ishtmllike: True,

// GBK エンコード ファイルとして公開

CHBK ',

// /php/template/xxx ディレクトリに公開

release:'/php/template/$ 1 '

} ,

生産しない時期です

''s ' ' ' ' ' '''' out'''''''''''''' out-- out-out-‐‐‐ ‐‐ ,

}

。私が現在最も使用しているのはロードマップであり、これが中心的な設定であると感じています。

2. リソースの配置

いわゆるリソースの配置とは、html/js/css 内のリソース参照を見つけて、FIS によってコンパイル (生成) された新しいリソースに置き換えることです。実際、この記事の冒頭で述べた例と同じように、非常に単純です。

スタンプ後は次のようになります。これ:

< ;script src="/script/placeholder_88025f0.js">

このように、リソースの更新はリリースされるたびに自動的に完了します。これは、ちょっと便利です。 。しかし、ここで問題が発生します。 。 。現在置き換えられた FIS の URI は絶対パスです。この文はどういう意味ですか?

たとえば、CSS コード:

.h_login-conimgbg{background:transparent url('img/lgoin_image.png') no-repeat;}

img/lgoin_image を参照します。 .png この画像。しかし、FIS によってコンパイルされた後はどうなるでしょうか:

.h_login-conimgbg{background:transparent url('/css/img/lgoin_image_369f159.png') no-repeat height:406px;}

FIS 直接絶対パスを置き換えると問題が発生します。元々は相対ディレクトリでしたが、絶対ディレクトリに変更するとルート ディレクトリになります。何が問題なのでしょうか?

たとえば、システムが Tomcat の webapps の下にある myweb ディレクトリにデプロイされている場合、http://localhost:8080/myweb にアクセスすると問題が発生します。次に、上記の CSS がリソースを見つけると、それは http://localhost:8080/myweb/css/img/lgon_image.png になります。

ただし、FIS をコンパイルすると、http://localhost:8080/css/img/lgon_image_369f159.png のようになります。これによりアクセスできなくなります。そこで、FIS ディスカッション フォーラムでこの問題について相談したところ、次のような返事が返されました:

現在はすべて絶対パスであり、主にリソースのマージと cdn デプロイメントの関数実装を考慮しています

このように、パスのみを渡すことができますこの問題を解決するには、他の方法もあります。たとえば、リソースの URL を生成するときにドメインを追加するようにロードマップを構成できます。この方法はもともと CDN のデプロイに使用されていました。しかし、上記の問題も解決できます。

3. 処理したくないファイル

jquery、jqueryUi、その他のライブラリなど、多くのサードパーティのリソースがシステムで使用されていますが、基本的にこれらのライブラリのコードは変更しません。 、静的なリソース圧縮がないため、md5 の問題を追加します。もちろん、これらのファイルを FIS で処理する必要はなく、FIS はデフォルトですべての js/css/imgs を処理します。これには構成の問題も関係します。

fis.config.merge({

ロードマップ : {

パス : [

{

reg : /^/plugin/(.*.(?:js|css) ) /i,

useHash : false、

useCompile : false、

using reg を使用して検索する構成フラグメント特定のディレクトリ

useHash:false (md5 スタンプを追加しないことを意味します)

useCompile:false (リソースをコンパイルしないことを意味します)

さて、この設定では、プラグインその下の js/css は処理されません。

第 4 段階の経験

実際、プロジェクトは統合に jenkins hudson を使用する予定であり、デプロイメントの問題がまだ多くあるため、最終的には諦めました。そのため、これ以上詳しくは説明しません。時間の制約があるため。ツールを使用して md5 スタンプまたはバージョン番号を追加するという当初のアイデアは打ち砕かれました。

しかし、まだ利益があります:

1. フロントエンド エンジニアリングにはこのような斬新なアイデアがあることが判明しましたが、実際には大きな進歩はなく、非常にぎこちないように見えます。さらに、FIS はまだ初期段階にあるように感じられ、確かに比較的標準化されたプロジェクトの開発に考慮できる補助ツールです

2. 私が本当に興味を持っているのは、フロントエンドのモジュール化です。この部分は FIS の高度なステップであり、実際のフロントエンド エンジニアリングはこの部分です。私はフロントエンドの経験が浅く、初級レベルにすぎないため、この高度な内容は学習と練習に時間がかかります

3. フロントエンドもバックエンドもプログラマーでありエンジニアです。