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
110
Compression Vue App
uzimaru0000
August 17, 2019
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
150
git入門
uzimaru0000
1
290
Webフロントエンド入門
uzimaru0000
1
410
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
340
BrainFuckをつくった
uzimaru0000
0
360
Elmで作るCLI
uzimaru0000
0
120
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
160
好きなライブラリ_OSS
uzimaru0000
0
200
Other Decks in Programming
See All in Programming
Git Lint
bkuhlmann
4
750
エンターテイメント業界で利用されるAWS
demuyan
0
210
Git Rebase
bkuhlmann
11
1.6k
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
330
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
100
Let's learn code review
riofujimon
1
270
ONE WEDGE_company_guide
1wedge_one
0
480
PHPはいつから死んでいるかの調査
chiroruxx
1
400
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
190
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Writing Fast Ruby
sferik
621
60k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Code Reviewing Like a Champion
maltzj
514
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
KATA
mclloyd
15
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Automating Front-end Workflow
addyosmani
1356
200k
Embracing the Ebb and Flow
colly
80
4.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Visualization
eitanlees
136
14k
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