レガシーなMPAアプリケーションをwebpackからviteに移行する話

株式会社iCAREでは、Vue2.6(※2.7に移行中)+Composition APIで開発を行っており、vue2系では比較的モダンな構成です。一方、Ruby on RailsのView毎にVueインスタンスを生成するMPAであり、アプリケーション全体の構成としては、レガシーな構造になっています。 エントリーポイントが多いことによる弊害で、サービス拡大に伴いビルド時間は長くなり、最近では開発サーバーの立ち上げに約2分も掛かるようになりました。これを改善すべく、Vue2.7化と併せてビルドシステムのWebpackからViteへの移行を試みています。 SPAへのVite導入等に関しては記事がありますが、レガシーなMPAアプリケーションでのVite移行に関する記事はあまりなく、移行できるか？等の不安や疑問を抱きながら実装を進めています。本LTでは、この取り組みを通して得た知見を共有させて頂きます。

関連ブログ
https://zenn.dev/oreo2990/articles/3597922483f159

Transcript

1. レガシーな MPA アプリケーションを Webpack から Vite に移行する話 2021/10/16 Vue Fes Japan Online 2022
2. 自己紹介 oreo 株式会社 iCARE で健康管理システム Carely を開発 @oreo2991
3. 結論 まだリリースできていない (2022/9/14 動画撮影時) 歴史あるアプリでの移行は非常に大変 しかし、開発体験向上やアプリケーションの課題発見など 得られる恩恵は大きい
4. Vite 移行を検討するに至った背景 Rails の view 毎に Vue インスタンスを生成する MPA エントリーポイントが多いことによる弊害で、ビルド時間 は肥大化 開発サーバー立ち上げに 2 分弱かかり、開発体験が良いと は言えない状態
5. 移行手順 1. サンプルアプリで Vite Rails を触る 2. 一つのエントリーポイントでバンドルし画面表示 3. 全エントリーポイントでバンドルし画面表示 4. Webpack の設定移行 5. 開発サーバーで HMR を有効化 6. ローカル環境と qa 環境でテスト
6. Step1 サンプルアプリで Vite Rails を触る エントリーポイントなどの基本的な設定方法を確認 ビルドやHMR(Hot Module Replacement) などの動作を知る $ bundle exec rails new . $ bundle install $ bundle exec vite install 1 # Gemfile 2 gem 'rails', '~> 6.0.4' 3 gem 'vite_rails'
7. Step2-1 一つのエントリーポイントでバンドルし画面表示 エントリーポイントを一つに絞ってバンドルを行い画面が表示できるように実装 before(default の設定) after( エントリーポイントを一つに) テンプレートエンジンでJS を読み込ませる 画面表示に成功 "all": { }, "watchAdditionalPaths": [] "all": { "sourceCodeDir": "frontend", "entrypointsDir": "entry/home", }, "watchAdditionalPaths": [] 2 - content_for :html_head do 3 / = javascript_packs_with_chunks_tag 'home/index' 4 = vite_javascript_tag 'entry/home/index' 1 / slim ファイル( テンプレートエンジン) 5 = stylesheet_packs_with_chunks_tag 'home/index' 6 7 - content_for :content do 8 home-index#home-index
8. Step2-2 画面表示の為に取り敢えずした変更 Node.js を14.18+ or 16+ にアップデート require を import へ変換 process.env を import.meta.env に変換 Expected version "^14.18.0 || >=16.0.0". ` ` ` ` Uncaught ReferenceError: require is not defined ` ` ` ` Uncaught ReferenceError: process is not defined
9. Step3-1 全エントリーポイントでバンドルし画面表示実装 全エントリーポイントを対象にバンドルを行い画面を表示できるように実装
10. Step3-2 ヘルパータグの置き換え Simpacker のメソッドをVite 用に置き換えることで、テンプレートエンジンの変更を最小限に before after
11. Step3-3 その他ポイント ESM の場合、モジュールが非同期で読み込まれるので、依存関係がコード中に明示されていな いと実行順序が変わって壊れることがある グローバルオブジェクトに値やメソッドを読み込ませる処理があったので、ビルドのチャ ンク設定やコード上での調整が必要に CSS Modules のICSS JS とCSS 間での変数共有のために、ICSS の :export を利用していたが、うまく動作せず 暫定的に変数をハードコーディングしたが、Style Dictionary などの導入を検討中 ` `
12. Step4 Webpack の設定移行 約30 個に及ぶ設定項目をVite 組み込みサポートやプラグインなどを利用して移行 設定関連のコードは517 行から約100 行へと81% 削減 詳細は別途ブログをご参照( https://zenn.dev/oreo2990/articles/3597922483f159 )
13. Step5 開発サーバーで HMR(Hot Module Replacement) 有効化 開発環境ではDocker を使っていたのでIP アドレスのマッピングが必要に （※ ） Step3-2 のヘルパータグでパスを注入する
14. Step6 ローカル環境と qa 環境でテスト グローバルオブジェクトの読み込みエラーなどたくさんのエラーに直面 現在、各種OS 、ブラウザなどでも動作確認 (2022/9/14 動画撮影時)
15. 移行作業で得た個人的な学び 「エンジニアになって1 年も経っていないから、、」などとフタをせずに、ストレッチしたチ ャレンジをした結果、以下のような経験を積むことができ、アプリケーションの動作に対する 理解が深まりました。「移行することができるのか？」という不安が常に付き纏う作業でした が、結果はどうなろうと、エンジニアとしての視野が広がった。 1. サンプルアプリと本番プロジェクトでのVite Rails の動作比較 2. Vite 、Vite Rails のソースコードリーディング 3. DevTool 、Linux コマンドなどを用いた問題特定( 何回もしました) 4. 置き換え前のWebpack 設定の理解 5. Webpack 設定移行 6. Vite 、Vite Rails 、Rollup などのDocument 確認.....etc
16. 新規PJ へのVite 導入は比較的簡単だが、運用歴の長 いアプリでの移行は大変 開発サーバー起動時間の改善(2 分弱→約3 秒) 、 HMR の即時反映など開発者体験は大幅に向上
17. Rails のテンプレートエンジンに依存した密結合な設計 コンポーネントのスクリプト言語、エイリアス記法などが不 統一 ICSS などのようなwebpack に依存した標準的ではない書き方 グローバルオブジェクトを使って、依存関係が明示されてい ない書き方