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
490
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
250
Making mock-up in web application
kusamao
0
93
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
Effect の双対、Coeffect
yukikurage
4
1.3k
從零到一:搭建你的第一個 Observability 平台
blueswen
1
830
ReadMoreTextView
fornewid
0
260
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
240
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.7k
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
740
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
110
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
200
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
480
PT AI без купюр
v0lka
0
230
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
110
無関心の谷
kanayannet
0
160
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building an army of robots
kneath
306
45k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
How STYLIGHT went responsive
nonsquared
100
5.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Visualization
eitanlees
146
16k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
900
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
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だけにしたほうが色々考えなくて済む気はする