ionic:build 時のエラー(Budget 4.00 kB was not met by・・・)とゲームブック途中経過紹介
ゲームブックプロジェクト進行中です。
ただTypeScript、ionic、Angularのバージョン違いによるエラー(正確には公式も含む様々な情報間のバージョンが異なると思われるエラー)があったりします。
例えば、ionicコンポーネントのページで最新のコンポーネントサンプルコードがTypeScriptのエラーではねられるなどです。
恐らくは設定を変えれば、何とかなるのかもと思いつつ、後回し気味です。
しかし今回はBuild時に始めて見たエラーが出現したので、内容と対応についてのメモです。
"ionic serve"コマンドでは動いているコードを"ionic build --prod"でビルドしたところ、最後の最後で以下のエラーメッセージが出ました。
---------------------------------------------------------------
Budget 4.00 kB was not met by 865 bytes with a total of 4.84 kB.
---------------------------------------------------------------
どうもサイズのサイズの最大値を超えている的なエラーのようです。
Googleでも同様の事例(ほとんど英語のサイトです)があったので、VisualStudioCodeで"Budget"についてプロジェクト内の検索を行うと、プロジェクトトップの"angular.json"と言う設定ファイル内に以下の設定内容がありました。
---------------------------------------------------------------
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "4mb"
},
---------------------------------------------------------------
上記の"maximumError"を"5mb"に変更したところ、無事にビルド完了です。
ちなみに、サイズ増大の原因はコードをいっぱい書いたからではなく、枠のデザイン用に画像ファイルを取り込んだからと思われます。
ページごとに、枠のデザインを変える事ですこし雰囲気を出せるようになったかと思います。
せっかくビルド出来ましたのでサンプルページのアドレスも以下に載せますね。
ゲームブック開発中テストサイト
https://aticlab.com/webapp/gamebook/home
ちなみにionicのUIコンポーネントのメニューとアコーディオンは、とても便利だと思いましたので、その辺りも見て頂ければと思います。
(コードほぼ無しで実現できるのは感動)
ion-menu
https://ionicframework.com/docs/ja/v6/api/menu
ion-accordion
https://ionicframework.com/docs/ja/v6/api/accordion
備考:
ion-menuで"<ion-menu-toggle>"と"</ion-menu-toggle>"の間に置いたボタンやテキストなどをクリックするとメニューは閉じます。(toggleはオンオフの切り替えの事)
メニューを閉じるのにコードを書く必要はないです。