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
130
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
190
好きなライブラリ_OSS
uzimaru0000
0
230
Other Decks in Programming
See All in Programming
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
旅行プランAIエージェント開発の裏側
ippo012
2
830
AIコーディングAgentとの向き合い方
eycjur
0
250
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
400
AI時代のUIはどこへ行く?
yusukebe
13
7.6k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
480
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
tool ディレクティブを導入してみた感想
sgash708
1
160
Improving my own Ruby thereafter
sisshiki1969
1
150
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
670
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
160
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Site-Speed That Sticks
csswizardry
10
810
Designing Experiences People Love
moore
142
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Into the Great Unknown - MozCon
thekraken
40
2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
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