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
460
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
240
Making mock-up in web application
kusamao
0
78
Keep a distance from jQuery
kusamao
0
110
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
Amazon S3 NYJavaSIG 2024-12-12
sullis
0
110
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
160
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
350
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
200
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
2
130
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
300
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
260
Online-Dokumentation, die hilft: Strukturen, Prozesse, Tools
ahus1
0
100
MCP with Cloudflare Workers
yusukebe
2
220
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
570
useSyncExternalStoreを使いまくる
ssssota
6
1.4k
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
350
Featured
See All Featured
Code Review Best Practice
trishagee
65
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.4k
The Language of Interfaces
destraynor
154
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Code Reviewing Like a Champion
maltzj
521
39k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Music & Morning Musume
bryan
46
6.2k
Bash Introduction
62gerente
609
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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だけにしたほうが色々考えなくて済む気はする