Cjs 최적화 패스 작업 기록
간단한 PR이었기는 한데 그래도 기록해두려고 한다. 작업을 시작한 건 슬랙에서 middleware 번들 사이즈 관련 얘기가 나와서다. next의 일부분만 임포트하는데 cjs로 컴파일 되어있어서 트리 셰이킹이 작동하지 않는다는 얘기였다. cjs 모듈을 직접 짜는 사람은 거의 없고 대부분 ESM으로 임포트한 뒤 common js로 컴파일하니까, 패턴을 인식해서 최적화 할 수 있을 것 같다고 했다.
그래서 내가 구현해주겠다고 하고 작업 시적했다.
일단 require 호출을 인식하는 비지터를 만들고 modularize-import의 코드를 베껴와서 require 호출을 변경해도록 했다.
코드를 베껴오는 건 내 전문이라 진짜 금방 했다.
그런데 테스트를 추가하고 리뷰 요청하니까 설정이 더 자세해야한다고 얘기했다.
내가 구현한 설정은 modularize-import랑 똑같았다.
{
"packages": {
"next/server": {
"transform": "next/server/{{ kebabCase member }}"
}
}
}
이게 설정인데, next/server 같은 경우
const serverExports = {
NextRequest: require("next/dist/server/web/spec-extension/request")
.NextRequest,
NextResponse: require("next/dist/server/web/spec-extension/response")
.NextResponse,
ImageResponse: require("next/dist/server/web/spec-extension/image-response")
.ImageResponse,
userAgentFromString: require("next/dist/server/web/spec-extension/user-agent")
.userAgentFromString,
userAgent: require("next/dist/server/web/spec-extension/user-agent")
.userAgent,
};
처럼 컴파일된다더라. 그래서 아예 모든 걸 직접 설정할 수 있게 바꿨다. 설정 코드가 좀 길어지겠지만 별 수 없는 상황이었다.
{
"packages": {
"next/server": {
"transforms": {
"Response": "next/server/response"
}
}
}
}
새로 구현된 설정은 이런 식이다.
require('next/server').Response를 next/server/response로 컴파일하라는 뜻이다.
물론 require한 결과물을 변수에 할당했다가 사용하는 경우를 지원하는 것이다.
여기까지 하고 리뷰 요청했는데, 리뷰 보니까 내가 새로 구현한 패스를 next-swc랑 연결하는 걸 까먹었더라.
unresolved_mark를 어떻게 넘겨야하는지 모르겠다고 하셔서 내가 고치고 다시 리뷰 요청했다.