[JS] iOS Safari10 だけで発生する Loading chunk {n} failed に苦しめられた話

およそ3時間くらい苦しめられた。

iOS10系は2016年リリース、それが搭載されてたのはiPad第４世代。
iPad第４世代は2012年〜2014年に発売されてたものでかなり古い端末です。
現時点の最新バージョンはiOS12で、iOS10は2%未満くらいのシェアになるようす。（caniuse.com）

で、iOS10系にはバグが2つありました。

UglifyJS等minifyされたコードで発生するもの

最上位のforループ反復変数をパラメータと同じように宣言すると誤って構文エラーを投げる

let e = e => {
    console.log(e);
    for (let e of [1, 2, 3])
        console.log(e);
};

もしUglifyJsを利用中にエラーが出た場合は、設定に以下追加するといいでしょう。

mangle: {
 safari10: true
}

ES6で書かれたコードで発生するもの

Babelでトランスパイラしている場合はbabelがよしなに変換してくれますが、
通常はnode_modulesを対象外にしているケースが殆どです。
そのライブラリの中にES6のべき乗（a ** b）が使われていると、Safari10は解釈できずにエラーを吐きます。
私はこれをSwiperの利用中に知りました。

設定はBableのexcludesに対象となるライブラリを追加することです。
以下にSwiperでの例を載せておきます：

exclude: [/node_modules\/(?!(swiper|dom7)\/).*/, /\.test\.jsx?$/],

※dom7は依存ライブラリ

Nuxtの場合はnuxt.config.jsに以下追加すればおk。

build: {
  transpile: [/node_modules\/(dom7|swiper)\/.*/],
}