개발노트

nuxt build 본문

Vue/nuxt

nuxt build

aloha2jh 2021. 9. 1. 17:30

Nuxt 빌드

 

npm run build

웹팩으로 어플리케이션을 빌드후 js, css를 production용으로 축소 

npm run generator

어플리케이션을 빌드하고 모든 경로를 HTML파일(정적 호스팅에 사용)으로 생성

 

 

1. 웹팩설정

analyze

build:{
	analyze: true,
}

 

analyze 옵션 배포전에 build 시에 true로 해서

각 용량 확인

각라이브러리 별로 트리쉐이킹 하는 방법이 다르므로 패키지네임 트리쉐이킹으로 검색해서

트리쉐이킹 진행하도록한다

 

 

 

extend

기존에 있는 웹팩 설정 확인하기


nuxt안에 webpack, babel 이 있는데, 설정한걸 바꾸고 싶을경우 바꾸는게 가능하고

extend(){} 라는 메서드를 사용해서 웹팩 설정확인하기

build: { 
    extend(config, { isClient, isServer }) {
      console.log('webpack', config, isClient, isServer)
    },
  },

devtool hidden-source-map  옵션으로

소스코드 공개시 보안관련해서 소스코드 숨기는걸 권장

 

build: {
    analyze: true,
    extend(config, { isClient, isServer, isDev }) {
      if (isServer && !isDev) {
        config.devtool = 'hidden-source-map'
      }
      console.log('webpack', config, isServer, isClient)
    },
  },

 

 

 


2. 라이브러리

moment

npm i @nuxtjs/moment

설치후 nuxt설정파일에 buildModules에 추가후, locales 설정 ko로 설정

//nuxt.config.js
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    '@nuxtjs/moment'
  ],
  moment:{
      locales:'ko',
  }

 

 

 

PM2

 

node application 프로세스 관리자

 

https://rile1036.tistory.com/150

'Vue > nuxt' 카테고리의 다른 글

nuxt 프로젝트에 테스트코드프레임워크JEST 적용하기  (0) 2021.08.04
vue transition  (0) 2021.08.03
infinity scrolling  (0) 2021.07.23
vuex helper 사용하기  (0) 2021.07.23
vue-awesome-swiper  (0) 2021.07.23