Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Compression Vue App
Search
uzimaru0000
August 17, 2019
Programming
0
130
Compression Vue App
uzimaru0000
August 17, 2019
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
170
git入門
uzimaru0000
1
340
Webフロントエンド入門
uzimaru0000
1
450
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
360
BrainFuckをつくった
uzimaru0000
0
520
Elmで作るCLI
uzimaru0000
0
140
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
190
好きなライブラリ_OSS
uzimaru0000
0
230
Other Decks in Programming
See All in Programming
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
Cache Me If You Can
ryunen344
2
3k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
Reading Rails 1.0 Source Code
okuramasafumi
0
250
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
OSS開発者という働き方
andpad
5
1.7k
Kiroで始めるAI-DLC
kaonash
2
620
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Music & Morning Musume
bryan
46
6.8k
Thoughts on Productivity
jonyablonski
70
4.8k
BBQ
matthewcrist
89
9.8k
Context Engineering - Making Every Token Count
addyosmani
3
58
Git: the NoSQL Database
bkeepers
PRO
431
66k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Transcript
VueAppのサイズを 小さくした話 大庭周士 (@uzimaru0000)
自己紹介 - 大庭 周士 (@uzimaru0000) - 秋田県にかほ市出身 - 会津大学 学部3年
- 株式会社デザイニウム インターン - 好きな技術 - Vue.js - React - TypeScript - Elm
起こった問題 - 画面の初期描画が遅いらしい - 最初に読み込まれるJSファイルのサイズが22MBあった 考えられる対策 - ファイルを分割する - コードを減らす
- GZIP圧縮して配信する
やったこと 1. 分割できないか見てみる 2. Report-Build でファイルの内訳を見てみる 3. 使っていないコンポーネントを抜く 4. 圧縮する
分割できないか - VueCli のルーティングのページ単位で分割buildしてくれる機能を使う
Report-Buildで内訳を見てみる VueCli の report-build 機能を使う 1. build時に `--report` オプションをつ ける
2. dist/report.htmlにファイルの内訳 が可視化されたものが生成される
report-buildで内訳を見てみる
使っていないコンポーネントを抜く - FontAwesome, Element-UI が圧倒 的に容量を食っている - 必要なものだけimportする - FontAwesomeだとこんな感じ
→
使っていないコンポーネントを抜く - Element-UIはちょっと面倒 - 一つのファイルから使うコンポーネントだけをimportしてもダメ - element-ui/lib にあるコンポーネントごとのファイルを 1つずつ import
しないと いけない... - Vue.use も 1つずつ しないとダメ - loadingなどの設定も vue.prototype に書かないとダメ
ここまででの容量 22MB -> 13MB まで減量
GZIP圧縮する - CDNに任せたい - CloudFront だと ~10MBまでしか 配信時に圧 縮をしてくれない -
圧縮をしてからS3にDeployすればGZIPで配 信できる
GZIP圧縮する - compression-webpack-plugin を使う - JSファイルだけを圧縮するようにする
GZIP圧縮する - S3 に Deploy する - このプロジェクトでは CI で
commit ごとのDeployするようにしているので以下の ようなShellScriptを書く
ここまででの容量 13MB -> 3.5MB まで減量
まとめ - コードを分割する(特にSPAのとき) - npm-scripts に report-build を作っておくと便利 - 使わないコンポーネントはimportしない
- GZIP圧縮して配信をする
Thank you for listening