Compression Vue App

Transcript

1. VueAppのサイズを 小さくした話 大庭周士 (@uzimaru0000)
2. 自己紹介 - 大庭 周士 (@uzimaru0000) - 秋田県にかほ市出身 - 会津大学 学部3年 - 株式会社デザイニウム インターン - 好きな技術 - Vue.js - React - TypeScript - Elm
3. 起こった問題 - 画面の初期描画が遅いらしい - 最初に読み込まれるJSファイルのサイズが22MBあった 考えられる対策 - ファイルを分割する - コードを減らす - GZIP圧縮して配信する
4. やったこと 1. 分割できないか見てみる 2. Report-Build でファイルの内訳を見てみる 3. 使っていないコンポーネントを抜く 4. 圧縮する
5. 分割できないか - VueCli のルーティングのページ単位で分割buildしてくれる機能を使う
6. Report-Buildで内訳を見てみる VueCli の report-build 機能を使う 1. build時に `--report` オプションをつ ける 2. dist/report.htmlにファイルの内訳 が可視化されたものが生成される
7. report-buildで内訳を見てみる
8. 使っていないコンポーネントを抜く - FontAwesome, Element-UI が圧倒 的に容量を食っている - 必要なものだけimportする - FontAwesomeだとこんな感じ →
9. 使っていないコンポーネントを抜く - Element-UIはちょっと面倒 - 一つのファイルから使うコンポーネントだけをimportしてもダメ - element-ui/lib にあるコンポーネントごとのファイルを １つずつ import しないと いけない... - Vue.use も １つずつ しないとダメ - loadingなどの設定も vue.prototype に書かないとダメ
10. ここまででの容量 22MB -> 13MB まで減量
11. GZIP圧縮する - CDNに任せたい - CloudFront だと ~10MBまでしか 配信時に圧 縮をしてくれない - 圧縮をしてからS3にDeployすればGZIPで配 信できる
12. GZIP圧縮する - compression-webpack-plugin を使う - JSファイルだけを圧縮するようにする
13. GZIP圧縮する - S3 に Deploy する - このプロジェクトでは CI で commit ごとのDeployするようにしているので以下の ようなShellScriptを書く
14. ここまででの容量 13MB -> 3.5MB まで減量
15. まとめ - コードを分割する（特にSPAのとき） - npm-scripts に report-build を作っておくと便利 - 使わないコンポーネントはimportしない - GZIP圧縮して配信をする
16. Thank you for listening