웹사이트가 느린데, 소스에서 현재 사용되지 않는 자바스크립트 파일 찾는 방법...?

raymundo의 이미지

안녕하세요,

안드로이드 웹앱이 있는데, 웹뷰에서 화면을 띄우는 시간이 너무 오래 걸리고 있습니다.

현재 웹 화면은 외국 사이트에서 파는, 미리 만들어진 쇼핑사이트용 템플릿을 구매해서 수정하며 쓰고 있는데요,
아무래도 이 템플릿이 원래 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 파일을 읽어서 그 안에서 요구하는 폰트파일이나 이미지파일을 다시 찾아준다는 점.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.