検索

私はフロントエンド開発者として、多かれ少なかれ多くのフロントエンド構築ツールに接していますが、最近のビジネスでは 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 を確認できます。これは、ビルドするツールの具体的な選択には慎重な検討が必要です。開発者による。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境