はじめに
Nuxtで開発をしていると、開発サーバを起動する際、クライアントサイド、サーバサイドの準備に結構時間がかかると感じる人は多いのではないかと思います。
そこで、Vite という高速なフロントエンド開発ツールを使ってNuxtの開発も高速化してみようというのが今回の目的です。
ちなみに、Nuxt3(2021/7/11時点では未リリース)では標準で vite に対応するようです。今回は Nuxt2 系で Vite を使ってみます。
使用した環境
Windows10 PC
VSCode
Docker Desktop
VSCode で Docker 環境を起動する
私のいつものやり方で、VSCode の RemoteDevelopment を使って環境を汚さず進めていきます。
- VSCode を起動してプロジェクトフォルダ(/dev/nuxt-vite)を作成して開きます。
- Dockerfile で node 環境を用意します。
FROM node:alpine
ENV CHOKIDAR_USEPOLLING=true
RUN apk update && apk add git
CHOKIDAR_USEPOLLING=true がないと Windows ではソースコード編集後の自動読み込みが機能しないようです。
-
から Reopen in Container を選択して Dockerfile の環境を起動します。
- メニューの Terminal / New Terminal からターミナルを起動して nuxt プロジェクトを作成します。
npx create-nuxt-app で nuxt プロジェクトを作成します。
# npx create-nuxt-app nuxt-vite
Need to install the following packages:
create-nuxt-app
Ok to proceed? (y)
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
create-nuxt-app v3.7.1
✨ Generating Nuxt.js project in nuxt-vite
? Project name: nuxt-vite
? Programming language: TypeScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to inve
rt selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert
selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to in
vert selection)
? What is your GitHub username?
? Version control system: Git
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#d
eprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-ur
l#deprecated
npm WARN deprecated querystring@0.2.0: The
npm WARN deprecated @types/browserslist@4.15.0: This is a stub types defini
tion. browserslist provides its own type definitions, so you do not need th
is installed.
npm WARN deprecated @types/anymatch@3.0.0: This is a stub types definition.
anymatch provides its own type definitions, so you do not need this instal
led.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upg
rade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained an
d not recommended for usage due to the number of issues. Because of the V8
engine whims, feature detection in old core-js versions could cause a slowd
own up to 100x even if nothing is polyfilled. Please, upgrade your dependen
🎉 Successfully created project nuxt-vite
To get started:
cd nuxt-vite
npm run dev
To build & start for production:
cd nuxt-vite
npm run build
npm run start
For TypeScript users.
See : https://typescript.nuxtjs.org/cookbook/components/
npm notice
npm notice New minor version of npm available! 7.18.1 -> 7.19.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.19.1
npm notice Run npm install -g npm@7.19.1 to update!
npm notice
- プロジェクトフォルダを一つ上のフォルダに移動
作成後のフォルダが /dev/nuxt-vite/nuxt-vite となっているので重複しているフォルダをまとめます。
mv nuxt-vite/* .
mv nuxt-vite/.* .
rmdir nuxt-vite
通常の開発環境の起動時間を確認する
package.json を選択すると下に NPM SCRIPTS が出てくるので、その中の dev を実行(三角のボタンを押す)します。
↑のClient, Serverのbuilding に結構時間がかかります。
Client 側で 13.55 秒, Sever 側で 11.87 秒かかりました。
これは初回のみかとおもいきや、2回目でも同じくらいかかります。
右下に Open in Browser ボタンが出ればクリックしてブラウザを開きます。（出ない場合はブラウザで http://localhost:3000 を開いてください）
初期画面がこれまでとバージョンと変わっていますね。とりあえず、通常の nuxt 開発環境ができました。
開発環境の起動に毎回30秒程度はかかる感じです。(Dockerなので遅いというのもあると思います)
Nuxt-Vite を入れる
それでは、本題の Nuxt-Vite を入れてみましょう。
# npm i -D nuxt-vite
インストール出来たら Nuxt の設定の buildModules 部分に 'nuxt-vite' を追加します。
(省略)
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
'nuxt-vite', //追加
],
(省略)
これで準備完了です。
先ほどと同じで NPM SCRIPTS の dev を実行します。（実行中の場合は CTRL+Cでいったん終了させます。）
すると1168ミリ秒とあるように12秒程度で起動しました。
2倍以上にスピードアップしましたね。
ソースを書き換えた時のブラウザへの速度も速くなったように感じます。
試したことがない方は一度やってみてください。快適になりますよ。