<div id="readability-page-1" class="page"><div><main role="main"><article><div><ul><li><a href="https://github.com/vercel/next.js/pull/49972">PR</a></li></ul>간단한 PR이었기는 한데 그래도 기록해두려고 한다.
작업을 시작한 건 슬랙에서 middleware 번들 사이즈 관련 얘기가 나와서다.
next의 일부분만 임포트하는데 cjs로 컴파일 되어있어서 트리 셰이킹이 작동하지 않는다는 얘기였다.
cjs 모듈을 직접 짜는 사람은 거의 없고 대부분 ESM으로 임포트한 뒤 common js로 컴파일하니까, 패턴을 인식해서 최적화 할 수 있을 것 같다고 했다.그래서 내가 구현해주겠다고 하고 작업 시적했다.
일단 <code>require</code> 호출을 인식하는 비지터를 만들고 <code>modularize-import</code>의 코드를 베껴와서 <code>require</code> 호출을 변경해도록 했다.
코드를 베껴오는 건 내 전문이라 진짜 금방 했다.
그런데 테스트를 추가하고 리뷰 요청하니까 설정이 더 자세해야한다고 얘기했다.
내가 구현한 설정은 <code>modularize-import</code>랑 똑같았다.<div><pre tabindex="0"><code data-lang="json">{
 "packages": {
 "next/server": {
 "transform": "next/server/{{ kebabCase member }}"
 }
 }
}
</code></pre></div>이게 설정인데, <code>next/server</code> 같은 경우<div><pre tabindex="0"><code data-lang="js">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,
};
</code></pre></div>처럼 컴파일된다더라.
그래서 아예 모든 걸 직접 설정할 수 있게 바꿨다.
설정 코드가 좀 길어지겠지만 별 수 없는 상황이었다.<div><pre tabindex="0"><code data-lang="json">{
 "packages": {
 "next/server": {
 "transforms": {
 "Response": "next/server/response"
 }
 }
 }
}
</code></pre></div>새로 구현된 설정은 이런 식이다.
<code>require('next/server').Response</code>를 <code>next/server/response</code>로 컴파일하라는 뜻이다.
물론 <code>require</code>한 결과물을 변수에 할당했다가 사용하는 경우를 지원하는 것이다.
여기까지 하고 리뷰 요청했는데, 리뷰 보니까 내가 새로 구현한 패스를 <code>next-swc</code>랑 연결하는 걸 까먹었더라.
<code>unresolved_mark</code>를 어떻게 넘겨야하는지 모르겠다고 하셔서 내가 고치고 다시 리뷰 요청했다.</div></article></main></div></div>

Math && Programming

PR 간단한 PR이었기는 한데 그래도 기록해두려고 한다. 작업을 시작한 건 슬랙에서 middleware 번들 사이즈 관련 얘기가 나와서다. next의 일부분만 임포트하는데 cjs로

CJS 최적화 패스 작업 기록

댓글