통신 대역을 조정할 수있는 grunt 플러그인을 소개합니다.

스마트폰용 서비스 등을 개발할 때 3G 회선과 같은 저속한 환경에서의 동작을 확인해야 할 때가 있습니다.
하얀 롬에서 Wifi 밖에 사용할 수 없는 경우나 퍼블릭 사촌에 둘 수 없기 때문에 실기에서의 확인에 한 번 걸어야 할 때도 있다고 생각합니다.

유명한 방법으로는 Charles 와 같은 로컬 프록시로 스로틀링을 실시하는 방법이 있습니다.
다만 Charles는 유료이므로 개발하고 있는 전원의 환경에 넣을까라고 하면 조금 어렵습니다. 평가판도 있지만 상용하기에는 어렵다고 생각합니다.

더 쉽게 하고 싶다. .

grunt-throttle

거기서 등장하는 것이 grunt-throttle!

tjgq/grunt-throttle

사용법도 매우 간단

설치

$ npm install grunt-throttle

작업 작성

throttle: {
  default: {
    remote_host: 'localhost',
    remote_port: 8000,
    local_port: 8001,
    upstream: 10 * 1024,
    downstream: 100 * 1024
  }
}

작업을 쓰면 이런 식으로 설정하고

grunt.registerTask("default", ["connect", "throttle", "watch"]);

$ grunt

에서 실행합니다.

이것으로 8000번 포트로 지어진다 localhost 의 서버의 대역을 스로틀링한 녀석을 8001번 포트로 지어집니다.
upstream 가 10KB/s, downstream 가 100KB/s입니다.

※ throttle의 태스크를 실행하는 시점에서 서버가 세워져 있지 않아도 문제 없습니다

실행 결과 샘플

시험에 매우 무거운 이미지를 붙인 페이지의 로딩 속도를 살펴 보겠습니다.

보통

10MB의 페이지가 1000ms 걸리지 않고 표시됩니다.

스로틀 한 사람

제대로 스로틀링되어 1.6min이라는 결과.

여러 대역을 동시에 시뮬레이션

여러 작업을 작성하면 동시에 여러 서버를 만들 수 있습니다.

throttle: {
  server1: {
    remote_host: 'localhost',
    remote_port: 8000,
    local_port: 8001,
    upstream: 10 * 1024,
    downstream: 500 * 1024
  },
  server2: {
    remote_host: 'localhost',
    remote_port: 8000,
    local_port: 8002,
    upstream: 10 * 1024,
    downstream: 1000 * 1024
  }
}

단계마다 회선 속도를 설정한 것을 준비해 두면 여러 대역에서의 동작을 확인하기 쉬워집니다.

끝

이번은 시간 계측을 위해 Chrome에서 확인했습니다만, 스마트폰 실기라면 리소스 취득의 동시 접속수의 상한등이 다르므로 주의해 주세요.

※추기
grunt로 지어진 서버가 아니어도 스로틀링할 수 있습니다. 파이썬의 SimpleHTTPServer라든지 아마 뭐든지 할 수 있을 것 같다.

아니 굉장히 편리.