증상

빌드는 정상적으로 끝나지만, 앱이 시작되기도 전에 브라우저가 파싱 단계에서 예외를 던집니다.

번들 전체를 간단히 확인해 보면 같은 식별자가 여러 청크에서 선언되어 있음을 알 수 있습니다.

원인

VM 난독화는 기본적으로 mangled-shuffled 식별자 이름 생성기를 사용합니다. 이 생성기는 작은 알파벳 집합을 결정적으로 섞은 순서대로 훑으며, 런타임이 도입하는 전역에는 vm 접두사를 붙입니다. 두 파일 모두 같은 셔플 순서에서 식별자를 만들어 내므로, 각 파일의 첫 번째 전역이 같은 이름을 갖고, 두 번째 전역도 또 같은 이름을 갖는 식입니다.

각 파일은 독립적으로 난독화되며, 생성기는 파일마다 시퀀스의 처음부터 다시 시작합니다. 그래서 두 파일이 같은 번들에 들어가면 이름이 충돌합니다. 최상위 const vmd = … 선언이 같은 스코프에 두 번 놓이면 파서가 두 번째 선언을 거부합니다.

해결 방법

다음 중 하나를 선택하세요. 첫 번째가 권장 방법입니다.

• randomIdentifiersPrefix 활성화하기 (권장)

  난독화를 실행할 때마다 고유한 무작위 접두사가 생성되어 모든 식별자 앞에 붙습니다. 서로 다른 파일의 이름이 더 이상 같은 네임스페이스를 공유하지 않으므로, 접두사를 일일이 조율하지 않아도 충돌이 사라집니다.

• 파일마다 고유한 identifiersPrefix 지정하기

  파일을 난독화할 때 각기 다른 접두사를 직접 전달하세요(예: 한쪽은 identifiersPrefix: 'auth_', 다른 쪽은 checkout_). 효과는 확실하지만 파일이 많으면 실수하기 쉬우므로, 위의 무작위 접두사 방식을 권장합니다.

• identifierNamesGenerator를 hexadecimal로 바꾸기

  16진수 이름은 키 공간이 훨씬 넓어서 두 파일이 같은 식별자를 만들어 낼 가능성이 극히 낮습니다. 다만 mangled-shuffled 결과보다 식별자가 길어지므로 번들 크기가 조금 커진다는 단점이 있습니다.

• 번들러 플러그인이나 다중 파일 일괄 처리 UI 사용하기

  공식 번들러 플러그인 대부분(webpack, Rollup, Vite)은 한 번의 빌드 안에서 파일 간 접두사 고유성을 자동으로 처리합니다. obfuscator.io UI의 다중 파일 일괄 난독화도 마찬가지입니다. npm API로 난독화를 직접 연결한 경우에는 무작위 접두사를 직접 켜야 합니다.

관련 옵션

• randomIdentifiersPrefix — 빌드마다 무작위 접두사 (권장)
• identifiersPrefix — 직접 지정하는 접두사 문자열
• identifierNamesGenerator — 이름 형태 (mangled, hexadecimal, …)