vue[packaged chunk-vendors.xxx.js file is too large, vue project performance optimization solutions, front-end performance optimization knowledge summary].

このコンテンツは2M程度のサイズしかないように見えますが、オンラインでは読み込みに10秒以上かかるようで、プロジェクトとしては非常に問題です。そこで、解決策としては、以下のようになります。
まず、このファイルがなぜ大きいのかを知る必要があります。chunk-vendors.xxx.jsは、インポートしたelmentUI、echarts、vue、vue-routerなど、さまざまな関連依存関係の関係を保持するファイルです。

vueプロジェクトにおけるパフォーマンス最適化ソリューション

1. Gzip圧縮を有効にする

https://blog.csdn.net/qq_31677507/article/details/102742196

2. ルーティング・レイジーローディング（オンデマンドローディング）

3. 画像サイズの圧縮、コードスペースの圧縮

// Use webpack-bundle-analyzer to check the size and speed of the various dependencies loaded by the package
cnpm install webpack-bundle-analyzer --save-dev

// Install uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
// Use Baidu specifically

4. 4. プラグインを使用して、コンソール、警告、デバッガなどの無駄なコンテンツを削除し、ファイルサイズを縮小する。

// Modify vue.config.js to separate out less common libraries
module.exports = {
 configureWebpack: config => {
  if (process.env.NODE_ENV === "production") {
   config.externals = { // libraries that will not be packaged
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'moment': 'moment'
   }
  }
 }
}
// Then load the index.html in the public folder using cdn
<! -- CDN -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

5. 一部のプラグインはCDNによるリソースの読み込みを可能にする

変更の可能性が低いコードやライブラリを分離し、個々のチャンクベンダーを削減し続け、CDNローディングによってリソースをより速くロードします。

// Modify vue.config.js to separate out less common libraries
module.exports = {
 configureWebpack: config => {
  if (process.env.NODE_ENV === "production") {
   config.externals = { // libraries that will not be packaged
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'moment': 'moment'
   }
  }
 }
}
// Then load the index.html in the public folder using cdn
<! -- CDN -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

に関連する実装のおすすめ参考ブログです。
1. https://www.jianshu.com/p/aebfa267f7cd
2. https://www.jb51.net/article/150533.htm
3. https://blog.csdn.net/weixin_42604828/article/details/93324751
4. https://blog.csdn.net/D102601560/article/details/109025683

フロントエンドのパフォーマンス最適化に関する知識のまとめ

1. httpリクエストを減らす。例：css、jsをマージする。

2. キャッシュ機能を合理的に利用する。例えば、一般的な画像やCSS・JSリソースのキャッシュなど

3. コンテンツのレンダリング順序を合理化する。例：cssを先に、jsを最後に、一部のリソースはオンデマンドで読み込む。

4. リソースの圧縮と結合 例えば、画像やjs・cssリソースの圧縮など

5. Cookieの使用を減らす。例：サーバーとブラウザの間でCookieが受け渡され、リソースの無駄遣いになっている

6. コードレベルの最適化：例）クロージャや再帰の使用を最小限にする、DOM操作を減らす、ネストされたループやデッドループを避ける、できるだけ低結合、高結合のコードを書く、タイマーのタイムリーなクリーンアップに注意を払う、cssでできるアニメーションにはjsを使わない、などなど。