[javascript] minify javascript (자바스크립트 사이즈 줄이기)

가끔 Reactive Web 을 보면 어떻게 만들었나 궁금해서 개발자 도구를 이용해서 javascript를 꺼내볼때가 있다.

그럴때마다 "constructor(e){super(e)" 처럼 React에서는 props로 쓰이던 부분이 "e"로 변경되어있는 것이 눈에 띄이고, 코드가 모두 한줄로 나열되어 있는 모습을 볼때가 있었다.

 

React를 공부해보던중 javascript minify 하는 방법이 있어 찾아보니 npm 모듈을 통해 손쉽게 만들 수 있었다.

 

방법은 간단하다. 먼저 node.js 가 설치되어있어야하고, terser 라는 모듈이 필요하다.

 

 

1. Node.js 설치
2. npm install terser 입력
3. npx terser -c -m -o like_button.min.js -- like_button.js 입력

 

 

결과는 아래와같다.

 

 

like_button.js

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

 

like_button.min.js

"use strict";const e=React.createElement;class LikeButton extends React.Component{constructor(e){super(e),this.state={liked:!1}}render(){return this.state.liked?"You liked this.":e("button",{onClick:()=>this.setState({liked:!0})},"Like")}}const domContainer=document.querySelector("#like_button_container");ReactDOM.render(e(LikeButton),domContainer);

 

 

이렇게 줄여진 javascript를 웹에서 호출해서 사용하면 된다.

 

<script type=text/babel src="/reactComponent/like_button.min.js"></script>