fis3 予備学習_html/css_WEB-ITnose

私はフロントエンド開発者として、多かれ少なかれ多くのフロントエンド構築ツールに接していますが、最近のビジネスでは Baidu FIS チームの fis3 を使用しています。fis3 についての私の理解を共有したいと思います。あなたと。

使用方法は簡単です

まず、node と npm をインストールする必要があります

次に、npm install -g install コマンドを使用して fis3 をインストールしますとなり、インストールが完了しました。

はインストールが成功したことを意味します。

次に、 fis3 release -w を通じてコードを監視できます。

注: fis3 にはデフォルトで fis3-command-release プラグインが組み込まれており、リリース時に -w または -L パラメータを追加するだけで、ファイル監視とブラウザ自動更新機能が提供されます。コードを展開しました。

プラグインを使用する必要がある場合は、fis3 install -g plug-in name を使用してインストールできます。

他のコンポーネント ツールと同様に、fis3 も fis-conf.js ファイルを構成する必要があります。

MD5 スタンプとリソースのマージと圧縮を追加します (MD5 スタンプを追加するには useHash: true を構成します)

CssSprite 画像のマージ

sass ファイルをコンパイルします

基本的な fis3 を使用できるようにします。

fis 3 のコンパイル機能

fis3 は次のことができます:

その主な機能は基本的にフロントエンド開発に必要なものです。 3 つのコンパイル機能: リソースの場所、コンテンツの埋め込み、依存関係の宣言。

1. リソースの配置

HTML でのリソースの配置

js でのリソースの配置

コンパイル後

CSS でのリソースの配置

コンパイル後

2. コンテンツの埋め込み

3. 依存関係ステートメント

fis3 の設計原則は、「依存関係テーブルに基づく静的なリソース管理システムとモジュール」フレームワーク設計です。 」ということで、静的リソース管理とモジュール化という2つの側面からfis3を理解していきます。

静的リソース管理

Web サイトで高速応答と高い同時実行性を実現したい場合、パフォーマンスの最適化は永続的な問題として考慮する必要があります。ウェブサイトを静的にしようとします。動と静の分離を実現します。 CDN テクノロジーを使用して静的リソースを CDN に保存し、静的リソースの CDN パスを使用してリソースをプルして、サーバーへの負荷を軽減できます。 fis3 は「静的リソース管理システム」を実装しています。ページを開発する場合、構築後には、リリース後のページの混乱を避けるために、ハッシュされた静的リソースのバージョン番号を持つファイルが生成されます。

静的リソースのサイズもネットワーク伝送効率に影響します。fis3 は、画像、HTML、js、css ファイルを結合するためのプラグインも多数提供しています。?画像はリクエストの数を減らすためにマージされます。ただし、単純なリソースのマージではオンデマンドでリソースをロードすることはできません。ただし、オンデマンドで静的リソースをロードすることも、リソースの冗長性を軽減する重要な方法です。 fis3 を使用すると、静的リソース マッピング テーブルが生成されます。これは、ファイルの依存関係などを記録するテーブルです。map.json は生成されませんが、ファイルに「__RESOURCE_MAP__」文字が含まれる場合、この文字はテーブル構造データに置き換えられます。 。静的リソースシステムは、テーブル構造データに従って対応する情報をロードできます。これにより、オンデマンド読み込みの問題が解決されます。

モジュール型開発

フロントエンドのモジュール型開発は、開発者にとってモジュール化によりコードの再利用が容易になり、保守性が向上します。私たちがよく知っているモジュラー開発には commonjs、AMD、CMD が含まれ、モジュラー フレームワークには mod.js、require.js、sea.js などが含まれます。

Fis3 はデフォルトではモジュラー開発をサポートしていないため、fis3-hook-commonjs/fis3-hook-amd/fis3-hook-cmd、fis3-postpackager-loader、および fis3-deploy-wsd-cdn-upload プラグ-ins はサポートが必要です。

fis-conf.js を構成するプロセス:

1. fis3-postpackager-loader プラグインを使用して依存関係を分析します

2 . リソースをマージします

3. 静的リソースを CDN に公開します

5. js リファレンス

fis3 は、依存関係宣言の組み込み構文におけるリソース間の相互依存の構文に加えて、以下の構文も解析できます。

fis3 は、JavaScript のモジュール化や CSS のモジュール化など、個別のリソースのモジュール化を意識する必要がなく、開発エクスペリエンスを向上させます。パフォーマンスの最適化により優れたサポートが提供されます。この統合モジュラー ソリューションのディレクトリ分割は、通常のリソース タイプ別の分割とは異なり、共通サブシステム (他のリソースにサービスを提供できる一般的なモジュール) とビジネス サブシステム、コンテンツを含むモジュール (サブシステム) に分割されます。実際に出力したサブシステムには、さまざまなリソースのファイルが含まれています。一般に、JS コンポーネントは CSS コンポーネントのコードをカプセル化でき、テンプレート モジュールは HTML、JavaScript、CSS などのさまざまなモジュール リソースを処理できます。

js でモジュールをロード

css で依存関係を宣言

フロントエンドのモジュール化はjs、CSS、tplを同時に考慮する必要があるため、他の言語に比べて複雑です。 commonJS を例に挙げると、commonJS で定義されるモジュールには、require (外部モジュールの導入)、exports (現在のモジュールのメソッドまたは変数のエクスポート)、および module (モジュール自体) の 4 つの変数が含まれます。 、グローバルを提供でき、ブラウザ CommonJS モジュールをロードできます

ビルド後、ファイルは自動的に次のコードを追加します

最後に

fis3 と同じ nodejs ベースのビルド ツールには grunt 、 gulp などがあります。 では、fis3 とこれらの一般的なツールとの違いは何ですか?

個人的な経験に関する限り、Grunt はプロジェクトが大きくなるほどビルド時間が遅くなり、開発速度が大幅に遅れます。 grunt には 3,000 以上のプラグインから選択できます。

gulp は軽量でカスタマイズ可能です。ただし、既存のプラグインは開発ニーズを満たさない可能性があるため、独自のプラグインを作成する必要がある場合があります。 -ins は他のツールよりも便利かもしれません。 Gulp には 700 近くのプラグインがあります。 Gulp は学習コストが低く、API は 5 つしかありません。

Fis3 は比較的軽量ではないため、より多くのことができるため、プロジェクト全体で fis3 を使用できます。 fis3 は他のツールよりもパフォーマンスの最適化に重点を置いていると感じます。 fis3 には 1000 を超えるプラグインがあり、基本的にはこれで十分な開発と使用が可能です。独自のプラグインを開発したい場合にも非常に便利です。全体として、fis3 はフロントエンド開発に多くの利便性をもたらします。

これら 3 つのツールを使用して同じプロジェクトをビルドした結果は次のとおりです。

grunt:

gulp:

fis3:

ビルド出力時間 grunt>fis3>gulp を確認できます。これは、ビルドするツールの具体的な選択には慎重な検討が必要です。開発者による。