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
410
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
210
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
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
유연한 Composable 설계
l2hyunwoo
0
380
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
CSC307 Lecture 12
javiergs
PRO
0
220
AHC035解説
terryu16
0
710
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
How to name files
jennybc
67
96k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
We Have a Design System, Now What?
morganepeng
46
7k
How GitHub (no longer) Works
holman
305
140k
KATA
mclloyd
20
13k
Teambox: Starting and Learning
jrom
130
8.6k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Agile that works and the tools we love
rasmusluckow
325
20k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
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だけにしたほうが色々考えなくて済む気はする