質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • Vue.js

    1116questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Onsen UI

    353questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

  • webpack

    307questions

  • Vue CLI

    27questions

@vue/cli (3.x) での webpack のバンドルサイズを縮小する方法は?

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 172

KentaKonno

score 7

概要

vue-cli@3.2.3 で vue create したプロジェクトに onsenuivue-onsenui を追加しました。

ツールバーとボタンのみのシンプルなページを作成しましたが、ビルド時に webpack がバンドルサイズの warning を出します。

create-react-app では自動的に上手く処理してくれるところなのですが…

Audits でのパフォーマンスの評価も極めて低くなっています。

webpack に上手く chunk に split させる方法のヒントをいただけないでしょうか?

Audits

出力されるエラー

$ yarn build
yarn run v1.12.3
$ vue-cli-service build

/  Building for production...

 WARNING  Compiled with 3 warnings                                                                                                          15:25:26
 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  img/ionicons.aff28a20.svg (326 KiB)
  img/fa-brands-400.83e6c29f.svg (615 KiB)
  img/fa-solid-900.de1d242d.svg (610 KiB)
  css/chunk-vendors.8093b357.css (288 KiB)
  js/chunk-vendors.a90761fa.js (429 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (721 KiB)
      css/chunk-vendors.8093b357.css
      js/chunk-vendors.a90761fa.js
      css/app.93674a35.css
      js/app.f7f89ff1.js


 warning

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                      Size             Gzipped

  dist\js\chunk-vendors.a90761fa.js         429.35 kb        110.55 kb
  dist\js\app.f7f89ff1.js                   3.54 kb          1.66 kb
  dist\precache-manifest.a779dd4a0c89add    2.98 kb          0.96 kb
  03d84aab9c25e52e9.js
  dist\service-worker.js                    0.94 kb          0.53 kb
  dist\css\chunk-vendors.8093b357.css       288.02 kb        45.79 kb
  dist\css\app.93674a35.css                 0.33 kb          0.23 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Done in 12.52s.

環境

$ node -v
v10.15.0

$ npm ls -g --depth=0
C:\Users\hoge\AppData\Roaming\npm
+-- @vue/cli@3.2.3
+-- @vue/cli-service-global@3.2.3
+-- npm@6.5.0
`-- yarn@1.12.3
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

同じタグがついた質問を見る

  • Vue.js

    1116questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Onsen UI

    353questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

  • webpack

    307questions

  • Vue CLI

    27questions