Nuxtのinjectが肥大化すると動作は重くなるか

Question

背景

自分は普段、APIなどの外部処理や、そのほかよく使う処理などはinjectにまとめるようにしています。
firebaseのfirestoreをあれこれしたり、awsのamplifyでAPIを叩いたりなどの外部sdkを使う場合です。
個人的には毎回storeファイルやpageファイルでそれらのライブラリをインポートしたり、amplifyのgraphqlAPIならgraphqlの文字列を読み込んだりするのが面倒だしボイラーテンプレートっぽいものでstoreやpageが肥大化するので、injectに分けることによって見やすく管理しやすくなるんじゃないかなあと思ってそうしています。

聞きたいこと

そこで疑問に思ったのは、injectによって開発効率は（個人的には）あがるんですが、パフォーマンスには何か影響があるのかなということです。
確かにライブラリや外部ファイルのインポートは一か所にまとまるのですが、逆にそれらをpluginsでまとめて最初に読み込んでしまうと重くなってしまわないかということです。
アプリケーションが動く裏側の仕組みがよくわかってないので、変なことを言っていたら申し訳ありません…

例えば、
pageA => ライブラリ1, ライブラリ2, 外部ファイル1
pageB => ライブラリ1
pageC => ライブラリ3, 外部ファイル2
という風にそれぞれのページで必要だとして、
injectを使わない場合、 仮にユーザーがpageAtとpageBしか訪れないとしたら「ライブラリ3」と「外部ファイル2」は読み込まなくて済みますが、
injectを使っていると pageCに訪れないユーザーにも「ライブラリ3」と「外部ファイル2」を読み込ませてしまう。

ということになるんでしょうか？
もしそうだとしたら、injectにあまり切り分けすぎるのもよくないということになりますか？
抽象的な質問でしたら申し訳ございません。また、タグの webpack も、関係あるのかなと思ってつけましたが無関係だったらすみません。

つまり、injectを使うことに何かデメリットがあれば教えていただきたいです…！

Answer 1

質問に書かれている認識で問題ないかと思います。
yarn nuxt build --analyze でwebpackによってどのようにファイルが分けられたかなどを確認できるのでしてみると良いと思います。
https://ja.nuxtjs.org/api/configuration-build/

この辺りそこまで知見があるわけではないので間違えていたらすみません。

buildプロパティで設定はできるのですが、通常はNuxtでは各ページのJSと共通のJSで分けられます。
injectを使えば共通のほうになり、確かに使わないページでも読み込んでしまうデメリットがありますが、例であるpageAとpageBで同じライブラリであるライブラリ1を別々で読み込まないというメリットもあります。
これらは Webpack の Code Splitting と呼ばれる機能の話なので調べてみると良いと思います。

Comments

[hajifu]

大変遅くなってしまい失礼いたしました！ありがとうございます！