grow-loader: methodレベルのcode-splitting -

grow-loaderってなに

grow-loaderの紹介記事はここにあります。　https://engineering.linecorp.com/ja/blog/detail/235

簡単に言うと、code-splittingは普段component レベル(HOC)でやってますが、grow-loaderを使うと、method レベルまでできて、より簡単に、よりフレキシブルに分割できそうです。

grow-loaderホームページはこちら: https://github.com/line/grow-loader

使い方は？

例えばこんなclsss：

class SampleClass {

    method() {
        // ...
    }

    methodBind = () => {
        // ...
    }

    method2(){

    }
}

grow-loaderをwebpack configに入れたら、分割したいmethodにdecoratorをつけるだけ

class SampleClass {

    @grow
    method() {
        // ...
    }

    @grow
    methodBind = () => {
        // ...
    }

    method2(){

    }
}

これえmethod()とmethodBind()は切り出される。

const sample = new SampleClass();
console.assert(sample.method === undefined)
console.assert(sample.methodBind === undefined)
console.assert(typeof sample.method2 === 'function')

切り出したmethodを使いたかったら、grow()を実行する。dynamic importされます。

const sample = new SampleClass();
sample.grow().then(() => {
console.assert(typeof sample.method === 'function')
console.assert(typeof sample.methodBind === 'function')
})

なにが起きてる？

grow-loaderは事前class methodのdecoratorを検知し、methodを切り出してgrow()をつけてる。
grow()の中ではimport()を使い、webpackのdynamic importをそのまま利用する。

効果は?

LINEエンジニアブログによると、ファイルの切り出しにはこまめにしてるので、普通の実装に勝てないが、methodレベルにしてるので、長いページを二段階描画にすることができて結構いい感じになった。

fmfm