レガシーな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
   

   View Slide

2. 自己紹介
   oreo
   株式会社 iCARE
   で健康管理システム
   Carely
   を開発
   @oreo2991
   

   View Slide

3. 結論
   まだリリースできていない (2022/9/14
   動画撮影時)
   歴史あるアプリでの移行は非常に大変
   しかし、開発体験向上やアプリケーションの課題発見など
   得られる恩恵は大きい
   

   View Slide

4. Vite
   移行を検討するに至った背景
   Rails
   の view
   毎に Vue
   インスタンスを生成する MPA
   エントリーポイントが多いことによる弊害で、ビルド時間
   は肥大化
   開発サーバー立ち上げに 2
   分弱かかり、開発体験が良いと
   は言えない状態
   

   View Slide

5. 移行手順
   1.
   サンプルアプリで Vite Rails
   を触る
   2.
   一つのエントリーポイントでバンドルし画面表示
   3.
   全エントリーポイントでバンドルし画面表示
   4. Webpack
   の設定移行
   5.
   開発サーバーで HMR
   を有効化
   6.
   ローカル環境と qa
   環境でテスト
   

   View Slide

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'
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. Step3-1
   全エントリーポイントでバンドルし画面表示実装
   全エントリーポイントを対象にバンドルを行い画面を表示できるように実装
   

   View Slide

10. Step3-2
    ヘルパータグの置き換え
    Simpacker
    のメソッドをVite
    用に置き換えることで、テンプレートエンジンの変更を最小限に
    before after
    

    View Slide

11. Step3-3
    その他ポイント
    ESM
    の場合、モジュールが非同期で読み込まれるので、依存関係がコード中に明示されていな
    いと実行順序が変わって壊れることがある
    グローバルオブジェクトに値やメソッドを読み込ませる処理があったので、ビルドのチャ
    ンク設定やコード上での調整が必要に
    CSS Modules
    のICSS
    JS
    とCSS
    間での変数共有のために、ICSS
    の :export
    を利用していたが、うまく動作せず
    暫定的に変数をハードコーディングしたが、Style Dictionary
    などの導入を検討中
    ` `
    

    View Slide

12. Step4 Webpack
    の設定移行
    約30
    個に及ぶ設定項目をVite
    組み込みサポートやプラグインなどを利用して移行
    設定関連のコードは517
    行から約100
    行へと81%
    削減
    詳細は別途ブログをご参照( https://zenn.dev/oreo2990/articles/3597922483f159 )
    

    View Slide

13. Step5
    開発サーバーで HMR(Hot Module Replacement)
    有効化
    開発環境ではDocker
    を使っていたのでIP
    アドレスのマッピングが必要に
    （※
    ） Step3-2
    のヘルパータグでパスを注入する
    

    View Slide

14. Step6
    ローカル環境と qa
    環境でテスト
    グローバルオブジェクトの読み込みエラーなどたくさんのエラーに直面
    現在、各種OS
    、ブラウザなどでも動作確認 (2022/9/14
    動画撮影時)
    

    View Slide

15. 移行作業で得た個人的な学び
    「エンジニアになって1
    年も経っていないから、、」などとフタをせずに、ストレッチしたチ
    ャレンジをした結果、以下のような経験を積むことができ、アプリケーションの動作に対する
    理解が深まりました。「移行することができるのか？」という不安が常に付き纏う作業でした
    が、結果はどうなろうと、エンジニアとしての視野が広がった。
    1.
    サンプルアプリと本番プロジェクトでのVite Rails
    の動作比較
    2. Vite
    、Vite Rails
    のソースコードリーディング
    3. DevTool
    、Linux
    コマンドなどを用いた問題特定(
    何回もしました)
    4.
    置き換え前のWebpack
    設定の理解
    5. Webpack
    設定移行
    6. Vite
    、Vite Rails
    、Rollup
    などのDocument
    確認.....etc
    

    View Slide

16. 新規PJ
    へのVite
    導入は比較的簡単だが、運用歴の長
    いアプリでの移行は大変
    開発サーバー起動時間の改善(2
    分弱→約3
    秒)
    、
    HMR
    の即時反映など開発者体験は大幅に向上
    

    View Slide

17. Rails
    のテンプレートエンジンに依存した密結合な設計
    コンポーネントのスクリプト言語、エイリアス記法などが不
    統一
    ICSS
    などのようなwebpack
    に依存した標準的ではない書き方
    グローバルオブジェクトを使って、依存関係が明示されてい
    ない書き方
    

    View Slide