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.jsonにviteコマンドが追加されます。
"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'
