LaravelMixから卒業しました

こんにちは、M&Aクラウドの荒井です。M&Aクラウドサービスもリリースされてから1年半が立ち、開発メンバーも増えてきたので、フロントエンドのビルド周りをテコ入れしました。

フロントエンドのビルド周りの課題

M&Aクラウドの開発環境はLaravelに同梱されているLaravel Mixというライブラリーを使って整備されていました。 Laravel Mixは以下のようにほんの数行の設定を書くだけでwebpack経由でscssやJavaScriptのビルドをやってくれるので、とても便利です。

mix.sass('resources/sass/app.scss', 'public/css');

Laravel Mixは本当に便利なのですが、公式サイトに「An elegant wrapper around Webpack for the 80% use case.」と書いてあるとおり80%くらいの用途しか満たしてくれないので、なかなかかゆいところに手が届かないライブラリでも有りました。

laravel-mix.com

具体的な課題としては

  • 複数のアセットを別々にビルドできない。
  • 複雑なプラグイン(DllPlugin等)などを入れることができない
  • LaravelMixの依存しているwebpackやその他のライブラリのバージョンに合わせて設定を書かないといけない。

などです。特に、複数のアセットを別々にビルドできない点が問題でした。弊社のサービスはユーザー側画面(service)、ビジネス側画面(business)、管理者側(admin)と複数のレイアウトが存在していましたが、それを下図のように一括でビルドしている状態でした。

f:id:kazuhei0108:20191202123214p:plain

全然関係ない画面をいじっていても毎回全体のscssとjsのビルドが走るため時間の無駄になっていました。

Laravel MixからWebpackへの移行

これらの課題を解決するためにLaravel Mixをやめ、Webpackの設定を自前で書くことにしました。

下記のような工程で作業していき、なんとか移行を終えることができました。

  • Webpackの構造を理解する
  • (当時)Laravel Mixの内包するWebpackが3系だったが、移行先が4系だったので設定を4系で書き換え
  • Laravelのグローバルのmix関数に当たる関数の自作

ビルドを分けるためにwebpack.jsを複数作つ構成にしました。 また、ビルド高速化のためにDllPluginという仕組みも導入しました。これによりビルドは以下の様に、

  1. ライブラリーを中心としたvendor.jsをビルド、
  2. vendor.js以外をビルド

という2つの工程に別れました。

f:id:kazuhei0108:20191202124906p:plain

普段は2のみをやり、ライブラリー等を追加したタイミングで1をやることにより、ビルドする範囲を更に小さくすることができます。

DllPluginの導入はぜひ以下をごらんください。

qiita.com

Webpack移行の恩恵

Webpackを直接設定できるようになったことによって、課題は解決され以下のような状態になりました。

  • 複数のアセットを選択してビルドできる
  • Webpackを最新の4系に
  • アセットのビルド時間が短く

特にビルドの時間についてはアセットを選択してビルドする、DllPluginの導入、HappyPackの導入などを経て約1/3ほどに短縮されました。