# bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー

ERROR [BABEL] Note: The code generator has deoptimised the styling of /home/xxx.com/node_modules/bootstrap-vue/src/icons/icons.js as it exceeds the max of 500KB.

BootstrapVue は手軽で使いやすいところあるので、管理画面やポータルサイトまで愛用しております。Bootstrap4 からアイコンは自分で選択して導入するという流れに変更され、Font Awesome、Iconic、Octicons など外部のアイコンライブラリを使用するようになりましたが、v4.4 からアイコンが復活で追加されました。選択肢が増えることがいいことですが、nuxt generate する際に icons.js as it exceeds the max of 500KB ワーニングエラーが出るので、何とか解消したい。

環境

  • BootstrapVue: 2.16.0
  • Bootstrap: 4.5.0
  • Nuxt: 2.14.0

エラー内容

Babel Errors in nuxt generate 2.14
Describe the bug
I updated my nuxt project to the latest release which is 2.14. I then use nuxt generate to build the project. While nuxt is building the > project, it gives this error

[BABEL] Note: The code generator has deoptimised the styling of \node_modules\bootstrap-vue\src\icons\icons.js as it exceeds the max of 500KB.

Steps to reproduce the bug

Babel が icons.js が大きいよ〜って言ってます

# 解消方法

nuxt.config.js ファイルに build する際に babel オプション compact 追加することでエラー解消できました。

export default {
  build: {
    babel: {
      compact: true,
    },
  },
};

普通ならエラー解消できて、ここで終了ですが、babel の compact オプションって何の話?

compact は Babel の Code Generator options の一つで
compact オプションを有効化にすることで、特定のファイルが縮小されていても大きいことがわかっているため、Babel からエラーの吐き出しを回避できます。

compact 以外の option もいろいろあります。

  • retainLines
  • compact
  • minified
  • auxiliaryCommentBefore
  • auxiliaryCommentAfter
  • comments
  • shouldPrintComment

参考 Babel Code Generator options (opens new window)

Babel とは

Babel(バベル)は、ECMAScript 2015+コードを古い JavaScript エンジンで実行できる下位互換バージョンの JavaScript に変換する JavaScript トランスコンパイラです。
JavaScript のコードを新しい書き方から古い書き方へ変換して、ブラウザのサポートを待たずに使えるようにする Node.js 製のツールで、コンパイルする際に、インデント削除したり、参照を解析したうえで変数名などを短縮するなどの最適化もできます。

Babel 公式サイト (opens new window)

2021-12-08
  • javascript
  • vuejs
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
vuejs v-if と v-show の違い
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
php 開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