Front-end Engineer at LINE KYOTO
こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。 みなさんは仕事中などにパソコンで音楽を聴くことはありますか? LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。 私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パフォーマンスといっても様々な側面がありますが、その中でもバンドルサイズの肥大化が大きな課題でした。アプリを構成する js と css のバンドルサイズは6MB。Sentry というモニタリングツールでWeb版アプリへのアクセスを計測すると、表示に2秒以上かかっているアクセスが約半数に達していました。 私たちはリファクタリングを進め、依存パッケージの整理を行うなどサイ