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. 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'
  2. 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
  3. 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