レガシーブラウザと向き合う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

レガシーブラウザと向き合うNuxt.js

  • 7,207