Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

oreo2990
October 16, 2022

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

oreo2990

October 16, 2022
Tweet

Other Decks in Programming

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