Vite入門

フロントエンド高速ビルドツール

Posted by garbanzo on Tue, Nov 3, 2020

目次

vite とは?

Vue CLI や Webpack と比べ高速に動作するビルドツール。

特徴として

  • バンドル処理がないため、起動が非常に高速
  • 実際にインポートされたコードのみがコンパイルされ、開発を開始するためにアプリ全体がバンドルされるまで待つ必要がない
  • HMR のパフォーマンスは、モジュールの総数から切り離されているのでアプリのサイズに関係なく、HMR が一貫して高速

Vue CLI と違って初期化時にライブラリの選択し構築することは出来ないのでセットアップ後、自身で構築する必要がある

また、vite では Vue.js V3 他に React, Rreact の作成も可能(※作成方法は以下に記載)

Note to Vue users: Vite currently only works with Vue 3.x. This also means you can’t use libraries that are not yet compatible with Vue 3.

とあるので、vue3 に対応していないライブラリは使用できないので注意!


インストール

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install (or yarn install)
$ npm run dev (or yarn dev)

With TypeScript の場合

$ npm init vite-app <project-name> --template vue-ts

React の場合

$ npm init vite-app <project-name> --template react

そのほか template

vitejs/create-vite-app: Create a Vite-powered app in seconds!


プロジェクトを作成してみる

プロジェクト名をvite-sampleとして作成

$ npm init vite-app vite-sample
...(省略)
Done. Now run:

  cd vite-sample
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

$ cd vite-sample
$ npm install
...(省略)
$ npm run dev //起動

Alt text

ディレクトリ構成

とてもシンプルな構成

.
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── index.css
    └── main.js

4 directories, 10 files

本番用にビルドする

以下コマンドでビルドする

$ npm run build

ビルド完了するとdistディレクトリにファイルが生成される


まとめ

早いと言っているだけあって、かなり高速で起動する! 軽量で始める、小規模プロジェクトであれば vite は良い感じだ。

Buy Me A Coffee