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
470
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
81
Keep a distance from jQuery
kusamao
0
120
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
Ruby on cygwin 2025-02
fd0
0
130
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.1k
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
5.1k
ARA Ansible for the teams
kksat
0
120
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
160
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
振り返れば奴(Cline)がいる
keiyagi
0
180
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
3.7k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
350
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
170
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.2k
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
340
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Automating Front-end Workflow
addyosmani
1367
200k
RailsConf 2023
tenderlove
29
990
Git: the NoSQL Database
bkeepers
PRO
427
64k
How STYLIGHT went responsive
nonsquared
98
5.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
930
Code Review Best Practice
trishagee
66
17k
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だけにしたほうが色々考えなくて済む気はする