Javascript에 날개를 날아줘!

Development와 Production

회사에서 하나의 어플리케이션에 대해서 개발을 할 때는 현재의 Env가 개발 환경인지, 배포 버전인지를 먼저 구분을 해야 한다. 물론 그러한 개발/상용 버전에 따라서 API 서버의 주소가 달라질 수 있겠지만, 단순하게는 webpack bundle 파일의 경량화, 불필요한 Log 비노출 등 역시 달라질 수 있다. 다행히 Nodejs 에서는 이러한 환경에 따라 현재 운영되고 있는 서버의 버전에 따라 환경 변수를 설정할 수 있다. 그러한 변수는 NODE_ENV 을 살펴보면 된다.

대부분의 운영되고 있는 서비스의 package.json을 살펴보면 아마 이러한 환경 변수에 따른 설정이 되어 있지 않을까 싶다. 또한 Webpack 내에도 그러한 서버 환경에 따라 지원을 해주는 플러그인이 존재한다.

Webpack 의 Plugin

Webpack 내에도 다양한 Plugin이 존재한다. 그 중 서버 환경에 따른 배포에 대한 플러그인으로는 DefinePlugin와 UglifyJsPlugin 이다.

DefinePlugin

DefinePlugin 은 서버의 환경 변수을 컴파일 할 때 Global하게 상수로 설정해주는 plugin이다. 이 플러그인을 사용하면 개발 환경을 위한 소스와 상용 환경을 위한 소스를 각자 다르게 빌드되도록 설정할 수 있다. 위에서 말한 log 노출여부 역시 이 플러그인을 통해서 설정할 수 있다. 개발 환경에서는 어떠한 문제가 어디에 있는지 혹은 현재 개발되고 있는 부분에 대해서 무언가의 추적을 할 경우에 이러한 부분을 Log를 통해서 쉽게 해결할 수 있다. 하지만 이러한 Log는 상용에서는 노출될 필요가 없다. 오히려 이러함 Log를 제거함으로써 불필요한 용량 및 런타임 비용을 줄일 수 있다.

1
2
3
4
5

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true
})

위의 소스는 공식홈페이지에서 기본적인 사용법에 대해서 설명하기 위헤서 올려둔 예제이다. 현재의 옵션 내에서는 PRODUCTION, VERSION, BROWSER_SUPPORTS_HTML5, TWO, “typeof window” 의 Key 값을 이용하고 있다. 이 key 값은 webpack의 entry 파일에서 확인할 수 있다.

1
2
3
4
5
6
7
8
9

//Entry js 파일
if(PRODUCTION){ 
  console.log('상용버전입니다.')
}
console.log('현재 앱의 버전은' + VERSION + '입니다.');
if(BROWSER_SUPPORTS_HTML5) {
  console.log('HTML5를 지원하는 앱이므로 입니다.');
  require("html5shiv");
}

위의 Option 중 ENV에 대한 것은 JSON.stringify('production') 이나 '"production"' 둘 중 하나를 사용하면 된다.

UglifyJsPlugin

UglifyJsPlugin은 불필요한 코드를 제거해주는 플러그인으로서 배포시 불필요한 log 나 용량, 런타임을 줄여주는 역할을 한다. 사용법은 간단한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

new UglifyJSPlugin({
  //조건과 일치하는 파일 테스트
  test: /\.js($|\?)/i,
  //포함할 파일 설정
  include: /\/includes/,
  //제외할 파일 설정
  exclude: /\/excludes/,
  //파일 캐시 여부
  cache: true,
  //build의 속도를 향상시켜줄 다중 프로세스 실행 여부( 해당 값은 Number 형태로도 가능 )
  parallel: true,
  //sourceMap 사용 여부
  sourceMap: true
})

위와 같이 옵션을 플러그인의 안에 Object 형태로 넣어주면 된다.

출처

• [webpack 공식 블로그] https://webpack.js.org/plugins/define-plugin/