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
440
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
360
BrainFuckをつくった
uzimaru0000
0
510
Elmで作るCLI
uzimaru0000
0
130
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
190
好きなライブラリ_OSS
uzimaru0000
0
230
Other Decks in Programming
See All in Programming
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
860
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
940
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
130
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Writing Fast Ruby
sferik
628
62k
What's in a price? How to price your products and services
michaelherold
246
12k
Docker and Python
trallard
44
3.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
KATA
mclloyd
30
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Navigating Team Friction
lara
187
15k
Fireside Chat
paigeccino
37
3.5k
Become a Pro
speakerdeck
PRO
29
5.4k
Building Applications with DynamoDB
mza
95
6.5k
Why Our Code Smells
bkeepers
PRO
336
57k
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