Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- component
- 리액트컴포넌트
- sementicversion
- node
- mongoose
- NPM
- 리액트기초
- 클래스컴포넌트
- sequelize
- 시퀄라이즈
- npm명령어
- 리액트
- nodeJS
- 제로초예제
- React Component
- React
- 시퀄라이즈공부
- nodejs교과서
- MongoDB
- express-generator
- mongo
- NoSQL
- 리액트스타디
Archives
- Today
- Total
개발노트
nuxt build 본문
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 프로세스 관리자
'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 |