코드를 분리해보자

티스토리에서 조금씩 옴겨오고 있습니다.

splitChunk 분할 전

app.bundle에 몰빵이 되어있다보니 처음에 app.bundle를 16MB 를 한번에 내려받아야한다.

splitChunks: {
            chunks: 'all',
            minSize: 30000, // 생성할 청크의 최소 byte 크기입니다.
            maxSize: 0, // default:0 만약에 최대 바이트를 지정할 시 분할후 크기가 그 이상을 넘어가면 더 작게 분할한다.
            minChunks: 1, // default:1 모듈이 분할 전에 청크 간에 공유되어야 하는 최소 개수입니다.
            maxAsyncRequests: 5, // default:30 on-demand 로드 시의 최대 병렬 요청 수입니다.
            maxInitialRequests: 10, // default:30 엔트리 포인트의 최대 병렬 요청 수입니다.
            automaticNameDelimiter: '~', // default: '~' 기본적으로 webpack은 출처와 청크 이름을 사용하여 이름을 생성합니다
            name: true,
            cacheGroups: {
                reactVendor: {
                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
                    name: 'reactvendor',
                },
                reactPlayerVendor: {
                    test: /[\\/]node_modules[\\/](react-player)[\\/]/,
                    name: 'reactPlayerVendor',
                },
                agGridVendor: {
                    test: /[\\/]node_modules[\\/](ag-grid-enterprise|ag-grid-community|ag-grid-react)[\\/]/,
                    name: 'agGridVendor',
                },
                utilityVendor: {
                    test: /[\\/]node_modules[\\/](lodash|moment)[\\/]/,
                    name: 'utilityVendor',
                },
                vendors: {
                    test: /[\\/]node_modules[\\/](!react-player)(!lodash)(!moment)(!ag-grid-enterprise)(!ag-grid-community)(!ag-grid-react)[\\/]/,
                    name: 'vendor',
                    priority: -10,
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                },
            },
        },
        runtimeChunk: {
            //추가 부분
            name: 'runtime',
        },

하지만 위 splitChunk를 적용하면

app.bundle 파일이 1/2이 되었다.

개발자 도구를 켠 뒤 네트워크를 느린 3G 로 변경 한 후에 비교를 해보았다.

새로고침을 해서 번들파일을 내려받는 시간을 체크해보았다.

splitChunk 전 app.bundle 16메가 - 40~63초

splitChunk 후 - 13초
(용량이 제일 큰게 app.bundle 5.5메가, devtool에 sourceMap도 false로 변경함

근데 여기서 codeSplit 전에 reactPlayer 같은 경우는 lazy로 로딩을 사용 하고 있었기 때문에
라이브러리를 사용하는 화면을 진입해야 reactPlayer.bundle를 로딩하고 있었다.

심지어 사용하는 페이지가 단 한 곳이라서 vendor에서 제외하고 사용해도 무방할거 같다.

만약에 동적으로 청크를 가져올생각이면
https://v4.webpack.js.org/guides/code-splitting/#dynamic-imports

react router에도 동적 가져오기
https://v5.reactrouter.com/web/guides/code-splitting

react lazy import
https://ko.reactjs.org/docs/react-api.html#reactlazy

const VideoPlayPreview = lazy(() => import('@cmp/video/VideoPlayPreview'));

<Suspense fallback="<div>Loading...</div>">
   	<VideoPlayPreview />
</Suspense>

#ref
https://webpack.kr/plugins/split-chunks-plugin/#root