Next.js: Chrome 개발자 도구 적용 범위가 있는 app.js의 ~50% 사용되지 않은 바이트

Chrome 개발자 도구 코드 적용 유틸리티

—

물론 생산 중입니다.

—

CSS와는 별도로( styled-jsx 처음 사용하고 공유 스타일 디자인을 개선하거나 styletron 와 같은 것을 사용해야 함) — 자동 코드 분할 기능을 잘못 이해했나요?

컨텍스트를 제공하기 위해 HOC를 사용하여 각 페이지를 래핑하고 각 페이지에서 반드시 사용하지 않아도 되는 메서드와 소품을 모두 전달합니다. 추가로: 일부 수입품에 대해 여기저기서 부주의했을 수 있습니다. 현재 모든 Firebase를 가져오는 re-base 를 사용합니다(내 사용 사례에서는 필요하지 않음).

webpack의 automatic code splitting 와 static analysis and tree shaking 롤업을 혼합할 수 있습니까? 그렇다면,

1. Next는 트리 쉐이킹 및 데드 코드 제거를 수행해야 합니까?

2. 그렇지 않다면 이 문제에 접근하고 해결하는 방법에 대한 제안이 있습니까? Chrome Dev Tools 적용 범위 결과 는 아직 간단하게 내보낼 수 없으므로 사용하지 않는 코드 경로를 식별하고 축소된 출력으로 가져오는 방법을 잘 모르겠습니다.

3. webpack-rollup-loader 와 같은 것을 사용하는 것이 가능하고 의미가 있습니까?

4. 이 중 어떤 것이 이미 멋진 Next 작동 방식을 개선할 수 있습니까?

감사 해요!