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
Kusamao Abe
September 18, 2019
Programming
1
430
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
160
The Essence of UI Design
kusamao
1
1.9k
Make good (better) form
kusamao
0
220
Making mock-up in web application
kusamao
0
71
Keep a distance from jQuery
kusamao
0
100
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
App Router 悲喜交々
quramy
7
370
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
120
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
3
130
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
850
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
320
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
5
210
タイミーにおけるデータの利用シーンと データ基盤の挑戦
marufeuille
4
3.1k
AWS認定資格を受験するにあたり、気づいたこと・実践していたことのまとめ
satoshi256kbyte
1
120
CSC305 Lecture 01
javiergs
PRO
1
140
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
110
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
130
コードレビューと私の過去と未来
jxmtst
0
140
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Thoughts on Productivity
jonyablonski
67
4.2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Optimizing for Happiness
mojombo
375
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
91
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Writing Fast Ruby
sferik
625
60k
Six Lessons from altMBA
skipperchong
26
3.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Into the Great Unknown - MozCon
thekraken
30
1.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Web development in the modern age
philhawksworth
205
10k
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だけにしたほうが色々考えなくて済む気はする