検索

私はフロントエンド開発者として、多かれ少なかれ多くのフロントエンド構築ツールに接していますが、最近のビジネスでは 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のブール属性とは何ですか?いくつかの例を挙げてください。HTMLのブール属性とは何ですか?いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか?HTMLコードをどのように検証できますか?Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML:その機能と目的マークアップ言語としてのHTML:その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境