HTMLファイルの代わりに文字列テンプレートを使用する

Question

DOJOで独自のウィジェットを作成すると、テンプレートファイルが提供されます。テンプレートファイルはdojo/textモジュールを使用して読み込まれます。ウィジェットの典型的な構造はこのように書き：

<div class="someClass"> 
    <div data-dojo-attach-point="titleNode" data-dojo-attach-event="onclick: clickAction"> 
    Sample Content 
    </div> 
</div> 

我々は直接としてウィジェットにtemplateStringを提供する場合、それはパフォーマンスの面で違いを作成します。

define([ 
    "dojo/_base/declare", 
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin", 
    "dojo/text!./templates/SomeWidget.html" 
], function(declare, _WidgetBase, _TemplatedMixin, template) { 

    return declare([_WidgetBase, _TemplatedMixin], { 
     templateString: template 
    }); 

}); 

HTMLテンプレートには、次のようになります文字列を読み込み、dojo/textモジュール経由でロードしないでください。このように：

define([ 
    "dojo/_base/declare", 
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin", 
    "dojo/text!./templates/SomeWidget.html" 
], function(declare, _WidgetBase, _TemplatedMixin, template) { 

    return declare([_WidgetBase, _TemplatedMixin], { 
     templateString: "<div class=\"someClass\"><div data-dojo-attach-point= \"titleNode\" data-dojo-attach-event= \"onclick: clickAction\">Sample Content</div></div>" 
    }); 

}); 

この変更によって、ページが以前のアプローチよりも高速に読み込まれる可能性がありますか？

Answer 1

モジュールdojo/textを使用してアプリケーションでHTMLファイル（テンプレート）をロードすると、HTMLファイルを取得するためにネットワーク要求が行われます。

開発者モードのdojo/textはネットワークオーバーヘッドを追加します。この環境では、それは実際問題ではありません。

しかし、実稼働環境でアプリケーションを出荷する場合は、アプリケーションの構築を検討する必要があります。

dojoビルドプロセスは、HTMLファイルへのすべての要求が削除されるように、エクスポートするすべてのHTMLファイルをレイヤー内に文字列として自動的に組み込みます（レイヤーはビルドプロセスの1つの出力となるJSファイルです）彼らのネットワーク要求。

Answer 2

templateStringが文字列として直接ウィジェットに宣言され、別のファイルをロードする必要がないため、dojo/textモジュール経由で読み込まない方が少し速いと思います。