웹사이트가 느린데, 소스에서 현재 사용되지 않는 자바스크립트 파일 찾는 방법...?
안녕하세요,
안드로이드 웹앱이 있는데, 웹뷰에서 화면을 띄우는 시간이 너무 오래 걸리고 있습니다.
현재 웹 화면은 외국 사이트에서 파는, 미리 만들어진 쇼핑사이트용 템플릿을 구매해서 수정하며 쓰고 있는데요,
아무래도 이 템플릿이 원래 PC에서 보는 걸 고려하여 이것저것 화려한 효과가 많이 들어있었는데(마우스가 올라가면 상품 이미지가 360도 회전하는 것 등), 저희가 모바일용으로 화면을 만들면서 그런 효과는 거의 안 쓰고 있기 때문에, 아예 라이브러리 .js 파일 자체를 로드하지 않게 빼버려도 될 것 같은데...
문제는 템플릿 소스에 20여개의 <script src="***/***.js"></script>
가 있는데, 각 줄마다 제가 이것을 빼도 정말 괜찮은 걸까 확신을 어떻게 하느냐는 것입니다.
지금은 상당히 무식한(?) 방법으로 하고 있습니다;
* .js 파일의 문서를 찾아가서 제공하는 함수 이름을 웹 페이지 템플릿(이것도 완전한 html이 아니라 템플릿툴킷 형식의 템플릿 파일이지만)에서 검색
* 함수를 호출하는 구문이 없다면, 그 .js 로딩하는 줄을 주석처리
* 크롬 개발자 도구 콘솔을 띄워놓고 페이지에 들어가서 에러메시지가 뜨거나 페이지가 이상하게 보이는 게 있는지 눈으로 확인
(어떤 줄은 빼니까 로딩 시간이 확실히 빨라지는 감이 있어서 효과는 있는 듯 합니다)
하지만 시간과 노력도 노력이거니와 제가 미처 발견하지 못하고 놓친 게 있을지 모르고, 또 이 함수를 저희 웹페이지에서 직접적으로 호출하고 있지는 않지만 웹페이지에서 호출하는 다른 라이브러리 함수 쪽에서 이걸 쓰고 있다거나 하지 않을까 해서 걱정입니다.
저희가 구성한 웹페이지 소스들을 읽고,
그 안의 자바스크립트 소스만 가지고, 이 함수는 어느 js 에서 정의되어 있고 이 js 는 다시 어느 js 파일에 의존하고 있고...
이런 걸 찾아주는 툴이 있을까요.
이런 경우 보통은 어떻게든 하시는지 조언을 듣고 싶습니다.
감사합니다.
----
이래저래 구글링도 하고 있는데, 저도 두고두고 참고하고 이 주제에 관심 있는 분들께도 보여드릴 겸 해서, 눈에 띄는 링크들은 여기에 덧붙이도록 하겠습니다.
* https://stackoverflow.com/questions/16854458/how-to-find-out-if-certain-javascript-code-is-actually-used
* https://webmasters.stackexchange.com/questions/55025/how-to-check-if-linked-javascript-and-css-files-are-being-used
* https://stackoverflow.com/questions/2224154/find-unused-images-css-rules-js-script-blocks
* https://www.npmjs.com/package/website-dependency-tree - 이게 소스에 링크되어 있으면 죄다 찾아주는 건지 실제 쓰이는 걸 찾아주는 건지 해봐야겠습니다.
** 해보니까 이건 그냥 웹페이지 소스에 링크되어 있으면 디펜던시로 표시하는군요. 좋은 점은 각 파일 안을 다시 읽어서, 예를들어 css 파일을 읽어서 그 안에서 요구하는 폰트파일이나 이미지파일을 다시 찾아준다는 점.
댓글 달기