Vue3の練習用アプリケーション作成のmemo:

この教材を参考にしながらvue3のアプリケーションを構築していく。

Architecting Vue.js3 enterprise ready web applications

教材だけだとちゃんと動くアプリケーションが完成しないっぽいので、そこは自力でなんとかやってみる。
あとは教材みて気になったことをメモる。

一旦できてないけどcloseします。1/21

github: https://github.com/shu-suzuki-1124/fake-pinterest

■パフォーマンスがビジネスに与える影響についての記事

• https://kinsta.com/blog/laravel-caching/.
• https://kinsta.com/learn/page-speed/#slow-how-slow
• https://www.thinkwithgoogle.com/future-of-marketing/digital-transformation/the-google-gospel-of-speed-urs-hoelzle/

■vueのアプリーケーションが遅くなる原因

• CSSファイルやJSファイルを適切に構造化していない
• サードパーティのライブラリを賢く使用していない
• APIリクエストへの不要なヒット
• コード分割や遅延ロードの見落とし
  etc....

■バンドルサイズを確認する

npm install webpack-bundle-analyzer
"build-report": "vue-cli-service build --report" // package.json
npm run build-report

buildコマンドでもある程度見れる

■非同期/遅延コンポーネントロード

• 検証ツールでのcoverageをみる
• webpack/viteでのの動的import

■画像の圧縮

• 画像の最適化はCDNと圧縮

■コードの分離

• コードを適切に分離することで、オンデマンド or 並列でロードできる
• ここでもダイナミックimportが有効。こうすると遅延ロードできる

const routes = [
  { path: '/', component: () => import('./Dashboard.vue') }
  { path: '/photo, component: () => import('./Photo.vue') }
]