Vue CLIで作成したプロジェクトをViteに置き換える

Viteとは

Viteは、一言でいうとフロントエンドのめっちゃ早いビルドツールです。 v2.xでは以下のテンプレートに対応しています。

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte
  • svelte-ts

Vue CLIで作成したプロジェクトをViteに置き換える

vue-cli-plugin-viteをインストール

Vue CLIで作成したプロジェクトをViteに置き換えるためにvue-cli-plugin-viteをというプラグインを使います。

これは開発ビルドのみにViteによるビルドを適用するパッケージであり、コードベースへの変更なしに適用できることを謳っています。

以下のコマンドを実施します。

$ vue add vite
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N) 

まだコミットされたいない変更がある場合、先にコミットかスタッシュすることを推奨されます。 コミットされていない変更はないのでyを入力します。

インストールが完了すると、bin/viteというファイルが生成され、package.jsonviteコマンドが追加されます。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
+    "vite": "node ./bin/vite"
  },

npm run viteコマンドで開発サーバーを起動できます。

Vue CLIとの比較

正確に計測はできてないですが、概ね以下の通りでした。

Vue CLI Vite
初回起動 約15秒 約3秒
HMR 約3秒 1秒未満

修正が必要だったところ

コードベースの変更ゼロを謳ってるとはいえ、いくつか修正が必要な箇所が存在したので上げていきます。

コンポーネントをimportする際に拡張子を省略しない

以下のようなimportの書き方をしているとファイルを読み込むことができずエラーとなりました。

- import AppButton from '@/components/AppButton
+ import AppButton from '@/components/AppButton.vue

TypeScriptでSFCを記述している場合には大丈夫かと思われますが、注意が必要です。

requireは使えない

require('xxx')の構文は使うことができないので、該当の箇所はimport文に置き換える必要があります。

- require('vue-flash-message/dist/vue-flash-message.min.css')
+ import 'vue-flash-message/dist/vue-flash-message.min.css'

この記事をシェアする
Twitterで共有
Hatena

関連記事