Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue builds
Search
Kusamao Abe
September 18, 2019
Programming
1
520
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
96
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
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
300
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
390
新卒エンジニアのプルリクエスト with AI駆動
fukunaga2025
0
200
WebRTC と Rust と8K 60fps
tnoho
2
1.9k
FluorTracer / RayTracingCamp11
kugimasa
0
220
AWS CDKの推しポイントN選
akihisaikeda
1
240
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
hasibirok0
0
230
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
agatan
2
7k
sbt 2
xuwei_k
0
260
Context is King? 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
rkaga
8
1.1k
SwiftUIで本格音ゲー実装してみた
hypebeans
0
110
React Native New Architecture 移行実践報告
taminif
1
150
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
Navigating Team Friction
lara
191
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Become a Pro
speakerdeck
PRO
31
5.7k
Context Engineering - Making Every Token Count
addyosmani
9
490
A Modern Web Designer's Workflow
chriscoyier
698
190k
Raft: Consensus for Rubyists
vanstee
141
7.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Code Reviewing Like a Champion
maltzj
527
40k
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だけにしたほうが色々考えなくて済む気はする