そんな今日この頃の技術ネタ

本家側に書くほどでもない小ネタ用

webpackのビルドが尋常じゃなく長い→不必要な遅延読み込み処理をやめたら改善した

あまりフロントエンドには明るくない+チームもそこまでフロントに力を入れてる人がいないという感じなんで厳密さには欠けるネタかもしれないけどご勘弁を。


現象

Vue Adminをベースとした管理画面開発を行っている案件。

github.com


先に述べたようにあまりSPAに明るいチームではないので手探りで開発していたのだけど、気付いたらビルド時間が20分近くもかかるようになっていた。

具体的には

91% additional asset processing

の箇所がやたらと時間を食っている模様。


ファイル数が多くなってきたというのもあるし、ググれば「ビルド時間かかる」系の話は色々引っかかるけれど、それにしたって長過ぎる。

流石にこれは今後の作業に差し支えるなということで調査をしてみた。


遅延読み込み処理

世間ではそこまで時間がかかっていないということは、おそらく作法的によろしくない書き方をしている箇所の問題だろうとあたりをつけて色々いじってみた。

結果は、タイトルにも書いたが以下のような遅延読み込みの処理が問題だったようだ。

(これ参考に作ってた> https://github.com/vuejs/vue-router/blob/dev/examples/lazy-loading/app.js#L8

const component = () => import('./hogehoge.js')

運用上どんどん増えていくコンポーネントをクソ真面目に全部import hogehoge from 'hogehoge'するのは面倒だなと思って、配列で名称を持たせてぐるぐる読み込ませるような使い方をしていた。

const components = ['hogehoge', 'piyopiyo', 'fugafuga'].map(c => { return {[c]: () => import(`./${c}.js`)} }).reduce((a, b) => Object.assign(a, b))

どうもこれがビルドの段階で良からぬ作用をしていたらしい。

なるほど、気づいてみればadditional assetに作用しそうな気がする。


コンポーネントが自身を再帰的に読む処理についてはこの処理は必要(だと思ってるけど他に上手い方法あるのかな?)だけど、特に読み込みを「遅延」させる必然性が無い部分については以下のような形に置き換えた。

const component = require('./hogehoge.js')

先程の例に直すと

const components = ['hogehoge', 'piyopiyo', 'fugafuga'].map(c => { return {[c]: require(`./${c}.js`)} }).reduce((a, b) => Object.assign(a, b))

これにより、20分近くかかっていたビルドが(ビルド機のコンディションによるんで厳密に測定はしてないけど)2~3分程度で済むようになった。



フロントまわりの知識はBowerの登場あたりで止まってたんで、今時の環境を揃えてみるとwebpackの便利さにはびっくりしますな。

近接ジャンルとして概要程度には知っていたけれど、実際に手を動かしてみると有り難みが凄くよく分かる。

ただそれだけに、ツールに振り回されないように勉強しなきゃなーと思った一件だった。

いまから始めるWebフロントエンド開発

いまから始めるWebフロントエンド開発