Stencil Config
Stencilでは、すぐに使えるデフォルトの値が設定されているため、多くの場合でstencil.config.ts
ファイルをカスタマイズする必要はありません。基本的に、設定をできるだけ最小限に抑えることをお勧めします。実際に、stencil.config.ts
ファイルを削除してもアプリは問題なくコンパイルされます。ですがそれと同時に、この設定を使用してコンパイラを最小限で構成できます。以降は、たくさんある任意の設定プロパティです。
stencil.config.ts
の例:
import { Config } from '@stencil/core';
export const config: Config = {
namespace: 'MyApp',
srcDir: 'src'
};
buildEs5
ES5ビルドを生成するかどうかを設定します。デフォルトは false
です。
true
を設定すると、devモードとprodモードの両方のes5ビルドも作成されます。
buildEs5
をprod
に設定すると、ES5はprodモードでのみビルドされます。基本的に、アプリをレガシーブラウザー(IE11およびEdge 18以下)で実行する必要がない場合は、デフォルトの
buildEs5
をfalse
に設定して使用しても安全です。これにより、本番ビルドの時間も短縮されます。 es5ビルドの作成に加えて、アプリはsupportレガシーブラウザーのランタイムオプションを有効にすることにも関心がある場合があります。詳細については、
config extras を参照してください。
buildEs5: boolean | 'prod'
bundles
Stencilはデフォルトでアプリケーションを静的に分析し、すべてのコンポーネントがどのように相互接続されているかを示すコンポーネントグラフを生成します。コンポーネントグラフから、アプリ内での相互の使用状況に応じて、コンポーネントをどのようにグループ化するかを最適に判断できます。そうすることで、ネットワークへのリクエストを減らすためにコンポーネントをバンドルすることができます。バンドルはbundles
を使用して手動で生成することもできます。
bundles
は、コンポーネントが遅延ロードされたバンドルにグループ化される方法を表すオブジェクトの配列です。Stencilがバックグラウンドで自動的に処理するため、この構成はほとんど必要ありません。
bundles: [
{ components: ['ion-button'] },
{ components: ['ion-card', 'ion-card-header'] }
]
enableCache
デフォルト:
true
Stencilは再ビルドを高速化するために、ビルド結果をキャッシュします。この機能を無効にするには、enableCache
をfalse
に設定します。
enableCache: true
globalScript
global scriptは、ライブラリやアプリが読み込まれる前に1回実行されるため、外部サービスへの接続の設定や、使用しているライブラリのビルドなどを行うことができます。
実行されるコードは、global scriptによってエクスポートされるデフォルトの関数内に配置する必要があります。global scriptのすべてのコードが、エクスポートされる関数でラップされていることを確認してください。
global scriptのオプションは、ファイルパスを文字列として受け取ります。
export default function() { // または export default async function()
initServerConnection();
}
エクスポートされた関数は
async
にすることもできます。
globalStyle
Stencilは、多くのコンポーネントをアプリにコンパイルするために伝統的に使用されており、各コンポーネントには独自のコンパートメント化されたスタイルが付属しています。ただし、すべてのコンポーネントとWebサイトで"グローバル"なスタイルを使用することは今でも一般的です。グローバルCSSファイルは、
さらに、globalStyle
はSassやPostCSSなどでスタイルをプリコンパイルできます。
次は、app.css
という名前のグローバルcssファイルを含むフォルダー構造の例です。
src/
components/
global/
app.css
global styleは、ファイルパスを文字列で設定します。このビルドによる出力は、buildDir
に送られます。次の例では、www/build/app.css
に保存されます。
globalStyle: 'src/global/app.css'
アプリでグローバルスタイルを使用する方法については、styling docsをご覧ください。
hashFileNames
デフォルト:
true
productionビルドでは、生成された各ファイルのコンテンツはハッシュ化され、ハッシュ化された値がファイル名として使用されます。コンテンツがビルド間で更新されない場合、同じファイル名を受け取ります。コンテンツが更新されると、ファイル名が異なります。これにより、デプロイされたアプリはビルドディレクトリを"永続的にキャッシュ"し、Content Delivery Network(CDN)を最大限に活用して大量のファイルをキャッシュすることで、高速なアプリを実現できます。
hashFileNames: true
hashedFileNameLength
デフォルト: 8
hashedFileNameLength
はファイル名のハッシュが何文字であるべきかを指定します。hashFileNames
がtrue
に設定されていて、productionビルドの時のみ有効です。
hashedFileNameLength: 8
namespace
デフォルト: App
namespace
はアプリの名前空間を表すstring
を指定します。再利用可能なコンポーネントのライブラリになることを意図していないアプリの場合、デフォルトのApp
で十分です。ただし、アプリがIonic
などのサードパーティライブラリとして使用される場合は、一意の名前空間が必要です。
namespace: "Ionic"
outputTargets
Output Target docsをご覧ください。
plugins
Plugin docsをご覧ください。
devServer
Dev-Server docsをご覧ください。
preamble
デフォルト: undefined
preamble
は、ビルドのメインファイルのプリアンブルを表すstring
を指定します。バナーを永続化したり、ビルド結果に関する情報を追加するのに役立ちます。
preamble: 'Built with Stencil'
srcDir
デフォルト:
src
srcDir
は、各コンポーネントのソースとなるTypeScriptファイルを含むディレクトリを指定します。Stencilアプリのスタンダードは、デフォルトのsrc
を使用することです。
srcDir: 'src'
taskQueue
デフォルト: congestionAsync
ステンシルのランタイムが使用するタスクキューを設定します。タスクキューは、フレーム全体でDOMの読み取りと書き込みをスケジュールして、レイアウトのスラッシングを効率的にレンダリングおよび削減します。デフォルトでは、
congestionAsync
が使用されます。また、各設定を試して、ユースケースに最適な設定を決定することをお勧めします。すべての場合において、アプリにCPUを集中的に使用するタスクが多数あり、メインスレッドが定期的にロックアップする場合は、常に試してみることをお勧めします。
これらのタスクにはWeb Workers。
congestionAsync
: DOMの読み取りと書き込みは、レイアウトのスラッシングを防ぐために次のフレームでスケジュールされます。 アプリのタスクが多く、キューが混雑すると、メインスレッドがブロックされないように、作業が複数のフレームに分割されます。 ただし、場合によっては、特に起動時に不要なリフローが発生する可能性もあります。congestionAsync
は、アニメーションを実行しながら、メインスレッドをロックする可能性のある集中的なタスクを同時に実行するアプリに最適です。async
: DOMの読み取りと書き込みは、レイアウトのスラッシングを防ぐために次のフレームでスケジュールされます。 集中的なCPUタスクの間、次のフレームで発生するようにレンダリングを再スケジュールしません。async
はほとんどのアプリに理想的であり、アプリに多くの集中的なタスクがあり、メインスレッドがロックアップする場合は、むしろWeb Workersを試すことをお勧めします。immediate
: writeTask()コールバックとreadTask()コールバックを同期して実行します。 タスクは次のフレームで実行されるようにスケジュールされていませんが、少なくとも1つのマイクロタスクがあることに注意してください。「即時」設定は、長時間実行されてスムーズなアニメーションを提供しないアプリに最適です。 非同期設定と同様に、アプリに集中的なタスクがあり、メインスレッドがロックアップする場合は、Web Workersを試すことをお勧めします。
taskQueue: 'async'
testing
testing config docsをご覧ください。
extras
Extras docsをご覧ください。