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
350
Elmで作るCLI
uzimaru0000
0
120
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
160
好きなライブラリ_OSS
uzimaru0000
0
200
Other Decks in Programming
See All in Programming
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
7
5.9k
So You Think You Know Git - Part 2
schacon
PRO
0
1.3k
私がエッジを使う理由
chimame
9
3.6k
上手な探索的テストとその上達方法について
matsu802
1
430
Learning PHP and Static Analysis with PHP Parser
inouehi
1
220
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
700
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
5
440
マイ隙間家具OSSたちのご紹介
karupanerura
2
130
Flutterアプリを GitHub Actions & Xcode Cloud で社内配布する / Distribute Flutter apps internally
takasfz
0
130
mandaRa: R言語ユーザのための新しい知識共有の場 / mandara_tokyor111
s_uryu
2
410
WasmOS: Wasmを実行する自作Microkernel
riru
0
360
まっちすいっち戦争 / match vs switch
takuyakatsusa
1
630
Featured
See All Featured
Practical Orchestrator
shlominoach
180
9.6k
Why Our Code Smells
bkeepers
PRO
330
56k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.5k
For a Future-Friendly Web
brad_frost
170
8.8k
Faster Mobile Websites
deanohume
296
30k
A better future with KSS
kneath
230
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
11
1.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Git: the NoSQL Database
bkeepers
PRO
421
63k
Building Effective Engineering Teams - LeadDev
addyosmani
25
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