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

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

ただいまの
回答率

89.99%

bundleファイルのサイズを小さくしたい

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,225

RyuSuzuki

score 125

前提・実現したいこと

Nuxt.jsでVuetify.jsを用いた簡単なSPAを開発しています。
開発自体には問題がないのですが、Productionモードでbuildした際
bundleが非常に大きくなっていて困っています。

webpackのanalyzerを使って確認したところ、Vuetifyのファイルが全体の多くを占めていることまではわかっています。(後述)

どのようなビルドの設定を施せば、bundleのサイズを小さくすることができますか?
またはimportを工夫する方法などありますか?

よろしくお願いします。

環境概要

dependencies :

@nuxtjs/vuetify: 0.5.3
nuxt: 2.4.3
vuetify-loader: 1.2.0

まだimportでモジュールを一切呼び出していない状態
かつ、componentやpageも小さいものが2,3ある程度

該当のソースコード

nuxt.config.js

module.exports = {

  mode: 'spa',

  modules: [
    // Add vuetify
    '@nuxtjs/vuetify'
  ],

  vuetify: {
    // Vuetify theme-color setting
    theme: {
      primary: '#3f51b5',
      secondary: '#b0bec5',
      accent: '#8c9eff',
      error: '#b71c1c'
    }
  },

  /*
  ** Headers of the page
  */
  head: {
    title: 'my_first_app',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#3B8070' },
  build: {

    analyze: true,
    /*
    ** Run ESLint on save
    */
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

その他

analyzerで出力されたclient.html

analyzer

ビルド時のログ

> nuxt build

ℹ Production build                                                                                                 00:43:47
✔ Builder initialized                                                                                              00:43:47
✔ Nuxt files generated                                                                                             00:43:47

✔ Client
  Compiled successfully in 47.96s


Hash: 414c62aa18e19a6715ee
Version: webpack 4.29.2
Time: 47968ms
Built at: 2019-02-10 00:44:40
                         Asset      Size  Chunks                    Chunk Names
../server/client.manifest.json  5.49 KiB          [emitted]
                      LICENSES  69.8 KiB          [emitted]
                        app.js  32.7 KiB       0  [emitted]         app
                commons.app.js   144 KiB       1  [emitted]         commons.app
      pages/dashboard/index.js  2.56 KiB       2  [emitted]         pages/dashboard/index
                pages/index.js  1.53 KiB       3  [emitted]         pages/index
        pages/job/new/index.js  4.89 KiB       4  [emitted]         pages/job/new/index
                    runtime.js  2.27 KiB       5  [emitted]         runtime
                vendors.app.js   619 KiB       6  [emitted]  [big]  vendors.app
 + 1 hidden asset
Entrypoint app = runtime.js commons.app.js vendors.app.js app.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  vendors.app.js (619 KiB)

 WARN  Notice: Please do not deploy bundles built with analyze mode, it's only for analyzing purpose. 
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

Vuetify.jsの公式リファレンスにバンドルサイズを減らす方法が記載されてあるので、そちらにそって実施するのが最適かと思います。

https://vuetifyjs.com/ja/framework/a-la-carte

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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