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