woolta

next js 웹 최적화 후기 (1. 리소스 번들링 )

wooltaUserImgReact | 2019-05-26

웹성능 최적화를 해볼까..?

최근 웹 성능관련 최적화에 대한 포스팅 자료들을 보며 **과연 내가 작업한 사이드 프로젝트로 만든 블로그는 얼마나 최적화가 잘되어 있을까?? ** 궁금하기도 해서 시작해본 최적화 관련 경험에 대해 포스팅 하게 되었습니다.

개발자 도구를 통한 번들 size 측정

웹 성능을 최적화 하기 위해 우선 가장 중요한 빌드 파일이 어느정도 되는지 파악하는것이 중요하였습니다. 그러기 위해 크롬 개발자 도구를 활용하여 cache disable 옵션을 통해 해당 블로그의 번들링되는 사이즈를 측정하였습니다.

개발자 도구

https://image.woolta.com/3fd420c08ceac17c.png

위의 cache disable 옵션 을 체크하면 캐싱하지 않고 첫로딩과 같은 경험을 하기때문에 보다 정확한 성능 측정이 가능합니다.

측정 결과

https://image.woolta.com/3fe097864c554fbd.png

번들링되어 보이는 main 스크립트 파일이 무료 1MB에 육박하는 사이즈로 확인 되었습니다.. 너무나도 충격적인 결과입니다.. 참고로 httparchive 에서는 자바스크립트의 적절한 빌드 사이즈를 다음과 같이 권장하고 있습니다.

권장 번들 사이즈

|DESKTOP|MOBILE| |---|---|---|---|---| |401.7 KB|355.2 KB|

즉 이미 권장사이즈에 약 2.5배 이상에 육박하는 상황 입니다.

문제 파악 1차

빌드된 js 파일이 1MB 정도나 된다는건 너무나도 이상했다고 판단하였습니다. 해당 블로그는 단순한 markdown 에디터 기능을 추가한 crud 형태의 간단한 프로젝트이고 next.js 의 지원으로 코드 스플리팅 도 되어있기 때문에 저 용량은 도저히 납득할 만한 크기가 아니였습니다. 때문에 npm을 통해 받은 외부 라이브러리 에서 이슈가 있을것이라 생각 하였습니다.

bundle-analyzer를 통한 분석 시작

번들어떤 부분에서 가장 많은 용량을 차지 하는지 분석하기 위해 번들 분석기를 사용 하기로 하였습니다.

bundle-analyzer 는 빌드된 파일을 트리맵 형식으로 어떤것들이 있는지 크기는 어느정도 되는지 알려주는 아주 유용한 플러그인 입니다. 원래는 webpack-bundle-analyzer 로 사용하려 했으나 next.js 에서 제공하는 next-bundle-analyzer 를 사용하였습니다. 해당 next-bundle-analyzer 를 사용하면 서버사이드 랜더링 시에 대한 번들까지 분석해주기 때문에 더욱 편리합니다.

next-bundle-analyzer 설치 및 설정

1. 설치

먼저 next-bundle-analyzer 를 설치 합니다.

npm install --save @zeit/next-bundle-analyzer

2. 설정

설치한 next-bundle-analyzer 를 사용하기 위해 next.config.js 파일에 설정해 주도록 합니다. 설정 부분에 대한 부분은 next-bundle-analyzer 를 참조하시면 됩니다.

const compose = require('next-compose')
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer');

module.exports = compose([
    [withBundleAnalyzer,{
        analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
        analyzeBrowser: ['browser', 'both'].includes(process.env.BUNDLE_ANALYZE),
        bundleAnalyzerConfig: {
            server: {
                analyzerMode: 'static',
                reportFilename: '../bundles/server.html'
            },
            browser: {
                analyzerMode: 'static',
                reportFilename: '../bundles/client.html'
            }
        }
    }],....])

3. 실행

BUNDLE_ANALYZE=both npm run build

BUNDLE_ANALYZE 로 변수 세팅후 빌드를 진행하면 위에 설정한 reportFilename 에 자동으로 번들링 결과를 만든 html 파일을 확인할 수 있습니다.

번들 결과 확인

https://image.woolta.com/3fee25c6eb2b13b6.png

확인 결과 ** react-icons** 가 압축전 무려 1.32MB 나 차지 하는 부분을 확인 할 수 있었습니다. 그런데 실제로는 해당 라이브러리로 사용하는 아이콘은 3~4개 정도인데 비정상적으로 크기 때문에 이상하다고 느끼고 열심히 구글링을 한 결과 다음의 내용을 찾을 수 있었습니다.

https://image.woolta.com/3fbd076dd1d9ef68.png

간략하게 설명하면 이전 버전에서는 한두개만 사용해도 전부 다 로드하는 버그가 있었고 3.x 버전에서는 해결이 되었다는 내용이였습니다.

원인 해결

문제점인 react-icons 에 대한 해결책을 찾았으니 빠르게 버전 업데이트를 통해 해결 후 다시 번들링을 분석하였습니다.

react-icons 버전 업데이트

npm install react-icons@latest

업데이트 후 번들링 분석 결과

https://image.woolta.com/3fd09cb12440dce8.png

빌드 파일 확인

https://image.woolta.com/3f99cc5fa21191c0.png

문제점인 라이브러리에 대한 조치 이후 번들사이즈가 1MB -> 267KB 로 확실하게 개선됨을 확인할 수 있었습니다.

해결 후기

비록 실제 문제는 엄청나게 간단하였으나 최적화검사를 진행하지 않고 번들링 파일을 보지 않는 이상 소스레벨에서는 전혀 감을 잡을수 없던 부분이였습니다. 이런식으로 생각지도 못한 부분에서 최적화를 진행하고 낭비되는 리소스를 줄일수 있었습니다. :)