こんにちは、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%くらいの用途しか満たしてくれないので、なかなかかゆいところに手が届かないライブラリでも有りました。
具体的な課題としては
- 複数のアセットを別々にビルドできない。
- 複雑なプラグイン(DllPlugin等)などを入れることができない
- LaravelMixの依存しているwebpackやその他のライブラリのバージョンに合わせて設定を書かないといけない。
などです。特に、複数のアセットを別々にビルドできない点が問題でした。弊社のサービスはユーザー側画面(service)、ビジネス側画面(business)、管理者側(admin)と複数のレイアウトが存在していましたが、それを下図のように一括でビルドしている状態でした。
全然関係ない画面をいじっていても毎回全体のscssとjsのビルドが走るため時間の無駄になっていました。
Laravel MixからWebpackへの移行
これらの課題を解決するためにLaravel Mixをやめ、Webpackの設定を自前で書くことにしました。
下記のような工程で作業していき、なんとか移行を終えることができました。
- Webpackの構造を理解する
- (当時)Laravel Mixの内包するWebpackが3系だったが、移行先が4系だったので設定を4系で書き換え
- Laravelのグローバルのmix関数に当たる関数の自作
ビルドを分けるためにwebpack.jsを複数作つ構成にしました。 また、ビルド高速化のためにDllPluginという仕組みも導入しました。これによりビルドは以下の様に、
- ライブラリーを中心としたvendor.jsをビルド、
- vendor.js以外をビルド
という2つの工程に別れました。
普段は2のみをやり、ライブラリー等を追加したタイミングで1をやることにより、ビルドする範囲を更に小さくすることができます。
DllPluginの導入はぜひ以下をごらんください。
Webpack移行の恩恵
Webpackを直接設定できるようになったことによって、課題は解決され以下のような状態になりました。
- 複数のアセットを選択してビルドできる
- Webpackを最新の4系に
- アセットのビルド時間が短く
特にビルドの時間についてはアセットを選択してビルドする、DllPluginの導入、HappyPackの導入などを経て約1/3ほどに短縮されました。