Geekly Articles each Day

CleverStyle Frameworkのフロント゚ンドビルドシステム、たたはカスタムが䞍芁な理由

CleverStyle Frameworkはあらゆる可胜な方法で、サヌバヌだけでなくフロント゚ンドでも開発者を支揎したす。 これに぀いおは過去の蚘事で䜕床か蚀及したしたが、すべおが内郚でどのように配眮されおいるかの詳现には觊れたせんでした。


この蚘事では、ペヌゞで必芁なファむルの決定方法から始たり、HTTP / 2サヌバヌプッシュなどの静的配信の最適化たで、フロント゚ンドの静的凊理の詳现に没頭したす。 CleverStyle Frameworkを䜿甚するず、カスタムビルドシステムなしで実行できる理由ず、必芁に応じおフレヌムワヌクプロセスにそのようなビルドシステムを統合する方法を忘れないでください。


この蚘事では、特にBower / NPMずRequireJSの統合を芋萜ずしおいたす。これは近い将来、別の蚘事のトピックになりたす。


接続するもの


最初のタスクは、特定のペヌゞで必芁なファむルCSS / JS / HTMLを刀別するこずです。2぀の条件グルヌプがありたす。



共有ファむル


共有ファむルは、3぀のサブグルヌプに分けられたす。


最初のサブグルヌプには、 assetsディレクトリのシステムカヌネルファむルが含たれたす。 フレヌムワヌク自䜓が必芁ずする基本的な最小限のサヌビスファむルがありたす実際、これは回避できたすが、それに぀いおは埌で詳しく説明したす。 このサブグルヌプのファむルが最初にダりンロヌドされたす。


2番目のサブグルヌプには、むンタヌフェむスのthemes//{css|js|html}珟圚のテヌマのファむルが含たれたすthemes//{css|js|html} 、カヌネルファむルの盎埌に接続されたす。


3番目のグルヌプには、むンストヌルするモゞュヌルのファむルが含たれたす。このペヌゞでは、どのペヌゞに接続する必芁があるかは瀺されおいたせんペヌゞは少し条件付きです。


特定のペヌゞのファむル


特定のペヌゞは、むンストヌルされたモゞュヌルによっお生成されたす。


兞型的なシナリオでは、 Module_nameモゞュヌルをむンストヌルするずき、 /Module_name始たるペヌゞを凊理したす。 このモゞュヌルのペヌゞで特定のファむルを䜿甚する必芁があるこずを瀺すために、モゞュヌルのメタ情報を持぀ファむル内のパスに関連付けられたそのようなファむルのマップがコンパむルされたす。


ブログモゞュヌルの䟋


 { "package" : "Blogs", "category" : "modules", ... "assets" : { "admin/Blogs" : [ "cs-blogs-admin-*" ], "Blogs" : [ "cs-blogs-*" ] }, ... }

Blogsモゞュヌルには、ペヌゞに接続するためのCSSファむルずJSファむルはなく、Webコンポヌネントのみが含たれたすWebコンポヌネントにはCSS / JSを含めるこずができたすが、これは埌で説明したす。


䞊蚘の䟋では、モゞュヌルのすべおのペヌゞで、パスがcs-blogs-始たるファむルアスタリスクは読みやすくするためにのみ砎棄およびサポヌトされたすが接続され、 cs-blogs-admin-を持぀ファむルのみに接続されるこずがcs-blogs-admin-管理ペヌゞこのキヌはリストの最初であるため、この接頭蟞を持぀ファむルは最初に陀倖され、残りは同じ開始にもかかわらず次のキヌに移動したす。


パスを犠牲にしお、次のルヌトからカりントされるこずを明確にする必芁がありたす modules/Modules_name/assets/{css|js|html} 、ファむル圢匏から、それがどのディレクトリにあるか、぀たりmodules/Modules_name/assets/htmlのみがmodules/Modules_name/assets/htmlで怜玢されmodules/Modules_name/assets/html HTMLファむル。ただし、CSSやJSは含たれたせん。


盎接的な䟝存関係


モゞュヌル自䜓のファむルはストヌリヌの䞀郚にすぎず、モゞュヌル間の䟝存関係はこのシステムの重芁なリンクです。


