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
Vue builds
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kusamao Abe
September 18, 2019
Programming
1
530
Vue builds
Kusamao Abe
September 18, 2019
Tweet
Share
More Decks by Kusamao Abe
See All by Kusamao Abe
Javascript in the past and now
kusamao
1
170
The Essence of UI Design
kusamao
1
1.9k
Make good (better) form
kusamao
0
260
Making mock-up in web application
kusamao
0
98
Keep a distance from jQuery
kusamao
0
130
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
AI & Enginnering
codelynx
0
110
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.2k
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.6k
Fluid Templating in TYPO3 14
s2b
0
130
AgentCoreとHuman in the Loop
har1101
5
230
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
170
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
2.5k
Grafana:建立系統全知視角的捷徑
blueswen
0
330
Package Management Learnings from Homebrew
mikemcquaid
0
220
Featured
See All Featured
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
200
4 Signs Your Business is Dying
shpigford
187
22k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
120
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
180
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Designing Powerful Visuals for Engaging Learning
tmiket
0
230
The SEO Collaboration Effect
kristinabergwall1
0
350
How Software Deployment tools have changed in the past 20 years
geshan
0
32k
It's Worth the Effort
3n
188
29k
ラッコキーワード サービス紹介資料
rakko
1
2.3M
Six Lessons from altMBA
skipperchong
29
4.1k
Into the Great Unknown - MozCon
thekraken
40
2.3k
Transcript
Vue.jsのビルドの種類 v-kansai Vue.js Nuxt.js Meetup #10 at tambourine commune 2019-09-18
はじめに:自己紹介 安部 草麻生 エンジニア/テクニカルディレクター
みなさんはVue.jsの環境って どう作ってますか?
環境の作り方 ・vue-cliを利用する ・手で一個ずつ $ npm install ・CDNを利用する
環境の作り方 ・webpackを使う ・browserifyなど、他の依存解決ツールを使う ・CDNを利用する
vue-cliを使っていると目にする Runtime + Compilerとは?
Runtime + Compiler https://jp.vuejs.org/v /guide/installation.html#さまざまなビルドについて
Runtime + Compiler Compiler テンプレート文字列をレンダリングするためのもの ・templateオプション ・elオプション に必須
Runtime + Compiler Runtime Compiler以外のコード群
Compilerが必要ない場面って?
Compilerが不要な場面 すべてVue Componentを利用できる場合 → 必要な情報はWeb APIなどから取得 → もしくはJSON形式でテンプレートに埋め込む → テンプレート自体に情報が埋め込まれない
Compilerが不要な場面 Runtime onlyビルドの場合、完全ビルドに比べて ファイルサイズは30%ほど軽量
ビルドに気をつけなきゃいけないとき
ビルドに気をつける import/requireでnpm経由のパッケージを 利用する場合、パスはそのパッケージの package.jsonのmainの項目を参照する Vueのmainは dist/vue.runtime.common.js
ビルドに気をつける Runtimeのみのビルドが利用されてしまうので、 Compilerが必要な場合に困る! → いやふつう気づくでしょ
ビルドに気をつける Componentのほうでうっかり手癖で const Vue = require(‘vue’); していると、なぜか動くところと動かないところが 混在することになる
ビルドに気をつける 2時間くらいああでもないこうでもない ってしてたんですよ Vue.set() とか使ってみたりして……
Runtimeだけにしたほうが色々考えなくて済む気はする