web-dev-qa-db-ja.com

jsファイルをvue cli 3 with webpack performance objectでチャンクに分割する方法は？

vue cli v3。を使用してプロジェクトを実行しました。プロジェクトをビルドした後、2つの警告が表示されました。

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.

Assets:

  js/chunk-vendors.2557157d.js (474 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 (617 KiB)

      js/chunk-vendors.2557157d.js

      css/app.821fcb13.css

      js/app.b5a47a94.js

検査の結果、webpack configに以下を追加すると、

performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
}

その後、jsファイルが自動的に小さなチャンクに分割されます。これでvue cli 3にはwebpack.configファイルがありません。

そのため、これがどのように実装されているかをガイドして、ファイルが制限を超えたときにファイルが自動チャンクされるようにすることができれば、非常に役立ちます。

これは私が見た場所です： https://github.com/webpack/webpack/issues/3486#issuecomment-397915908

お返事を楽しみにしています。

追伸： this を読み、vue.config.jsファイルを作成して、ファイル内に以下を追加しようとしました

module.exports = {
  configureWebpack: {
    performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
    }
  }
}

しかし、それは何もしませんでした。私のjsファイルチャンクがvueで推奨サイズを超えないようにするにはどうすればよいですか？

更新

Linus Borgの答えに従って、次のコードの両方をvue.config.jsファイル。 1をお試しください：

module.exports = {
  configureWebpack: {
    splitChunks: {
            minSize: 10000,
            maxSize: 250000,
        }
  }
}

および2をお試しください：

module.exports = {
  configureWebpack: {
        splitChunks: {
            cacheGroups: {
                node_vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 1
                }
            }
        }
  }
}

その両方の後、私は本番用にプロジェクトを構築しました。サイズを変更せずに同じ警告が表示されました： https://i.imgur.com/7Hp7SXC.jpg どの変更も変更に影響していないようです。助けがありますか？

webpackvue.jsvue-cli
9
iSaumya

vue.config.jsファイルに追加された次のものは、npm run build @ vue/cliプロジェクト（バージョン3.0.4）の場合。

module.exports = {
  configureWebpack:{
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}

警告を非表示

module.exports = {
  configureWebpack:{
    performance: {
      hints: false
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}
8
tbonz

リンクしたissuコメントを読み間違えたために、変更した設定を誤解しています。

これらは、Webpackにチャンクを分割する方法とタイミングを指示するnot制限であり、コンソールに警告が表示される制限を定義するだけです。

本当に必要なのは、 splitChunks の設定を変更することです。残念ながら、このオプションは初心者向けに設定するのがかなり複雑なので、実際にどのように機能するかをよりよく理解するために この記事 をお勧めします。

ただし、この記事で扱っていないのは、最近のバージョンでは、新しい[ 実験オプション がsplitChunks：maxSizeに追加されたことです。

次のように動作するはずです。

configureWebpack: {
    optimization: {
        splitChunks: {
            minSize: 10000,
            maxSize: 250000,
        }
    }
}

実験的であるため、splitChunks.cacheGroupsを使用して異なるチャンクに異なる依存関係を手動で配置することにより、サイズ制限を超えないチャンクを作成するように分割チャンクを構成する方がより信頼できる方法です。

8
Linus Borg

これは私の設定ファイルであり、私のプロジェクトで動作します。試してください。

module.exports = {
    configureWebpack: {
        performance: {
            hints: "warning", // enum
            maxAssetSize: 1048576, // int (in bytes),
            maxEntrypointSize: 1048576, // int (in bytes)
        }
    }
}
0
MuteG