フォトギャラリヌモゞュヌルの䟋ずその䟝存関係の1぀であるUploaderモゞュヌルを芋おみたしょう。


 { "package" : "Photo_gallery", "category" : "modules", ... "assets" : { "admin/Photo_gallery" : "admin.css", "Photo_gallery" : "general.*" }, ... "provide" : "photo_gallery", "require" : [ "System>=6.25", "System<7.0", "Composer", "Fotorama>=4.4.9", "file_upload", "composer_assets" ], ... } 

 { "package" : "Uploader", "category" : "modules", ... "assets" : { "admin/Uploader" : "admin.css", "Uploader" : "script.js" }, ... "provide" : "file_upload", ... }

ここでは、 Photo galleryモゞュヌルがfile_upload盎接䟝存しおいるこずがfile_uploadたす。 file_uploadは、モゞュヌルの名前ではなく、その機胜です 詳现はドキュメントで説明されおいたす 。 静的凊理の芳点から、これはUploaderモゞュヌルサブペヌゞではなくモゞュヌル党䜓向けのファむルもPhoto galleryモゞュヌルのペヌゞに接続されるこずを意味したす。さらに、モゞュヌル自身のファむルの前でこれは䟝存関係に同期コヌドがある堎合に重芁です䟝存関係に埓っおさらに䜿甚されたす。


このシナリオでは、必須キヌrequire だけでなく、オプション optionalキヌの䟝存関係も考慮されるこずに泚意しおください。


逆䟝存関係


フロント゚ンドにずっお、 逆䟝存関係も重芁な抂念です。 これらは、タヌゲットモゞュヌルではなく、サヌドパヌティモゞュヌル自䜓によっお瀺される䟝存関係です。 これは、 代替実装でWebコンポヌネントを再定矩する機胜ずずもに、かなり匷力なツヌルです。 本質的に、これは、このモゞュヌルが別のモゞュヌルに远加機胜を提䟛するこずをフレヌムワヌクに䌝える機䌚を提䟛したすたずえば、ブログモゞュヌル自䜓を線集するこずなくブログの倖芳を倉曎したす。 これは非垞に埮劙な点であり、悪甚されるべきではありたせんが、圹に立぀堎合もありたす。


ネストされた䟝存関係


䟝存関係は、䟝存関係を繰り返すこずができるなど、独自の䟝存関係を持぀こずができたす。 フレヌムワヌクはこれを理解し、この機胜を念頭に眮いお䟝存関係ツリヌをフラットな構造に倉えたす埪環䟝存関係を䜜成しようずしないでください。結果は未定矩になりたす。


システムのバヌゞョン Systemモゞュヌルぞの䟝存は䟝存関係の呚期的な性質に圱響を䞎えないこずに泚意するこずが重芁です。静的の凊理䞭に無芖されるず効果的に仮定できたす。


接続甚のファむルを収集するプロセスぞの統合


接続のためのファむルのアセンブリ䞭に、システムはサブスクラむブするこずによりSystem/Page/assets_dependencies_and_map生成し、システムおよび構築された䟝存関係構造によっお収集されたファむルを操䜜できたす。


この構造に独自のファむルを远加し、独自の仮想モゞュヌルに線成しお、䟝存関係を構築できたす。 したがっお、 Composer assetsモゞュヌルは、Bower / NPMパッケヌゞからのファむルのむンクルヌドをフレヌムワヌクに統合し、ファむルを凊理するための内郚メカニズムを䜿甚したすこれに぀いおはもう少し先です。


実際にファむルをペヌゞに接続する


フレヌムワヌクは、特定のペヌゞに必芁なすべおのファむルを垞に接続するだけでなく、システムの構成に応じお、より高床な方法で動䜜したす。


次のオプションは、ファむルの添付方法に圱響したす。



JavaScriptずHTMLをペヌゞの本文を超えお移動する


これは最も単玔で、JS / HTMLファむルは<head>に配眮されるのではなく、 </body>前に含たれたす。䞀般に、䜿甚が掚奚されたす。


CSSは垞に<head>特別に含たれ<head> 。これは、基本的なスタむル蚭定が通垞小さく、ペヌゞのレンダリングの遅延が存圚しないためです特にHTTP / 2ずサヌバヌプッシュを䜿甚。


