レガシーブラウザと向き合うNuxt.js
自己紹介
大脇健吾（わっぴー）
面白法人カヤック
技術部 Lobiチーム
@kengotoiro
様々なゲームの情報交換やユーザー同士の交流を楽しむ
ゲーム好きが集まるコミュニティサービス。
WEB、iOS、Androidアプリがあります。
Lobiとは
Lobi Web版の改修
Angular 1.4
Nuxt 2.3.4
パフォーマンス改善面は良好
Angular版
Nuxt版
レガシーブラウザへの配慮
レガシーブラウザへの対応は必要ですか？
辛かったこと
・Nuxtが1系→2系の移行期だった
・ドキュメントがまだ1系だった
・build時のプラグイン周りが結構変わっていた
・最新のドキュメントを意識するの大事！
・リリースノートを見る！
・どんなプラグインが走っているのか知っておく
反省点
こんなことを話します
・build時にどんなプラグインが使われているのか
・機能拡張する際はどうすれば良いか
・よりラクにブラウザ対応をするための方法
postcss-preset-env
デフォルトの設定で下記が有効になっている。
・autoprefixer
・Stage 2 features
基本はこいつに任せてしまえばOK！
CSSについて
対象ブラウザの範囲を設定する場合は、
browserlistをpackage.jsonに記入することで設定できる。
"browserlist": [
"last 2 versions",
"ie 11"
]別途設定が必要なものがある場合は、
nuxt.config.jsに指定する
build: {
postcss: {
plugins: {
'post-css-preset-env' : {
autoprefixer: { grid: true }
}
}
}
}
※デフォルトではfalseになっているのでtrueにする必要がある
@babel/preset-env
デフォルトの設定
build時にjsをコンパイルしてくれる
JSについて
CSS同様package.jsonに記述した
browserlistで対象範囲を設定できる
これだけではブラウザによっては
動かないものもあります。
Polyfillが必要！
BabelとPolyfillの違い
Babel
新しい構文で書かれたものをレガシーブラウザでも動くように変換する
ex. class構文、アロー関数、const、let など
Polyfill
新しい機能をレガシーブラウザで動くように変換する
ex. Promise, symbol, intersection observer など
Polyfill.io
Polyfill.ioのおすすめポイント
設置がラク
nuxt.config.js のhead部分に追記するだけでOK！
head: {
script: [
{
src: 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'
}
]
}features以降にpolyfillを適用させたい範囲を指定できます。
この機能だけ効かせたいというピンポイントな指定からes5〜のような広範囲の指定も可能
Polyfill.ioのおすすめポイント
Nuxtの仕様変更に消耗しない
Polyfill.ioのおすすめポイント
ブラウザ毎に差分のPolyfillを返してくれる
Safari
Chrome
必要な分だけ返している！！
モダンブラウザは読み込み量が減る
レガシーブラウザでもきちんと動作する
😇
まとめ
・CSS
・JavaScript
@babel/preset-envがコンパイルしてくれる
PolyfillはPolyfill.ioを使うとラクに設定できる
postcss-preset-envがよしなにやってくれる
別途機能拡張するときはnuxt.conig.jsに書く
Lobiに興味がある方はこちらから
レガシーブラウザと向き合うNuxt.js
By Kengo Oowaki