소개

Nuxt로 개발을 하고 있으면, 개발 서버를 기동할 때, 클라이언트 측, 서버 측의 준비에 상당히 시간이 걸린다고 느끼는 사람은 많은 것이 아닐까 생각합니다.
그래서 Vite 이라는 고속 프런트 엔드 개발 툴을 사용하여 Nuxt 개발도 고속화해 보자는 것이 이번 목적입니다.
덧붙여서, Nuxt3(2021/7/11 시점에서는 미릴리스)에서는 표준으로 vite 에 대응하는 것 같습니다. 이번에는 Nuxt2 계에서 Vite를 사용해 보겠습니다.

사용한 환경

Windows10 PC


VSCode


Docker Desktop

VSCode에서 Docker 환경 시작

평소와 같이 VSCode의 RemoteDevelopment를 사용하여 환경을 더럽히지 않고 진행합니다.

1) VSCode를 시작하여 프로젝트 폴더(/dev/nuxt-vite)를 만들고 엽니다.



2) Dockerfile에서 node 환경을 준비합니다.

Dockerfile

FROM node:alpine
ENV CHOKIDAR_USEPOLLING=true
RUN apk update && apk add git

CHOKIDAR_USEPOLLING=true가 없으면 Windows에서는 소스 코드 편집 후 자동 로드가 작동하지 않는 것 같습니다.



3) 에서 Reopen in Container를 선택하여 Dockerfile 환경을 시작합니다.





4) 메뉴의 Terminal/New Terminal에서 터미널을 시작하여 nuxt 프로젝트를 만듭니다.





npx create-nuxt-app에서 nuxt 프로젝트를 만듭니다.



Nuxt 프로젝트 만들기

# npx create-nuxt-app nuxt-vite
Need to install the following packages:
  create-nuxt-app
Ok to proceed? (y) 
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: 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 [email protected]: Please see https://github.com/lydell/urix#d
eprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-ur
l#deprecated
npm WARN deprecated [email protected]: The
npm WARN deprecated @types/[email protected]: 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/[email protected]: This is a stub types definition.
 anymatch provides its own type definitions, so you do not need this instal
led.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upg
rade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: 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 [email protected] to update!
npm notice 

5) 프로젝트 폴더를 하나의 폴더로 이동

작성 후의 폴더가/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 를 넣어 봅시다.

Nuxt-Vite 설치

# npm i -D nuxt-vite

설치가 완료되면 Nuxt 설정의 buildModules 부분에 'nuxt-vite'를 추가합니다.

nuxt-config.js

(省略)
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    'nuxt-vite', //追加
  ],
(省略)

이것으로 준비 완료입니다.
이전과 동일하게 NPM SCRIPTS dev를 실행합니다. (실행중일 경우는 CTRL+C로 일단 종료시킵니다.)



그러자 1168밀리초와 같이 12초 정도로 기동했습니다.
2배 이상으로 속도를 올렸네요.

소스를 재작성했을 때의 브라우저에의 속도도 빨라진 것처럼 느낍니다.
시도한 적이없는 분은 한 번 해보십시오. 편안해집니다.