Compression Vue App

Compression Vue App

9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=128

uzimaru0000

August 17, 2019
Tweet

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 にあるコンポーネントごとのファイルを 1つずつ import

    しないと いけない... - Vue.use も 1つずつ しないとダメ - 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