Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue builds

Kusamao Abe
September 18, 2019
Programming
1
280

Vue builds

Kusamao Abe

September 18, 2019
Tweet

More Decks by Kusamao Abe

See All by Kusamao Abe
Javascript in the past and now
kusamao
1
110
The Essence of UI Design
kusamao
1
1.8k
Make good (better) form
kusamao
0
130
Making mock-up in web application
kusamao
0
55
Keep a distance from jQuery
kusamao
0
88
Using Heroku on entrusted development
kusamao
0
950

Other Decks in Programming

See All in Programming
わかった気になれる CRDT を使った共同編集
kentomoriwaki
1
320
RDRAとDDDでGoのモジュラーモノリスアプリを設計してみた話
imamotohikaru
1
560
フラットなPHPからオブジェクト指向で自動テストのあるPHPへ、そしてフレームワークへ #phpcon2022
77web
1
810
Angular's Future without NgModules: Architectures with Standalone Components
manfredsteyer
PRO
0
270
Drupal 10 from the pov of a Symfony 6 core-contributor
nicolasgrekas
1
310
Xcode が遅い! とにかく遅い!! 遅い Xcode をなんとかする方法
niw
0
1.2k
iOSのウィジェットでも猫走らせたい / iOSDC Japan 2022 Day2 Unconference
kyome22
3
520
ローンチから16年目のWebサービスに、どうやってフィーチャートグルを導入したか、運用しているか / phpcon2022
meihei3
1
540
スクールでPHPとLaravelを学んでSymfonyの会社に就職してみた
kunihikokitamura
0
150
フィーチャートグルを 使って素早く価値を検証する 早く安全に失敗し学ぶために
akki_megane
0
600
iOS15からのCommunication NotificationとSiri
matsuji
2
560
iOS ライブラリをセルフサービスで生成する仕組み
junkpiano
2
410

Featured

See All Featured
Teambox: Starting and Learning
jrom
124
7.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
What the flash - Photography Introduction
edds
64
10k
Designing with Data
zakiwarfel
91
4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
The Power of CSS Pseudo Elements
geoffreycrofte
48
4k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.6k
Statistics for Hackers
jakevdp
782
210k
Six Lessons from altMBA
skipperchong
15
1.5k
Building an army of robots
kneath
300
40k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k

Transcript

  1. Vue.jsのビルドの種類 v-kansai Vue.js Nuxt.js Meetup #10 at tambourine commune 2019-09-18

  2. はじめに：自己紹介 安部 草麻生 エンジニア/テクニカルディレクター

  3. みなさんはVue.jsの環境って どう作ってますか？

  4. 環境の作り方 ・vue-cliを利用する ・手で一個ずつ $ npm install ・CDNを利用する

  5. 環境の作り方 ・webpackを使う ・browserifyなど、他の依存解決ツールを使う ・CDNを利用する

  6. vue-cliを使っていると目にする Runtime + Compilerとは？

  7. Runtime + Compiler https://jp.vuejs.org/v /guide/installation.html#さまざまなビルドについて

  8. Runtime + Compiler Compiler テンプレート文字列をレンダリングするためのもの ・templateオプション ・elオプション　　　　　に必須

  9. Runtime + Compiler Runtime Compiler以外のコード群

  10. Compilerが必要ない場面って？

  11. Compilerが不要な場面 すべてVue Componentを利用できる場合 → 必要な情報はWeb APIなどから取得 → もしくはJSON形式でテンプレートに埋め込む → テンプレート自体に情報が埋め込まれない

  12. Compilerが不要な場面 Runtime onlyビルドの場合、完全ビルドに比べて ファイルサイズは30%ほど軽量

  13. ビルドに気をつけなきゃいけないとき

  14. ビルドに気をつける import/requireでnpm経由のパッケージを 利用する場合、パスはそのパッケージの package.jsonのmainの項目を参照する Vueのmainは dist/vue.runtime.common.js

  15. ビルドに気をつける Runtimeのみのビルドが利用されてしまうので、 Compilerが必要な場合に困る！ → いやふつう気づくでしょ

  16. ビルドに気をつける Componentのほうでうっかり手癖で const Vue = require(‘vue’); していると、なぜか動くところと動かないところが 混在することになる

  17. ビルドに気をつける 2時間くらいああでもないこうでもない ってしてたんですよ Vue.set() とか使ってみたりして……

  18. Runtimeだけにしたほうが色々考えなくて済む気はする