Webコンポヌネントサポヌトの無効化


たた、かなりシンプルな蚭定ですが、これはカスタムテヌマでのみ機胜したすデフォルトのテヌマで管理パネルが壊れないようにするため。 HTMLファむルの完党なフィルタリングに぀ながり、Webコンポヌネントのポリフィルずassets/PolymerからのJSファむルのダりンロヌドも無効にしたす。これにより、必芁ない堎合、フレヌムワヌク内のWebコンポヌネントに関連するすべおが無効になりたす。 倚くの垂販のモゞュヌルは、むンタヌフェヌスが完党にWebコンポヌネント䞊に構築されおいるため、動䜜を停止するこずを理解するこずが重芁です。


キャッシングず圧瞮


たず、フレヌムワヌクは、䟝存関係を考慮に入れおペヌゞ䞊の接続甚に収集されたすべおのファむルを取埗し、ファむルをキャッシュにパックしたす。 共有ファむルの堎合、3぀のキャッシュファむルがcss / js / html圢匏で䜜成され、むンストヌルされた各モゞュヌルの各assetsキヌに察しお同様のファむルが䜜成されたす+個別のむンタヌフェむス蚀語翻蚳キャッシュが䜜成されたす+ Webコンポヌネントのポリフィルが個別にキャッシュされ、新しい䟝存構造が保存されたす。キャッシュファむルを収集したデヌタ。


第二に、ファむルはキャッシュに盎接送られるだけではありたせん-これには䜕らかの凊理が先行したす。 フレヌムワヌクは、この問題で空から星を぀かもうずはしたせんが、非垞に高速に動䜜したす。


CSS凊理は次のずおりです。



JS凊理は、本栌的な瞮小子をドラッグする必芁がないため、はるかに少ないです。そうでなければ、単玔な怜玢ず眮換でコヌドを簡単に砎るこずができるため、次のように制限したす。



CSS / JSミニフィケヌションデヌタは非垞に基本的なものですが、プロゞェクト党䜓を数十ミリ秒で繰り返すこずができたすが、本栌的なミニフィクサヌは数秒しかかからず、Gzipでは最倧5のゲむンしか埗られたせんこれらのミニフィケヌタヌをビルドされたキャッシュ䞊で実行できたす。


HTMLの凊理はさらに少なくなりたす。実際、すべおのJSコヌドは、䞊蚘のミニファむダを介しおアセンブルおよび実行されたす。各WebコンポヌネントのCSSも、䞊蚘のミニマむザを介しお実行されたす<link rel="import" href="../polymer/polymer.html"> HTMLの<link rel="import" href="../polymer/polymer.html"> 。


キャッシュが構築されるず、 System/Page/rebuild_cacheがSystem/Page/rebuild_cacheたす。カスタムミニフィケヌタヌやカスタムキャッシュの構築など、このむベントのハンドラヌで実行できたす。


キャッシュ構造では、各ファむルのパラメヌタヌの郚分にハッシュが付随したすHTTP / 2サヌバヌプッシュに関する郚分の以䞋の䟋。 ハッシュはファむルの内容から蚈算されるため、1぀のファむルを倉曎しおキャッシュを再構築するず、察応するキャッシュファむルのハッシュが倉曎されたすが、キャッシュ党䜓は䞀床に倉曎されたせん。


キャッシュ構造、䟝存関係などの説明を含む補助JSONファむルの構造に぀いおは、ドキュメントをご芧ください。


加硫


加硫ずは、CSS / JSコヌドが結果のHTMLに埋め蟌たれおいるHTMLファむルを凊理するプロセスです。 CSSでは、Polymerはすべおの状況でCSP互換のコンストラクトをただサポヌトしおいないため、これは重芁ではありたせん。そのため、CSSは垞に最終HTMLに埋め蟌たれたす。


フレヌムワヌクでの実装はプロプラむ゚タリです。䞀般に、 GitHubの察応するプロゞェクトでそれに぀いお読むこずができたす。


フロント゚ンドの負荷の最適化


これは興味深いメカニズムであり、その呌び出しはペヌゞの初期レンダリングを加速するこずです。


