Viteとは？

Vue.js生みの親Even You氏が開発したノーバンドルなビルドツールです。

従来のVueだと、単一ファイルコンポーネント.vueはwebpack等といったバンドラーでの処理が必要で、それが動作の低下を引き起こしてました。

ViteはネイティブESモジュールのインポートを介したバンドル不要のdevサーバーを持っており、従来の環境よりも高速な実行環境が提供されます。
また、ビルド環境もrollup.jsをベースとしているのでこれも従来より高速となっているようです。

webpackとRollup：似て非なるもの

メリット

バンドル処理がないため、初回起動、また開発中の更新処理が非常に高速です
コードのコンパイルは変更された部分にのみ適用されます、従来は変更したらアプリ全体がバンドルされ、処理が終わるのを待つ必要がありました。大規模アプリでは大きな高速化が見込めます
HMRのパフォーマンスはモジュールの総数から切り離されるので、アプリの大きさに関係なく一貫した高速さを維持します

デメリット

今現在はVue3.0のみに対応しています。Vue3.0に対応していないライブラリも使用はできません
ESインポートは深い構造になるため、全体のリロードはバンドラーベースよりも遅くなる場合があります。しかしこれはローカル環境のみでのことで、コンパイル済みのファイルはメモリにキャッシュされるためページリロードにコンパイルコストはかかりません

How and Why

Viteでプロジェクトを作ってみる

npm、yarn両方での使用が可能ですが、今回はnpmを使用します

$ npm init vite-app <project-name>

これでプロジェクトの作成は完了です。
あとは依存するモジュールをインストールすれば起動ができます

$ cd <project-name>
$ npm install
$ npm run dev

プロジェクトをビルドする

ビルドするにはNodeのバージョンを12以降にする必要があります

Vite - zlib_1.brotliCompressSync is not a function

$ npm run build

構成


ディレクトリ構造はこのようになっています
.
├── node_modules
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── index.css
    └── main.js

index.html以外は通常のvueプロジェクトの構成と変わりません。

package.json

{
  "name": "vite-sample",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0-rc.1"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.1",
    "@vue/compiler-sfc": "^3.0.0-rc.1"
  }
}

初期の依存モジュールはviteと@vue/compiler-sfcだけの非常にシンプルなものとなっており、起動もviteを通したものとなっています。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

viteで作ったプロジェクトはindex.htmlからmain.jsをインポートしています。
main.js以降の流れは通常のvueと変わりません。

index.htmlからmoduleタイプとしてmain.jsをインポート
main.js内でApp.vueをcreateAppし、#app(id="app")としてマウント
App.vueから子コンポーネントなどをインポート

続き - ViteとVue CLIで作ったVue3プロジェクトのパフォーマンス比較

別記事で書きたいと思います

Vite触ってみた