with oclazyloader, angularjs, gulp, bower
meteor의 특징 중에 하나가 css / javascript를 난독화하고 머징을 자동으로 해준다. 개발자가 낙독화와 머징을 신경쓰지 않아도 되니 엄청 좋아 보였다.
문제는 여기서 나온다. 여러 페이지를 개발한다고 했을 때 첫 페이지 로딩시 지금 사용하지 않는 페이지의 스크립트도 다운을 받는다. 다운로드 용량도 손해지만 다운 받은 스크립트를 파싱하는 비용도 크다. 혹은 특정 페이지에만 무거운 그래프 라이브러리를 사용하는데 meteor는 모두 한번에 머지에서 내려준다.
보통 이런 요구사항은 requirejs 같은 모듈 로더가 잘 해결해준다. meteor의 폴더 구조 중 public 폴더의 파일은 서버에 그대로 올라가서 바로 접근이 가능하다.
<!-- public/image.jpg -->
<img src="/image.jpg">
그럼 무거운 라이브러리는 public에 올려두고 필요한 페이지에서만 로드를 하면된다.
내가 작성한 코드들은 난독화와 압축이 되지 않았다. 사용자에게 좋은 경험을 주기위해 최적화를 했는데...
meteor만 가지고 위 이슈를 해결 할 수가 없었다. 빌드툴인 gulp에 힘을 빌리자. 참고로 meteor는 .으로 시작하는 폴더는 인식하지 않는다. gulp의 새 둥지를 .public을 만들고 gulp를 위한 package.json을 만든다. gulpfile.js 를 만든다. 내가 작성한 코드를 public 으로 옮기는 낙독화를 하고 압축을 하는 거다. uglyfy만 하면 되기 때문에 guplfile.js 도 간단하다.
angualrjs 로 만든 모듈도 lazy loading을 적용하면 어떨까?
ocLazyLoad 를 활용한다. ui-router와 함께 사용하기 위해서 확장한다. lazy load module 과 lazy load controller/service/filter/directive를 확장하는 방법
No Silver Bullet "은탄환은 없다" 라는 표현이 있다. angularjs와 meteor를 공부하고 업무에 적용해보면서 분명한 한계점을 발견했다.