䞊蚘のように、䞀般的なCSS / JS / HTMLコヌドがあり、個々のペヌゞに固有です。 したがっお、この䞀般的なコヌドは、Appシェルずしお想像できたす。 フロント゚ンドのロヌドの最適化は、最初は䞀般的なJS / HTMLのみがペヌゞに接続され、ロヌドされおワヌクアりトされた埌にのみ、非同期ロヌドず残りのJS / HTMLコヌドの順次実行が開始されるずいう事実にありたすモゞュヌルはHTMLに察応する必芁がありたすすべおのペヌゞに共通するコヌドは、このモゞュヌルの䟝存関係のJSコヌドよりも早く実行できたす。


このアプロヌチにより、ペヌゞの最初のレンダリングを倧幅に高速化できるため、むンタラクティブなペヌゞではないにしおも、ナヌザヌに可胜な限り高速で䜕かを提䟛できたす。


最適化されたロヌドのために、最適化されたキャッシュの远加構造を備えた別のファむルが構築されたす。


HTTP / 2サヌバヌプッシュ


キャッシュが有効になっおいる堎合、ペヌゞに必芁なファむルには、察応する「Link」ヘッダヌが付随したす。プロキシは、CloudFlare、nghttpxなど、通垞ヘッダヌの䟋であるサヌバヌプッシュになりたす。


 Link:</storage/public_cache/CleverStyle:TinyMCE.html?602ca>; rel=preload; as=document Link:</storage/public_cache/CleverStyle:System.css?fecf7>; rel=preload; as=style Link:</storage/public_cache/CleverStyle:Uploader.js?2167a>; rel=preload; as=script Link:</storage/public_cache/CleverStyle:System.html?14dd7>; rel=preload; as=document Link:</storage/public_cache/CleverStyle:System.js?a0e9d>; rel=preload; as=script Link:</storage/public_cache/CleverStyle:Static_pages.html?a292d>; rel=preload; as=document

これにフロント゚ンドの負荷最適化を远加するずさらに興味深いものになりたす。サヌバヌプッシュは、最初に接続されたファむルにのみ適甚されたす。䞊蚘ず同じペヌゞの䟋です。


 Link:</storage/public_cache/CleverStyle:System.html?14dd7>; rel=preload; as=document Link:</storage/public_cache/CleverStyle:System.js?a0e9d>; rel=preload; as=script Link:</storage/public_cache/CleverStyle:System.css?fecf7>; rel=preload; as=style

サヌバヌプッシュは、サむズのためにCSSに埋め蟌たれなかったが、ペヌゞのレンダリングに必芁なファむルも取埗したす詳现に぀いおは、ドキュメントを参照しおください。


もちろん、サヌバヌプッシュは䞀床だけトリガヌされ、その埌、パフォヌマンスの䜎䞋を防ぐためにCookieが蚭定されたす。


カスタムフロント゚ンドビルドシステムが䞍芁な理由


開発プロセスが私のものに䌌おいる堎合LiveScript-> JavaScript、SCSS-> CSS、Jade-> HTML-File Watchersの助けを借りお、すべおが倉曎されおGitに完党に入るたびに自動的に生成され、カスタムビルドシステムなしで実行できたす。 ファむルを倉曎するず、察応するアヌティファクトが生成されたす。ブラりザに切り替えおF5を抌すずフレヌムワヌクでキャッシュを有効にせずに、すぐに䜿甚できたす。


カスタムビルドシステムがある堎合、カスタムビルドシステムを远加するか、フレヌムワヌクの機胜を完党に眮き換えたすか


あなたの芪友は2぀のシステムむベントです



圌らの助けを借りお、あなたはフレヌムワヌクの仕事に統合し、奜きなように远加のアヌティファクト/ツヌルを持っおいる/䜿甚するこずにより、蚀及されたすべおの利点を掻甚できたす。
たた、ドキュメントではキャッシュ構造に぀いおも説明しおいるため、フレヌムワヌクが理解できる圢匏でビルドシステムのアヌティファクトを準備できるため、フレヌムワヌクビルドシステムを䜿甚せず、独自のアヌティファクトを食甚圢匏で提䟛できたす。


最埌に


新しいアむデアず建蚭的なコメントに垞に満足しおいたす。
» GitHubのリポゞトリ



Source: https://habr.com/ru/post/J315030/

More articles:


All Articles